Html slides creator

Skill mouadja02/skills/skills/diagrams-slides/html-slides-creator

A curated collection of agent skills for your AI agents - engineering craft, prompt engineering, design, growth marketing, ...

Install

npx -y skills add mouadja02/skills --skill html-slides-creator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.md

17.4 KB, as published. Nobody here has run it

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{PROJECT_NAME}}</title>

  <!-- reveal.js from CDN — no install required -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reset.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/{{THEME}}.css" id="theme">
  <!-- highlight.js syntax theme -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/monokai.css">

  <style>
    /* ── Brand overrides ───────────────────────────── */
    :root {
      --brand-primary:   {{PRIMARY_COLOR}};
      --brand-secondary: {{SECONDARY_COLOR}};
      --brand-accent:    {{ACCENT_COLOR}};
    }

    .reveal h1, .reveal h2 { color: var(--brand-primary); }
    .reveal .accent        { color: var(--brand-accent); }
    .reveal .highlight-box {
      background: rgba(255,255,255,0.08);
      border-left: 4px solid var(--brand-accent);
      padding: 0.5em 1em;
      border-radius: 4px;
    }
    .reveal .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2em;
      align-items: start;
    }
    .reveal .three-col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.5em;
    }
    .reveal .card {
      background: rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 1em;
    }
    .reveal .tag {
      display: inline-block;
      background: var(--brand-accent);
      color: #000;
      font-size: 0.5em;
      padding: 0.2em 0.6em;
      border-radius: 99px;
      vertical-align: middle;
      font-weight: bold;
    }
    .reveal .logo { position: absolute; top: 1em; right: 1em; height: 40px; }
    .reveal pre { box-shadow: none; }
    .reveal pre code { max-height: 480px; }
    /* ── Mermaid diagram centering ─────────────────── */
    .mermaid { display: flex; justify-content: center; }
  </style>
</head>
<body>

<div class="reveal">
  <!-- LOGO (optional) -->
  <!-- <img class="logo" src="{{LOGO_URL}}" alt="logo"> -->

  <div class="slides">

    <!-- ════════════════════════════════════════════════
         SLIDES GO HERE
         ════════════════════════════════════════════════ -->

  </div>
</div>

<!-- reveal.js core -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.js"></script>
<!-- plugins -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/notes/notes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/highlight.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/markdown/markdown.js"></script>
<!-- Mermaid for architecture diagrams -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

<script>
  // Initialize Mermaid BEFORE Reveal (dark theme for diagrams)
  mermaid.initialize({ startOnLoad: false, theme: 'dark' });

  Reveal.initialize({
    hash: true,
    slideNumber: 'c/t',
    transition: 'slide',          // none | fade | slide | convex | concave | zoom
    transitionSpeed: 'default',   // default | fast | slow
    controls: true,
    progress: true,
    center: true,
    autoAnimate: true,            // enables data-auto-animate between slides
    plugins: [ RevealNotes, RevealHighlight, RevealMarkdown ]
  });

  // Render Mermaid diagrams after Reveal is ready
  Reveal.on('ready', () => {
    document.querySelectorAll('.mermaid').forEach(el => {
      mermaid.render('mermaid-' + Math.random().toString(36).slice(2), el.textContent)
        .then(({ svg }) => { el.innerHTML = svg; });
    });
  });
</script>
</body>
</html>

Slide Type Library

Use these battle-tested templates for each slide. Mix and match.

Title / Hero slide

<section data-background-gradient="linear-gradient(135deg, {{PRIMARY_COLOR}} 0%, {{SECONDARY_COLOR}} 100%)">
  <h1 class="r-fit-text">{{PROJECT_NAME}}</h1>
  <p style="font-size: 1.3em; opacity: 0.9">{{TAGLINE}}</p>
  <p style="opacity: 0.6; font-size: 0.7em">{{PRESENTER}} · {{DATE}}</p>
  <aside class="notes">Welcome. Introduce yourself. State the goal of the talk.</aside>
</section>

Problem statement

<section>
  <h2>The Problem</h2>
  <div class="highlight-box">
    <p>💬 "{{PAIN_QUOTE_FROM_USER_OR_ISSUE}}"</p>
  </div>
  <ul>
    <li class="fragment">{{PAIN_POINT_1}}</li>
    <li class="fragment">{{PAIN_POINT_2}}</li>
    <li class="fragment">{{PAIN_POINT_3}}</li>
  </ul>
  <aside class="notes">Make audience nod. They know this pain.</aside>
</section>

Two-column feature overview

<section>
  <h2>What {{PROJECT_NAME}} Does</h2>
  <div class="two-col">
    <div>
      <h3>Before</h3>
      <ul style="font-size: 0.75em">
        <li class="fragment">{{BEFORE_1}}</li>
        <li class="fragment">{{BEFORE_2}}</li>
      </ul>
    </div>
    <div>
      <h3>After <span class="tag">✓</span></h3>
      <ul style="font-size: 0.75em">
        <li class="fragment accent">{{AFTER_1}}</li>
        <li class="fragment accent">{{AFTER_2}}</li>
      </ul>
    </div>
  </div>
</section>

Architecture diagram (Mermaid)

<section>
  <h2>Architecture</h2>
  <div class="mermaid" style="font-size: 0.8em">
    graph LR
      A[Client] --> B[API Gateway]
      B --> C[{{SERVICE_1}}]
      B --> D[{{SERVICE_2}}]
      C --> E[(Database)]
      D --> E
  </div>
  <aside class="notes">Walk through data flow left to right.</aside>
</section>

Code highlight — step-by-step

<section>
  <h2>{{CODE_SLIDE_TITLE}}</h2>
  <pre><code class="{{LANGUAGE}}" data-trim data-line-numbers="1-3|5-8|10-14">
{{CODE_SNIPPET}}
  </code></pre>
  <p class="fragment" style="font-size: 0.75em">{{KEY_INSIGHT}}</p>
  <aside class="notes">Lines 1-3: setup. Lines 5-8: the interesting part. Lines 10-14: result.</aside>
</section>

Auto-animate code evolution (two slides)

<!-- slide A -->
<section data-auto-animate>
  <h2 data-id="code-title">Before: Manual wiring</h2>
  <pre data-id="code-block"><code class="python" data-trim>
def process(data):
    result = []
    for item in data:
        if item.valid:
            result.append(transform(item))
    return result
  </code></pre>
</section>
<!-- slide B — same data-id attrs, Reveal animates between them -->
<section data-auto-animate>
  <h2 data-id="code-title">After: One line <span class="tag">NEW</span></h2>
  <pre data-id="code-block"><code class="python" data-trim>
def process(data):
    return [transform(i) for i in data if i.valid]
  </code></pre>
</section>

Three-column feature cards

<section>
  <h2>Key Features</h2>
  <div class="three-col">
    <div class="card fragment">
      <h3>{{ICON_1}} {{FEATURE_1}}</h3>
      <p style="font-size: 0.7em">{{FEATURE_1_DESC}}</p>
    </div>
    <div class="card fragment">
      <h3>{{ICON_2}} {{FEATURE_2}}</h3>
      <p style="font-size: 0.7em">{{FEATURE_2_DESC}}</p>
    </div>
    <div class="card fragment">
      <h3>{{ICON_3}} {{FEATURE_3}}</h3>
      <p style="font-size: 0.7em">{{FEATURE_3_DESC}}</p>
    </div>
  </div>
</section>

Metrics / proof slide

<section>
  <h2>Results</h2>
  <div class="three-col" style="text-align: center">
    <div class="fragment">
      <p style="font-size: 3em; font-weight: bold; color: var(--brand-accent)">{{METRIC_1_NUM}}</p>
      <p style="font-size: 0.8em">{{METRIC_1_LABEL}}</p>
    </div>
    <div class="fragment">
      <p style="font-size: 3em; font-weight: bold; color: var(--brand-accent)">{{METRIC_2_NUM}}</p>
      <p style="font-size: 0.8em">{{METRIC_2_LABEL}}</p>
    </div>
    <div class="fragment">
      <p style="font-size: 3em; font-weight: bold; color: var(--brand-accent)">{{METRIC_3_NUM}}</p>
      <p style="font-size: 0.8em">{{METRIC_3_LABEL}}</p>
    </div>
  </div>
</section>

Quick-start / Getting started

<section>
  <h2>Get Started in 60 Seconds</h2>
  <pre><code class="bash" data-trim data-line-numbers="1|3|5">
# 1. Install
{{INSTALL_COMMAND}}

# 2. Initialize
{{INIT_COMMAND}}

# 3. Run
{{RUN_COMMAND}}
  </code></pre>
  <div class="fragment highlight-box" style="margin-top: 1em; font-size: 0.8em">
    📖 Full docs at <strong>{{DOCS_URL}}</strong>
  </div>
</section>

Vertical drill-down (nested slides)

<!-- Parent slide — horizontal nav -->
<section>
  <section>
    <h2>{{TOPIC}}</h2>
    <p>Press ↓ to dive deeper</p>
  </section>
  <section>
    <h3>{{SUBTOPIC_1}}</h3>
    <p>{{DETAIL_1}}</p>
  </section>
  <section>
    <h3>{{SUBTOPIC_2}}</h3>
    <p>{{DETAIL_2}}</p>
  </section>
</section>

Call to action / closing

<section data-background-gradient="linear-gradient(135deg, {{PRIMARY_COLOR}} 0%, {{SECONDARY_COLOR}} 100%)">
  <h2>{{CALL_TO_ACTION}}</h2>
  <div class="two-col" style="margin-top: 1.5em">
    <div>
      <p>🔗 <a href="{{REPO_URL}}">{{REPO_URL}}</a></p>
      <p>📦 <code>{{INSTALL_COMMAND}}</code></p>
      <p>📖 <a href="{{DOCS_URL}}">{{DOCS_URL}}</a></p>
    </div>
    <div>
      <p>🐦 {{TWITTER_HANDLE}}</p>
      <p>💬 {{COMMUNITY_LINK}}</p>
      <p>⭐ Star us on GitHub!</p>
    </div>
  </div>
  <aside class="notes">Leave repo URL visible. Ask for questions.</aside>
</section>

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 <style> block after the theme link:

:root {
  --r-background-color: #0f0f23;      /* slide background */
  --r-main-color: #e2e8f0;            /* body text */
  --r-heading-color: #7c3aed;         /* h1, h2 — use brand primary */
  --r-link-color: #a78bfa;            /* links */
  --r-selection-color: #7c3aed;       /* text selection */
  --r-main-font: 'Inter', sans-serif; /* body font */
  --r-heading-font: 'Inter', sans-serif; /* heading font */
}

Logo placement

<!-- Fixed logo overlay — paste inside <div class="reveal"> before <div class="slides"> -->
<img src="{{LOGO_URL}}"
     style="position:fixed; top:16px; right:20px; height:36px; z-index:99; opacity:0.85">

Multi-Agent Pipeline (for large codebases)

For repos with 50+ files, delegate with sub-agents:

Orchestrator:
  1. Dispatch "codebase-analyst" agent
     → Input: file tree + key files
     → Output: PROJECT_ANALYSIS (structure above)
  
  2. Dispatch "narrative-planner" agent
     → Input: PROJECT_ANALYSIS + AUDIENCE + DURATION
     → Output: SLIDE_OUTLINE (numbered list of slides with content notes)
  
  3. Dispatch "slide-writer" agent (per section or all at once)
     → Input: SLIDE_OUTLINE + BRANDING + SLIDE_TEMPLATES
     → Output: complete HTML sections
  
  4. Assemble + validate final HTML
     → Open in browser for preview

Quality Checklist

Before handing the file to the user, verify:

Output Instructions

Write the complete slides.html to the project root (or a docs/slides/ subfolder)

Print a short summary:

✅ slides.html — N slides, ~X min at 90s/slide
Sections: {{SECTION_LIST}}
Theme: {{THEME}} + custom brand colors
Open with: open slides.html   (macOS)
           start slides.html  (Windows)
Export PDF: add ?print-pdf to URL, then Ctrl+P → Save as PDF

If the user asks for changes, apply inline — don't regenerate the whole file

References

reveal.js docs: https://revealjs.com
Themes: https://revealjs.com/themes/
Auto-Animate: https://revealjs.com/auto-animate/
Code highlighting: https://revealjs.com/code/
Layout helpers: https://revealjs.com/layout/
Config options: https://revealjs.com/config/
CDN: https://cdn.jsdelivr.net/npm/[email protected]/
Mermaid diagrams: https://mermaid.js.org/syntax/flowchart.html
zarazhangrui/frontend-slides (style patterns): https://github.com/zarazhangrui/frontend-slides
AI presentation generator example: https://github.com/nooqta/ai-presentation
visual-explainer skill (HTML diagram patterns): https://github.com/nicobailon/visual-explainer