Skill

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.

HTML

Popularity

Parent stars

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/hamsurang-slide:hamsurang-slide

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Generates single-file HTML presentations with Hamsurang brand Soft Modern design.

Supporting Files

references/design-system.mdreferences/generation-rules.mdreferences/html-spec.mdreferences/images/logo-white.svgreferences/images/logo.svgreferences/images/mountain-white.svgreferences/images/mountain.svgreferences/slide-catalog.mdscripts/inline_assets.mjs

SKILL.md

147 lines · ~1.2k tokens

Stats

LanguageShell

Parent stars17

MaintenanceGood

Last CommitApr 14, 2026

Actions

View Source View Plugin View on GitHub View README

hamsurang-slide — Hamsurang HTML Presentation Generator

Overview

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.

When to Use

Activate when the request matches any of:

"hamsurang 발표", "hamsurang PPT", "hamsurang slide"
"함수랑 발표", "함수랑 슬라이드", "함수랑 PPT"
Any mention of "presentation", "slide", or "PPT" in a Hamsurang context

Workflow

Step 1: Analyze Input

Extract from the user's request:

Topic
Duration (→ slide count mapping)
Audience
Language (generate content in the user's conversation language)

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

Step 2: Generate Outline & Confirm

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.

Step 3: Choose Theme & Confirm

Choose a theme:

Light — bright background, informative and open

Dark — green-tinted dark background, immersive

Default: Light.

Step 4: Generate HTML

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 structures
references/html-spec.md — HTML document structure, navigation JS, CDN

References 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:

Copy generation-rules.md §1–14 CSS into the <style> tag verbatim
For flexible slide types (types 5–14), write any additional CSS after the copied CSS
All style values must use var(--name) CSS variables — never hardcode color/size values

Conditional CDN:

Code type slide present → include highlight.js CDN + hljs.highlightAll()
Architecture type slide present → include mermaid.js CDN + init code
Neither present → omit those CDN links

Content overflow prevention:

Slide area is fixed at 1280×720px
When there are many items, reduce font size and spacing to fit
Agenda with 9+ items: reduce font/spacing (still single column)

Step 5: Speaker Notes

Add data-notes attribute to each slide:

Conversational tone
Expand on slide content without repeating it
Timing hints: [2 min], [PAUSE]

Step 6: Inline Assets & Save

Requires Node.js.

Save index.html (or requested filename) to the user's working directory

Run scripts/inline_assets.mjs:

node <skill_dir>/scripts/inline_assets.mjs <output.html> <skill_dir>/references/images/

Tell the user: "Open directly in your browser."

Output Rules

Single .html file, all CSS/JS inlined
<html lang="ko" data-theme="light|dark">
16:9 aspect ratio (1280×720 base, scale transform)
CDN: Pretendard, JetBrains Mono (always), highlight.js (conditional), mermaid.js (conditional)
Vanilla JS/CSS only — no frameworks
Max 6–8 bullet points per slide
Generate content in the user's conversation language

Reference Architecture

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

Slide Types

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

hamsurang-slide

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

hamsurang-slide

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

hamsurang-slide — Hamsurang HTML Presentation Generator

Overview

When to Use

Workflow

Step 1: Analyze Input

Step 2: Generate Outline & Confirm

Step 3: Choose Theme & Confirm

Step 4: Generate HTML

Step 5: Speaker Notes

Step 6: Inline Assets & Save

Output Rules

Reference Architecture

Slide Types

Similar Skills

hamsurang-slide — Hamsurang HTML Presentation Generator

Overview

When to Use

Workflow

Step 1: Analyze Input

Step 2: Generate Outline & Confirm

Step 3: Choose Theme & Confirm

Step 4: Generate HTML

Step 5: Speaker Notes

Step 6: Inline Assets & Save

Output Rules

Reference Architecture

Slide Types

Similar Skills