hamsurang · minsoo-web · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026
@@ -51,6 +51,11 @@
       "name": "velog-cli",
       "source": "./plugins/velog-cli",
       "description": "Manage velog.io blog posts from the terminal — create, edit, publish, and browse posts via the velog CLI"
+    },
+    {
+      "name": "hamsurang-slide",
+      "source": "./plugins/hamsurang-slide",
+      "description": "Hamsurang brand HTML presentation generator. Soft Modern design with light/dark themes, 14 slide types, 4-color code highlighting."
     }
   ]
 }
@@ -86,6 +86,7 @@ bash scripts/scaffold-plugin.sh
 | [library-analyzer](./plugins/library-analyzer) | 병렬 에이전트를 활용하여 오픈소스 라이브러리의 기여 준비도를 분석하는 스킬 | [minsoo.web](https://github.com/minsoo-web) |
 | [obsidian-brain](./plugins/obsidian-brain) | Claude Code 세션의 학습 내용을 Obsidian 볼트에 제텔카스텐 노트로 아카이빙하고 볼트 지식을 대화 컨텍스트로 활용하는 스킬 | [minsoo.web](https://github.com/minsoo-web) |
 | [velog-cli](./plugins/velog-cli) | 터미널에서 velog.io 블로그 포스트를 관리 — velog CLI로 글 작성, 수정, 퍼블리시, 트렌딩 조회 | [minsoo.web](https://github.com/minsoo-web) |
+| [hamsurang-slide](./plugins/hamsurang-slide) | 함수랑 브랜드 HTML 프레젠테이션 생성기. Soft Modern 디자인, 라이트/다크 테마, 14가지 슬라이드 타입, 4색 코드 하이라이팅 | [Sonny](https://github.com/sonsurim) |
 
 *플러그인을 기여하고 싶으신가요? [기여 방법](docs/contributors/contributing.md)을 확인하세요.*
 

@@ -86,6 +86,7 @@ bash scripts/scaffold-plugin.sh
 | [library-analyzer](./plugins/library-analyzer) | Analyze open-source libraries for contribution readiness with parallel agents | [minsoo.web](https://github.com/minsoo-web) |
 | [obsidian-brain](./plugins/obsidian-brain) | Archive learnings from Claude Code sessions to Obsidian vault as Zettelkasten notes and use vault knowledge as conversational context | [minsoo.web](https://github.com/minsoo-web) |
 | [velog-cli](./plugins/velog-cli) | Manage velog.io blog posts from the terminal — create, edit, publish, and browse posts via the velog CLI | [minsoo.web](https://github.com/minsoo-web) |
+| [hamsurang-slide](./plugins/hamsurang-slide) | Hamsurang brand HTML presentation generator. Soft Modern design with light/dark themes, 14 slide types, 4-color code highlighting. | [Sonny](https://github.com/sonsurim) |
 
 *Have a plugin to share? See [Contributing](docs/contributors/contributing.md).*
 

@@ -0,0 +1,12 @@
+{
+  "name": "hamsurang-slide",
+  "version": "1.0.0",
+  "description": "Hamsurang brand HTML presentation generator. Soft Modern design with light/dark themes, 14 slide types, 4-color code highlighting.",
+  "author": {
+    "name": "Sonny",
+    "github": "sonsurim"
+  },
+  "license": "MIT",
+  "keywords": ["hamsurang", "slide", "presentation", "soft-modern", "PPT"],
+  "skills": "./skills/"
+}
@@ -0,0 +1,65 @@
+# hamsurang-slide
+
+> Brand presentation generator for Hamsurang (함수랑산악회) with Soft Modern design.
+
+## 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
+
+```bash
+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
+
+1. Analyze input (topic, duration, audience)
+2. Generate outline → user confirmation
+3. Select theme → user confirmation
+4. Generate HTML (sequential reference loading)
+5. Write speaker notes
+6. 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
@@ -0,0 +1,146 @@
+---
+name: hamsurang-slide
+description: "Use when the user mentions 'hamsurang presentation', 'hamsurang PPT', 'hamsurang slide', '함수랑 발표', '함수랑 슬라이드', '함수랑 PPT', 'hamsurang 발표', or any presentation request in a Hamsurang (함수랑산악회) context — even if they don't explicitly say 'slide'."
+---
+
+# 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):**
+
+1. `references/generation-rules.md` — **CSS single source of truth.** Copy all CSS from §1–14 into `<style>`.
+2. `references/design-system.md` — Design philosophy, component patterns (no hardcoded values — all refer back to generation-rules.md)
+3. `references/slide-catalog.md` — 14 slide type HTML structures
+4. `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.
+
+1. Save `index.html` (or requested filename) to the user's working directory
+2. Run `scripts/inline_assets.mjs`:
+   ```
+   node <skill_dir>/scripts/inline_assets.mjs <output.html> <skill_dir>/references/images/
+   ```
+3. Tell the user: "Open directly in your browser."
+
+## Output Rules
+
+1. Single `.html` file, all CSS/JS inlined
+2. `<html lang="ko" data-theme="light|dark">`
+3. 16:9 aspect ratio (1280×720 base, scale transform)
+4. CDN: Pretendard, JetBrains Mono (always), highlight.js (conditional), mermaid.js (conditional)
+5. Vanilla JS/CSS only — no frameworks
+6. Max 6–8 bullet points per slide
+7. 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
@@ -0,0 +1,124 @@
+# Design System — Principles & Patterns
+
+Design philosophy and component patterns for Hamsurang Soft Modern.
+**No hardcoded values in this file.** All implementable values live in `generation-rules.md` (CSS SSOT).
+
+## 1. Visual Atmosphere
+
+Soft Modern — soft gradients, rounded corners, glassmorphism cards, subtle green-tinted shadows.
+
+- Text, badges, and labels use `var(--primary)` **solid color** (not rgba tints)
+- All typography and spacing use `clamp()` for responsive scaling
+- Elevation is expressed through 3 levels of shadow depth (defined as `--shadow-sm`, `--shadow`, `--shadow-lg`)
+- Default border-radius is `var(--radius-xl)` for cards, `var(--radius-full)` for badges/pills, `var(--radius-lg)` for code blocks
+- Display headings use `letter-spacing: -0.02em`; labels use `letter-spacing: 0.03em`
+
+## 2. Color Roles
+
+| Role | Usage |
+|------|-------|
+| `--primary` | Heading-2, badges, progress bar, links, agenda numbers |
+| `--primary-dark` | Hover and active states |
+| `--primary-light` | Secondary emphasis |
+| `--accent-warm` | Warnings, function-name highlighting (`--code-fn`), warm badges |
+| `--accent-cool` | Keyword highlighting (`--code-kw`), cool badges |
+| `--danger` | Errors, comparison "bad" panel, danger badges |
+| `--text` | Body copy |
+| `--text-muted` | Secondary descriptions |
+| `--text-subtle` | Meta information |
+| `--heading` | Titles, headings |
+| `--surface-card` | Glassmorphism card backgrounds |
+| `--border` | Card and component borders |
+| `--background-code` | Code blocks (always dark in both themes) |
+
+## 3. Typography Usage
+
+| Scale | Context |
+|-------|---------|
+| display | Title / Closing h1 only |
+| heading-1 | Key Point, Section Divider titles |
+| heading-2 | Slide titles — **always `color: var(--primary)`** |
+| heading-3 | Card / component titles |
+| body | Body text |
+| body-small | Secondary descriptions |
+| caption | Meta information |
+| label | Badges, tags |
+| code | Code blocks |
+
+## 4. Component Patterns
+
+These describe **structure and behavior**. Exact CSS is in `generation-rules.md`.
+
+### Cards (Glassmorphism)
+
+- Background: `var(--surface-card)` + `backdrop-filter: blur(8px)`
+- Border: `1px solid var(--border)`, radius `var(--radius-xl)`
+- Shadow: `var(--shadow)` at rest, `var(--shadow-lg)` on hover
+- Hover: lift `translateY(-3px)` + shadow upgrade
+- Icon: emoji 28px, margin-bottom 12px
+- Title: heading-3 scale
+- Description: body-small, `var(--text-muted)`
+- Card Grid container (`.card-grid`): wraps all cards, centered with `align-content: center`, uses CSS grid (2-col or 3-col)
+
+### Badges (Pill)
+
+- Shape: `var(--radius-full)`, padding `5px 14px`
+- Font: label scale, weight 700, letter-spacing 0.03em
+- Variants: primary / warm / cool / danger
+- Dark theme: lighter text colors and higher-opacity backgrounds for contrast (defined in generation-rules.md)
+
+### Quote Block
+
+- Left border: 3px solid `var(--primary)`
+- Background: subtle green-tinted gradient toward transparent
+- Radius: `0 var(--radius-lg) var(--radius-lg) 0`
+- Quote text: heading-3 scale, italic, `var(--heading)`
+- Attribution: body-small, `var(--text-muted)`, `—` prefix
+
+### Code Block
+
+- Background: `var(--background-code)` (dark in both themes)
+- Radius: `var(--radius-lg)`
+- Max height with vertical scroll to prevent overflow
+- Font: JetBrains Mono, code scale
+- 4-color highlighting: keyword (`--code-kw`), function (`--code-fn`), string (`--code-str`), variable (`--code-var`)
+- Language label: top-left, label scale, `var(--code-str)` color, uppercase
+- Auto-highlighted via highlight.js CDN
+
+### Comparison (Versus)
+
+- Two-panel horizontal flex, vertically centered in slide (`flex: 1; margin: auto 0`)
+- Good panel: subtle primary-tinted background + primary-tinted border
+- Bad panel: subtle danger-tinted background + danger-tinted border
+- Dark theme: higher-opacity tints for visible contrast (defined in generation-rules.md)
+- Panel label: label scale, respective color
+
+### Flow / Steps
+
+- Horizontal flex, vertically centered in slide (flex: 1, margin: auto 0)
+- Each step: glassmorphism card with generous padding, min-width for readability
+- Step title: slightly larger than heading-3 for emphasis
+- Arrow: `→`, `var(--primary)`, 48px width, enlarged font
+- 3–6 steps recommended
+
+### Table
+
+- Full width, collapsed borders
+- Header: `var(--primary)`, weight 700, label scale, 2px solid bottom border
+- Cell: body-small scale, 1px solid `var(--border)` bottom
+
+### Lists
+
+- Custom marker: 8px filled circle in `var(--primary)`, vertically centered
+- No default list-style; items have left padding for the marker
+
+## 5. Layout Principles
+
+- Fullscreen viewport, 1280×720 base with scale transform
+- Content padding: 60px top/bottom, 80px left/right
+- Centering: flexbox center/center
+- Title / Key Point: center-aligned; Code / Comparison: left-aligned
+- Max content width: 1000–1200px
+- Grid gaps: 2-column 40px, 3-column 24px
+- Max 6–8 bullet points per slide
+- Whitespace reinforces the message — be generous with margins