# HTML Slides Creator > Generate polished reveal.js HTML presentations from a codebase — analyses repo, plans narrative, writes slides with branding, code demos, architecture diagrams, and speaker notes. Invoke when user says "create slides", "build a presentation", "generate a deck", "make slides for this tool/project". - Skill: `mouadja02/html-slides-creator` (Agent Skill) - Install (CLI): `npx skillmds@latest add mouadja02/html-slides-creator` - Raw SKILL.md: https://api.skillmd.com/api/skills/mouadja02/html-slides-creator/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: mouadja02 (https://skillmd.com/u/mouadja02) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/mouadja02/html-slides-creator --- # HTML Slides Creator Generate production-quality **reveal.js** presentations from a codebase. The agent reads the repo, plans a narrative, and outputs a self-contained `slides.html` the user can open in any browser. --- ## Phase 1 — Gather Context Before writing a single slide, collect: ``` 1. CODEBASE — attached files, folder structure, or README path 2. PRESENTATION PURPOSE - Who is the audience? (devs, execs, investors, customers, conference) - What is the goal? (demo, pitch, onboarding, tutorial, architecture review) - How long? (5 min ≈ 8-10 slides, 15 min ≈ 15-20, 30 min ≈ 25-35) 3. BRANDING (optional) - Primary color (hex), secondary color, accent color - Font preference (or "use defaults") - Logo URL or path (or skip) - Company/project name 4. SPECIAL REQUIREMENTS (optional) - Live code demo slides? - Architecture diagrams (Mermaid)? - Before/after comparisons? - Speaker notes? - PDF export needed? ``` If the user hasn't provided all of this, ask for items 1 and 2 at minimum. Items 3–4 are optional — use tasteful defaults. --- ## Phase 2 — Codebase Analysis Read the codebase systematically to extract slide-worthy content: ### What to look for | Source | Extract | |--------|---------| | `README.md` | Problem statement, features, quick-start, architecture overview | | `package.json` / `pyproject.toml` | Stack, dependencies, version | | Folder structure | Architecture layers, module boundaries | | Key source files | Core algorithms, API surface, design patterns | | `CHANGELOG.md` / `HISTORY.md` | Evolution, milestones, key releases | | `docs/` | Existing diagrams, ADRs, usage examples | | `examples/` / `demos/` | Code snippets to showcase | | `tests/` | What behaviors are guaranteed | | CI/CD config | Quality signals (coverage, linting, deployment) | ### Analysis output (internal — don't show to user) ``` PROJECT: [name] — [one-line description] PROBLEM: [what pain it solves] SOLUTION: [how it solves it uniquely] TECH STACK: [languages, frameworks, key deps] ARCHITECTURE: [components and how they connect] KEY FEATURES: [3-7 bullets] CODE HIGHLIGHTS: [2-3 interesting code snippets with explanations] METRICS/PROOF: [tests, perf numbers, usage stats] AUDIENCE FIT: [what this crowd cares about] ``` --- ## Phase 3 — Narrative Planning Map content to a proven presentation arc before writing HTML: ### Narrative templates **Developer / Conference deck** ``` 1. Hook — surprising fact or live demo first 2. Problem — pain the audience recognizes 3. Solution overview — 30-second pitch 4. Architecture — how it works 5. Code deep-dive — 2-3 highlight snippets 6. Demo / Live walkthrough 7. Results — benchmarks, adoption, proof 8. Getting started — install + first example 9. Roadmap / Contributing 10. Q&A / Links ``` **Executive / Investor pitch** ``` 1. Vision — one powerful statement 2. Problem & market size 3. Our solution 4. Demo / screenshot tour 5. Business value / ROI 6. Technical differentiation 7. Team / traction 8. Ask / next steps ``` **Internal onboarding / tutorial** ``` 1. What this tool is 2. When to use it (vs alternatives) 3. Architecture — how it fits the system 4. Quick start — run it in 3 steps 5. Core concepts — 3-5 key abstractions 6. Common patterns — recipes 7. Gotchas & troubleshooting 8. Where to get help ``` --- ## Phase 4 — Generate Slides ### Boilerplate — copy-paste base ```html {{PROJECT_NAME}}
``` --- ## Slide Type Library Use these battle-tested templates for each slide. Mix and match. ### Title / Hero slide ```html

{{PROJECT_NAME}}

{{TAGLINE}}

{{PRESENTER}} · {{DATE}}

``` ### Problem statement ```html

The Problem

💬 "{{PAIN_QUOTE_FROM_USER_OR_ISSUE}}"

``` ### Two-column feature overview ```html

What {{PROJECT_NAME}} Does

Before

  • {{BEFORE_1}}
  • {{BEFORE_2}}

After ✓

  • {{AFTER_1}}
  • {{AFTER_2}}
``` ### Architecture diagram (Mermaid) ```html

Architecture

graph LR A[Client] --> B[API Gateway] B --> C[{{SERVICE_1}}] B --> D[{{SERVICE_2}}] C --> E[(Database)] D --> E
``` ### Code highlight — step-by-step ```html

{{CODE_SLIDE_TITLE}}


{{CODE_SNIPPET}}

{{KEY_INSIGHT}}

``` ### Auto-animate code evolution (two slides) ```html

Before: Manual wiring


def process(data):
    result = []
    for item in data:
        if item.valid:
            result.append(transform(item))
    return result

After: One line NEW


def process(data):
    return [transform(i) for i in data if i.valid]
``` ### Three-column feature cards ```html

Key Features

{{ICON_1}} {{FEATURE_1}}

{{FEATURE_1_DESC}}

{{ICON_2}} {{FEATURE_2}}

{{FEATURE_2_DESC}}

{{ICON_3}} {{FEATURE_3}}

{{FEATURE_3_DESC}}

``` ### Metrics / proof slide ```html

Results

{{METRIC_1_NUM}}

{{METRIC_1_LABEL}}

{{METRIC_2_NUM}}

{{METRIC_2_LABEL}}

{{METRIC_3_NUM}}

{{METRIC_3_LABEL}}

``` ### Quick-start / Getting started ```html

Get Started in 60 Seconds


# 1. Install
{{INSTALL_COMMAND}}

# 2. Initialize
{{INIT_COMMAND}}

# 3. Run
{{RUN_COMMAND}}
📖 Full docs at {{DOCS_URL}}
``` ### Vertical drill-down (nested slides) ```html

{{TOPIC}}

Press ↓ to dive deeper

{{SUBTOPIC_1}}

{{DETAIL_1}}

{{SUBTOPIC_2}}

{{DETAIL_2}}

``` ### Call to action / closing ```html

{{CALL_TO_ACTION}}

🔗 {{REPO_URL}}

📦 {{INSTALL_COMMAND}}

📖 {{DOCS_URL}}

🐦 {{TWITTER_HANDLE}}

💬 {{COMMUNITY_LINK}}

⭐ Star us on GitHub!

``` --- ## Branding Guide ### Built-in themes (pick one or override) | Theme | Mood | Best for | |-------|------|----------| | `black` | Dark, professional | Tech talks, developer conferences | | `white` | Clean, minimal | Corporate, executive demos | | `night` | Dark, bold | Product pitches, dramatic reveals | | `dracula` | Dark purple | Developer-centric, IDE feel | | `sky` | Bright blue | Educational, friendly | | `moon` | Dark blue, elegant | Startups, investor decks | | `league` | Gray, serious | Government, finance | | `solarized` | Warm, readable | Long tutorials | ### Custom branding — CSS variables Override in `