kit

hamsurang-slide

Brand presentation generator for Hamsurang (함수랑산악회) with Soft Modern design.

Themes

Light theme

Go to sample-light.html

Dark theme

dark theme

Go to sample-dark.html

Features

Soft Modern design — glassmorphism cards, green-tinted gradients, soft shadows
Light / Dark themes — green-tinted dark mode included
14 slide types — Title, Agenda, Section Divider, Key Point, Quote, Comparison, Flow, Card Grid, Content, Code, Architecture, Timetable, Timeline, Closing
4-color code highlighting — custom highlight.js theme
mermaid.js diagrams support
Speaker notes — S key opens popup window
Single HTML file output — opens directly in browser

Installation

claude plugin install hamsurang-slide@hamsurang/kit

Or copy plugins/hamsurang-slide/ into your project. Pi auto-detects .claude-plugin/plugin.json.

Trigger Phrases

hamsurang 발표 / hamsurang PPT / hamsurang slide
함수랑 발표 / 함수랑 슬라이드 / 함수랑 PPT

Workflow

Analyze input (topic, duration, audience)
Generate outline → user confirmation
Select theme → user confirmation
Generate HTML (sequential reference loading)
Write speaker notes
Inline SVG assets → save file

File Structure

plugins/hamsurang-slide/
├── .claude-plugin/plugin.json
├── README.md
└── skills/hamsurang-slide/
    ├── SKILL.md
    ├── references/
    │   ├── generation-rules.md    (CSS SSOT — all design values)
    │   ├── design-system.md       (philosophy, component patterns)
    │   ├── slide-catalog.md       (14 slide type HTML structures)
    │   ├── html-spec.md           (HTML structure, JS, CDN)
    │   └── images/                (SVG brand assets)
    └── scripts/
        └── inline_assets.mjs

SSOT Principle

generation-rules.md is the single source of truth for all CSS values (colors, typography, spacing, radii, shadows). Other reference files describe patterns and structure but never hardcode style values — they reference CSS variables defined in generation-rules.md.

Requirements

Node.js

License

MIT

This site is open source. Improve this page.