From hamsurang-slide
Generates single-file HTML presentations in Hamsurang-branded Soft Modern design: light/dark themes, 14 slide types, glassmorphism cards, 4-color code highlighting.
npx claudepluginhub hamsurang/kit --plugin hamsurang-slideThis skill uses the workspace's default tool permissions.
Generates single-file HTML presentations with Hamsurang brand Soft Modern design.
Generates self-contained HTML or React slide decks for fullscreen browser presentations from ideas, outlines, or content. Pipeline: outline structure, select design theme, output single artifact.
Creates reveal.js presentations with themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step. Use for slides, decks, or slideshows.
Generates self-contained Apple Keynote-style HTML presentations from markdown, text descriptions, topics, or files, with cinematic animations and glassmorphism design.
Share bugs, ideas, or general feedback.
Generates single-file HTML presentations with Hamsurang brand Soft Modern design.
Light/dark themes, 14 slide types, 4-color code highlighting, glassmorphism cards.
Output is always a single .html file — opens directly in a browser.
Activate when the request matches any of:
Extract from the user's request:
Default duration is 10 minutes.
| Duration | Slide Count |
|---|---|
| 5 min | 8–12 |
| 10 min | 12–18 (default) |
| 15 min | 18–25 |
| 20 min | 25–30 |
| 30 min | 30–40 |
Get user confirmation before proceeding.
Present as a table:
| # | Type | Title | Key Points |
|---|---|---|---|
| 1 | Title | ... | ... |
| 2 | Agenda | ... | ... |
| ... | ... | ... | ... |
| N | Closing | ... | ... |
Incorporate edits and re-confirm if requested.
Choose a theme:
- Light — bright background, informative and open
- Dark — green-tinted dark background, immersive
Default: Light.
Reference loading order (read in this exact order):
references/generation-rules.md — CSS single source of truth. Copy all CSS from §1–14 into <style>.references/design-system.md — Design philosophy, component patterns (no hardcoded values — all refer back to generation-rules.md)references/slide-catalog.md — 14 slide type HTML structuresreferences/html-spec.md — HTML document structure, navigation JS, CDNReferences Loading Guide:
| Situation | Load |
|---|---|
| Always (Step 4 start) | references/generation-rules.md |
| Applying design patterns, component styles | references/design-system.md |
| Building slide HTML for any of the 14 types | references/slide-catalog.md |
| Assembling final HTML document, adding JS, CDN links | references/html-spec.md |
Generation rules:
Build HTML for all 14 slide types following slide-catalog.md's HTML structure specs. There is no fixed HTML template. Instead, follow the CSS classes, element hierarchy, and structure rules for each type.
CSS rules:
<style> tag verbatimvar(--name) CSS variables — never hardcode color/size valuesConditional CDN:
hljs.highlightAll()Content overflow prevention:
Add data-notes attribute to each slide:
[2 min], [PAUSE]Requires Node.js.
index.html (or requested filename) to the user's working directoryscripts/inline_assets.mjs:
node <skill_dir>/scripts/inline_assets.mjs <output.html> <skill_dir>/references/images/
.html file, all CSS/JS inlined<html lang="ko" data-theme="light|dark">references/
├── generation-rules.md ← CSS SSOT (all values live here)
├── design-system.md ← Design philosophy & patterns (no values)
├── slide-catalog.md ← 14 slide type HTML structures
├── html-spec.md ← HTML structure, JS, CDN
└── images/ ← SVG brand assets
14 types. Details in references/slide-catalog.md.
Core 4: Title, Closing, Agenda, Section Divider Flexible 10: Key Point, Quote, Comparison, Flow, Card Grid, Content, Code, Architecture, Timetable, Timeline