Presentation Builder

Turn a topic and some content into a polished, animation-rich HTML presentation — and optionally style it to match any brand by pointing it at a website.

Built as a Claude Code skill. Run the project, answer three questions, get a finished deck.

---

What it does

   you run the project
          │
          ▼
   ┌─────────────────────┐
   │ 1. topic + content  │   what's it about? what should it cover?
   └─────────────────────┘
          │
          ▼
   ┌─────────────────────┐
   │ 2. reference website│   paste a URL to match its design — or skip
   └─────────────────────┘
          │
   ┌──────┴───────┐
   │ URL given    │ → extracts colors, fonts, logo → design-guideline.md
   │ no URL       │ → uses a clean default style
   └──────┬───────┘
          ▼
   ┌─────────────────────┐
   │ 3. presentation.html│   self-contained, animated, low-text slide deck
   └─────────────────────┘

Every deck is:

• Animation-rich — every slide moves: staggered reveals, count-up numbers, flowing diagrams, pulsing hubs, traveling beams.
• Low-text — one short headline plus a graphic per slide. No paragraphs.
• Self-contained — a single HTML file. Inline CSS + JS, Google Fonts CDN. No build step, no dependencies.
• Viewport-perfect — each slide is exactly one screen. Navigate with arrow keys, space, scroll, swipe, or the side dots.
• On-brand — give it a website and the deck matches that brand's colors, fonts, and mood.

---

Quick start

1. Install Claude Code.
2. Clone this repo and open it:

   git clone https://github.com/MomoXplore/presentation-builder.git
   cd presentation-builder
   claude

3. Ask for a presentation:

   Build a presentation about our new product launch.
   

4. Claude asks for your content, then for a reference website (optional), then generates presentation.html.
5. Open it — arrow keys to navigate.

---

Example prompts

Build a presentation about quarterly sales results.

Make a 10-slide pitch deck for my startup. Match the design of stripe.com.

Turn the notes in ./talk-outline.md into a conference talk deck.

---

How the design matching works

If you give a reference URL, the skill:

1. Downloads the page's raw HTML.
2. Ranks its hex colors by frequency to find the real brand palette.
3. Reads the font-family declarations and font <link> tags.
4. Grabs the logo SVG if the page has one.
5. Writes a reusable design-guideline.md — colors with roles, fonts, radii, mood.
6. Builds the deck against that guideline.

Brand details are only ever extracted, never invented. No reference URL -> a clean default style is used instead.

---

What's in the box

Path	What it is
.claude/skills/presentation-builder/SKILL.md	The runbook Claude follows
references/deck-template.md	HTML skeleton, viewport CSS, slide-controller JS
references/components.md	The animated component library
references/design-extraction.md	Website → design guideline
CLAUDE.md	Project entrypoint and rules

The animated component library includes: count-up metrics, flow pipelines, hub diagrams with traveling beams, icon pods, before/after comparison cards, browser mockups, segmented timelines, loop diagrams, animated title slides, and cycling card stacks.

---

Design principles

1. Low word count. Headline + graphic. If a slide needs a sentence, the graphic is wrong.
2. Animate everything. Every slide has entry motion plus a content-driven or looping animation.
3. One viewport per slide. Never scroll inside a slide.
4. Zero dependencies. One HTML file. No build step.
5. Match the brand, never invent it.

---

License

MIT — see LICENSE.