slide-maker

Files (153)

• README.md
• SKILL.md
• .gitignore · deck-template/
• Inter-Bold.otf · deck-template/assets/fonts/
• Inter-LICENSE.txt · deck-template/assets/fonts/
• Inter-Regular.otf · deck-template/assets/fonts/
• index.html · deck-template/
• package-lock.json · deck-template/
• package.json · deck-template/
• postcss.config.js · deck-template/
• edit-mode.css · deck-template/public/edit-mode/
• edit-mode.js · deck-template/public/edit-mode/
• html-to-image.js · deck-template/public/edit-mode/
• check-slop.mjs · deck-template/scripts/
• clean-verify.mjs · deck-template/scripts/
• diff-regions.mjs · deck-template/scripts/
• export-deck.mjs · deck-template/scripts/
• export-pptx-jsx.mjs · deck-template/scripts/
• feedback-bridge.mjs · deck-template/scripts/
• inspect.mjs · deck-template/scripts/
• deck-driver.mjs · deck-template/scripts/lib/
• dom-walk.browser.js · deck-template/scripts/lib/
• pptx-builders.mjs · deck-template/scripts/lib/
• svg-to-custgeom.mjs · deck-template/scripts/lib/
• receive-feedback.mjs · deck-template/scripts/
• serve.mjs · deck-template/scripts/
• shoot-layouts.mjs · deck-template/scripts/
• shoot-slides.mjs · deck-template/scripts/
• validate-pptx.mjs · deck-template/scripts/
• verify-deck.mjs · deck-template/scripts/
• verify-export.mjs · deck-template/scripts/
• verify-pptx.mjs · deck-template/scripts/
• verify-text.mjs · deck-template/scripts/
• App.jsx · deck-template/src/
• Background.jsx · deck-template/src/components/
• Diagram.jsx · deck-template/src/components/
• ExportMenu.jsx · deck-template/src/components/
• GridView.jsx · deck-template/src/components/
• NotesPanel.jsx · deck-template/src/components/
• PresentBar.jsx · deck-template/src/components/
• PresentMode.jsx · deck-template/src/components/
• SlideRail.jsx · deck-template/src/components/
• SlideThumb.jsx · deck-template/src/components/
• SlideTransition.jsx · deck-template/src/components/
• Toast.jsx · deck-template/src/components/
• TopBar.jsx · deck-template/src/components/
• TransitionMenu.jsx · deck-template/src/components/
• transitions.js · deck-template/src/components/
• useFullscreen.js · deck-template/src/components/
• index.css · deck-template/src/
• main.jsx · deck-template/src/
• 00-EXAMPLE-hero-metrics.jsx · deck-template/src/slides/
• tailwind.config.js · deck-template/
• vite.config.js · deck-template/
• vite.standalone.config.js · deck-template/
• README.md · design-system/
• README.md · design-system/assets/deck-media/
• logo-full.svg · design-system/assets/logos/
• mark.svg · design-system/assets/logos/
• 01-cover.html · design-system/slides/
• …and 93 more

SKILL.md (first lines)

# Slide Maker

Make presentation slides that look genuinely impressive and stay on-brand — from a
single slide to a full deck, with a review loop and HTML/PDF/PPTX export. The skill
ships everything: a token-driven design kit, a craft guide, a slop validator, a
ready-made React deck, edit-mode collaboration, and the exporters. It works with
**whatever design system the deck needs** — yours, a suggested one, or a neutral default.

**It works as job-specific workflows.** Figure out which job the user is on (below),
then open that workflow file and follow it. The natural order is
brainstorm → generate → export, but the user can jump straight to any step (e.g. "export
this deck to PDF" on a deck that already exists).

## Pick the workflow

| The user wants to… | Workflow |
|---|---|
| figure out what the deck should say / its structure (vague idea, "I need a deck for X") | [slide-brainstorm](references/workflows/slide-brainstorm.md) |
| build the actual slides and iterate on them (generate, review, revise) | [slide-generate](references/workflows/slide-generate.md) |
| get an **editable** PowerPoint (recipient edits text/shapes) | [export-editable-pptx](references/workflows/export-editable-pptx.md) |
| get a **pixel-perfect, view-only** PowerPoint | [export-image-pptx](references/workflows/export-image-pptx.md) |
| get a single self-contained **HTML** file (opens offline) | [export-standalone-html](references/workflows/export-standalone-html.md) |
| get a **PDF** (print/handout) | [export-pdf](references/workflows/export-pdf.md) |

```
brainstorm ──▶ generate ──▶ ┬─▶ editable PPTX
(idea→skeleton) (HTML deck,  ├─▶ image PPTX
                review loop) ├─▶ standalone HTML
                             └─▶ PDF
```
Each workflow ends by pointing to the next. If a request is ambiguous about which job,
ask one quick question rather than guessing — brainstorming a deck and exporting one are
very different work. If the user's idea is still vague and they ask to "make slides,"
start at **brainstorm** (don't generate from an unexamined idea).

## Resolve the design system (run at the START of brainstorm/generate)

The layouts are token-driven: color, type, and spacing come from a **theme file**, never
from hardcoded values in the slides. Before you build anything, resolve which design
system supplies those tokens. Run this flow **in order** and stop at the first branch
that applies:

1. **Ask the user if they have their own design system / brand tokens.** If yes → map its
   colors/type/spacing into the token contract by writing them into
   `design-system/themes/clean-light.css` (or a new theme file that the entry point
   imports). Layouts never change; only the theme file's token *values* do.
2. **Else, check if `nextlevelbuilder/ui-ux-pro-max-skill` is installed.** If yes → invoke
   it to suggest the best-fit design system for the deck's content/idea, then map that
   suggestion into the theme file.
3. **Else, recommend it and guide a permanent install** from
   `https://github.com/nextlevelbuilder/ui-ux-pro-max-skill` — **this is the preferred
   path.**
4. **Else (user won't install permanently): ASK FIRST, then** do a shallow
   `git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill` into `/tmp`, use it
   for **THIS TURN ONLY**, and do **not** persist it into the skill or the user's project.
   **Never run this network fetch without explicit consent** — always ask before cloning.
5. **Else (user declines the fetch too): use the bundled `clean-light` theme.**

`clean-light` is the **guaranteed floor** — the flow always ends in a working theme, so
the skill never blocks. Whatever the outcome, the active theme file is the single source
of truth for color/type: read it, and write token values into it rather than hardcoding
into layouts.

## Choose where to write the deck (start of generate)

Before scaffolding, **ask the user where the deck should live**. Propose a default and
let them override:

- **Default output dir:** `./slides/<deck-name>/` in the user's current project.
- **Exports:** `./slides/<deck-name>/export/`.
- **Copy the `deck-template/` scaffold to that location — NOT into the skill directory.**
  This keeps the skill install clean and lets multiple decks coexist side by side. The
  skill's own `deck-template/` is a pristine template; the working copy lives in the
  user's project.

## The other use: supply only the design layer

This skill can also feed just the **design layer** (tokens, components, patterns) to a
*different* slide generator (e.g. `slides-generator`). That generator runs its own
workflow but pulls its theme from here instead of picking a generic vibe:
- **React + Tailwind** → drop the theme block from
  [tailwind-theme.md](references/tailwind-theme.md) into `tailwind.config.js` and import
  the active font. Then the Tailwind utilities resolve to the active design system's tokens.
- **Plain HTML/CSS** → link `<skill>/design-system/styles.css`; style with the CSS custom
  properties it exposes (e.g. `var(--fs-h1)`, `var(--space-8)`, the theme's color tokens),
  never with literal hex values.

## Design kit (the source of truth — read these, don't guess)

Ships **inside this skill**, so it's standalone:
```
<skill>/design-system/
├── styles.css                ← token entry point (imports tokens + the active theme; link for HTML slides)
├── tokens/                   ← colors, typography, spacing, fonts — THE source of truth
├── themes/clean-light.css    ← the active theme (bundled neutral default; the guaranteed floor)
├── slides/*.html             ← 34 premade slide layouts (the catalog)
└── assets/logos/             ← mark.svg, logo-full.svg (neutral placeholders; swap for the deck's real logos)
```
> The **active theme file wins** for color/type. If a layout appears to disagree with the
> tokens, the tokens/theme win — open and read them. Never hardcode a hex or a font into a
> layout; change the theme file instead.

## Craft rules (apply in every workflow, regardless of who's driving)

- **The active design system is the source of truth for color and type.** Layouts are
  **token-driven — never hardcode a hex or a font.** Change the theme file's token values,
  not the layouts. If unsure of a value, read `<skill>/design-system/tokens/` and the
  active theme.
- **Default font is a system stack.** The PPTX exporter embeds **Inter** (SIL OFL) so the
  editable output renders consistently on machines that lack the deck's fonts.
- **One focal point, real whitespace.** Every slide: one hero dominates, a clear
  eyebrow→title→rule→body rhythm, ≥35% whitespace, calm motion. Depth and restraint over
  decoration. Not every slide needs a heavy full-bleed treatment — reserve those for
  dividers, section rails, and the close, so they carry weight by contrast.
- **Make it wow, not just compliant.** On-brand ≠ impressive. Wow = restraint + ONE focal
  point + depth. The craft guide is the ceiling: [wow-guide.md](references/wow-guide.md).
  The `check-slop.mjs` validator is the floor.
- **"Done" = the user's request restated as a passing test, shown with numbers.** Not "I'm
  fairly sure" / "looks right now." Write the acceptance criterion in the user's words

From bmad-labs/skills, MIT.

More from bmad-labs/skills