Slidev Presentations Skill

Generate branded presentations from natural language. Auto-detects brand colors and fonts from your repo configuration, generates Slidev markdown, and exports to PDF.

Prerequisites

• Node.js >= 18
• If presentations/ does not exist, run bash scripts/init.sh (path relative to this skill's directory) to scaffold the project

Brand Discovery

On every presentation request, resolve brand colors and fonts before generating slides.

Resolution Flow

1. Check presentations/brand.json — if it exists, read and use those colors and fonts. Skip to slide generation.
2. Search the repo for brand colors in this order: a. tailwind.config.{js,ts,mjs,cjs} — look in theme.extend.colors or theme.colors for primary/brand keys b. CSS/SCSS files — :root blocks with --brand-*, --color-*, or --primary-* custom properties c. Design token files — tokens.json, design-tokens.json, theme.json d. package.json — theme or brand fields e. Any .claude/skills/*.md files mentioning hex color codes
3. Search the repo for brand fonts in this order: a. tailwind.config.{js,ts,mjs,cjs} — look in theme.extend.fontFamily or theme.fontFamily for sans and mono keys b. CSS/SCSS files — font-family declarations or --font-* custom properties c. Design token files — font family definitions
4. If colors/fonts found — generate presentations/brand.json and confirm with the user: "I found these brand colors and fonts in [source]. Should I use them?"
5. If NOT found — ask the user: "I couldn't find brand colors in your repo. Where should I get them? (company website, design file, specific file, or just give me a hex code)"
6. Save the resolved palette and fonts to presentations/brand.json

brand.json Format

{
  "name": "Company Name",
  "colors": {
    "primary-light": "#e8f4fd",
    "primary-medium": "#7fb8e0",
    "primary": "#2196f3",
    "primary-dark": "#1565c0",
    "heading": "#1a237e",
    "subheading": "#283593",
    "border": "#e0e0e0"
  },
  "fonts": {
    "sans": "Inter",
    "mono": "Fira Mono"
  }
}

Deriving a Full Palette from a Single Color

When the user provides just one primary hex, derive the full palette by generating light/medium/dark/heading/subheading variants plus a neutral border (#e0e0e0).

Default Fonts

If no fonts are found in the repo, omit the fonts key from brand.json and Slidev will use its theme defaults. When fonts are specified, they are loaded via Google Fonts automatically by Slidev's frontmatter fonts configuration.

Slide Generation Workflow

Step 1 — Gather Content

Ask the user (via AskUserQuestion) if not already clear: title, key content/topics, and optional slide count (default 6–8).

Step 2 — Generate Slidev Markdown

Create the file at presentations/output/<title-slug>.md with:

1. Frontmatter — Slidev configuration
2. <style> block — Brand colors mapped to CSS variables (see Styling Rules)
3. Slides — Content formatted using Layout Patterns, separated by ---

Step 3 — Export to PDF

cd presentations && npx slidev export output/<title-slug>.md --output ./output/<title-slug>.pdf

Report the output path to the user when done.

Frontmatter Template

Every generated presentation starts with:

---
theme: default
title: "<user-title>"
class: text-center
drawings:
  persist: false
transition: slide-left
mdc: true
fonts:
  sans: "<fonts.sans>"
  mono: "<fonts.mono>"
---

If brand.json includes a fonts key, populate the fonts block with those values. If no fonts are configured, omit the fonts block entirely and let Slidev use its theme defaults. Slidev loads the specified fonts automatically from Google Fonts.

Styling Rules

Map brand.json colors to the <style> block inserted after the frontmatter:

<style>
:root {
  --brand-primary-light: <colors.primary-light>;
  --brand-primary-medium: <colors.primary-medium>;
  --brand-primary: <colors.primary>;
  --brand-primary-dark: <colors.primary-dark>;
  --brand-heading: <colors.heading>;
  --brand-subheading: <colors.subheading>;
  --brand-border: <colors.border>;
}
.slidev-layout h1 {
  color: var(--brand-heading) !important;
  border-bottom: 3px solid var(--brand-primary);
  padding-bottom: 0.3rem;
}
.slidev-layout h2 {
  color: var(--brand-primary-dark) !important;
}
.slidev-layout h3 {
  color: var(--brand-subheading) !important;
}
.slidev-layout table th {
  background-color: var(--brand-heading) !important;
  color: white !important;
  padding: 0.5rem 0.75rem;
}
.slidev-layout table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--brand-border);
}
.slidev-layout table tr:nth-child(even) {
  background-color: var(--brand-primary-light);
}
.slidev-layout blockquote {
  border-left: 4px solid var(--brand-primary);
  background-color: var(--brand-primary-light);
  padding: 0.5rem 1rem;
  border-radius: 0 0.25rem 0.25rem 0;
}
.slidev-layout strong {
  color: var(--brand-heading);
}
</style>

Layout Patterns

Use these 5 patterns when composing slides. Mix them based on content type.

Title Slide

# Presentation Title

## Subtitle or context

<div class="pt-12">
  <span class="px-2 py-1 rounded text-sm">Date or tagline</span>
</div>

Bullet List

# Slide Title

- Point one with **emphasis**
- Point two with supporting detail
- Point three

Two-Column Layout

# Slide Title

<div class="grid grid-cols-2 gap-8">
<div>

### Left Column
- Content here

</div>
<div>

### Right Column
- Content here

</div>
</div>

Table

# Slide Title

| Column A | Column B | Column C |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

Blockquote / Highlight

# Slide Title

> Key insight or quote that deserves emphasis.
> Can span multiple lines.

Supporting context below the quote.

Export Instructions

Standard Export

cd presentations && npx slidev export output/<slug>.md --output ./output/<slug>.pdf

Output Files

• Markdown source: presentations/output/<slug>.md
• PDF export: presentations/output/<slug>.pdf

Example Usage

Simple topic:

"Create a presentation about our engineering team's 2024 accomplishments"

Structured content:

"Make slides for the board meeting covering: revenue growth, customer acquisition, product roadmap, and hiring plan"

With specifics:

"Generate a deck on microservices migration — 8 slides, cover current architecture, target state, timeline, risks, and team allocation"

Notes

• Brand discovery runs only once per project (persisted in brand.json)
• Subsequent requests reuse existing brand.json without re-prompting
• If the user wants to change brand colors, delete presentations/brand.json and request a new presentation
• The presentations/ directory is project-local (not committed to this skill's repo)
• This skill does NOT include any fixed templates — all content is generated dynamically from user input