# Slides

> Generates branded presentations as PDF using Slidev. Auto-detects brand colors and fonts from the repo's Tailwind config, CSS variables, or design tokens. Use when asked to create a presentation, make slides, generate a deck, or prepare a slide deck on any topic.

- **Type:** Skill
- **Install:** `agentstack add skill-jorgempenalva-slides-slides`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jorgempenalva](https://agentstack.voostack.com/s/jorgempenalva)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [jorgempenalva](https://github.com/jorgempenalva)
- **Source:** https://github.com/jorgempenalva/slides

## Install

```sh
agentstack add skill-jorgempenalva-slides-slides
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```json
{
  "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/.md` with:

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

### Step 3 — Export to PDF

```bash
cd presentations && npx slidev export output/.md --output ./output/.pdf
```

Report the output path to the user when done.

---

## Frontmatter Template

Every generated presentation starts with:

```yaml
---
theme: default
title: ""
class: text-center
drawings:
  persist: false
transition: slide-left
mdc: true
fonts:
  sans: ""
  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 `` block inserted after the frontmatter:

```html

:root {
  --brand-primary-light: ;
  --brand-primary-medium: ;
  --brand-primary: ;
  --brand-primary-dark: ;
  --brand-heading: ;
  --brand-subheading: ;
  --brand-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);
}

```

---

## Layout Patterns

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

### Title Slide

```markdown
# Presentation Title

## Subtitle or context

  Date or tagline

```

### Bullet List

```markdown
# Slide Title

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

### Two-Column Layout

```markdown
# Slide Title

### Left Column
- Content here

### Right Column
- Content here

```

### Table

```markdown
# Slide Title

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

### Blockquote / Highlight

```markdown
# Slide Title

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

Supporting context below the quote.
```

---

## Export Instructions

### Standard Export

```bash
cd presentations && npx slidev export output/.md --output ./output/.pdf
```

### Output Files

- Markdown source: `presentations/output/.md`
- PDF export: `presentations/output/.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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [jorgempenalva](https://github.com/jorgempenalva)
- **Source:** [jorgempenalva/slides](https://github.com/jorgempenalva/slides)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jorgempenalva-slides-slides
- Seller: https://agentstack.voostack.com/s/jorgempenalva
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.