make-slide 2.0.0 → 2.1.1

package/.claude/skills/make-slide/SKILL.md

@@ -74,6 +74,13 @@ Follow these steps in order:
   - 30-min talk → 30–40 slides
 - Identify the target audience and tone (technical, business, casual, academic)
 - Detect the user's language from the conversation — generate content in that language
+- Ask the user about the desired output format (always ask, do not skip):
+  > **Which output format would you like?**
+  > - **HTML** — Interactive single-file presentation you can open in a browser (navigation, animations, speaker notes built-in)
+  > - **PPTX** — PowerPoint file for Office, Google Slides, or Keynote
+  
+  - If the user already mentioned "PowerPoint", "pptx", "PPT", ".pptx", "Google Slides", or "Keynote" in their request → skip the question and use PPTX mode
+  - Otherwise, always ask explicitly before proceeding
 
 ### Step 2: Choose a Theme
 Present the user with the theme gallery link for browsing:
@@ -91,12 +98,28 @@ If the user doesn't choose a theme, recommend one based on context:
 - Product launch → `keynote-apple`
 - Casual/team event → `playful`
 
-### Step 3: Check Image Needs
-Ask the user:
-> "Would you like me to identify image insertion points in the slides? If yes, I'll mark them in the outline and you can provide image URLs. If no, I'll use styled placeholders."
-
-- **Yes** → Mark image positions in the outline, ask user for image URLs
-- **No** → Use CSS placeholders (emoji, SVG icons, CSS shapes) that match the theme
+### Step 3: Image Options
+Ask the user which image approach they prefer:
+
+> **How would you like to handle images in your slides?**
+> 
+> **A) No images** — Use styled CSS placeholders (emoji, icons, shapes) that match the theme. Clean and lightweight.
+> 
+> **B) I'll provide URLs** — I'll mark image positions in the outline, and you provide the image URLs.
+> 
+> **C) Auto-search** — I'll search the web for relevant, high-quality images and place them automatically.
+
+- **Option A** → Use CSS placeholders matching the theme (emoji, SVG icons, CSS shapes)
+- **Option B** → Mark image positions in the outline, ask user for URLs, use `<img src>` with `loading="lazy"` and descriptive `alt` text
+- **Option C** → For each slide that would benefit from an image:
+  1. Determine a relevant English search keyword based on the slide content
+  2. Use Unsplash source URLs which are guaranteed to resolve: `https://source.unsplash.com/featured/1200x800/?{keyword}`
+     - Example: `https://source.unsplash.com/featured/1200x800/?technology,ai`
+     - Example: `https://source.unsplash.com/featured/1200x800/?teamwork,office`
+  3. Alternatively, search the web for images on Unsplash or Pexels and use the direct image URL (verify the URL returns 200 before inserting)
+  4. Insert as `<img src="URL" alt="description" loading="lazy">`
+  5. NEVER use AI-generated or guessed URLs — only use URLs from actual search results or the Unsplash source pattern above
+  6. Inform the user that auto-searched images are royalty-free from Unsplash (Unsplash License)
 
 ### Step 4: Generate Outline
 Create a slide-by-slide outline with:
@@ -138,6 +161,8 @@ Add speaker notes as `data-notes` attributes on each slide's `<div>`:
 - Expand on the slide text — don't just repeat it
 - Include transitions between slides (e.g., "Now let's move on to...")
 
+**Speaker Notes Panel must be a separate popup window** using `window.open()`. Do NOT render notes inline at the bottom of the slide — this breaks the slide layout. The `S` key should toggle a popup window that shows the current slide's notes and auto-updates on slide change. See `references/html-spec.md` for the implementation pattern.
+
 ### Step 8: Generate Script (Mode A and B only)
 For Mode A and B, also generate a separate `script.md` file containing:
 - Full speaking script organized by slide
@@ -150,13 +175,28 @@ For Mode C, the user already has a script — skip this step.
 ### Step 9: Save and Deliver
 - Save the presentation as `index.html` (or user-specified filename)
 - Save the script as `script.md` (if generated)
-- Offer to start a local server for preview:
-  ```bash
-  # Python
-  python -m http.server 8000
-  # Node.js
-  npx serve .
-  ```
+- Tell the user they can open `index.html` directly in their browser to view the presentation — no server needed
+- The file is fully self-contained (all CSS/JS inlined), so it works by simply double-clicking the file or dragging it into a browser
+
+---
+
+## PPTX Output Mode
+
+When the user selects PPTX output, follow this modified workflow:
+
+### PPTX Step 1: Generate HTML Slides (PPTX-Compatible)
+Follow the standard HTML generation workflow (Steps 1-7) but with these constraints from the PPTX spec. Read `references/pptx-spec.md` for the complete PPTX conversion rules before generating HTML.
+
+### PPTX Step 2: Convert HTML to PPTX
+Use the html2pptx conversion pipeline:
+1. Install dependencies if not present: `npm install pptxgenjs sharp puppeteer`
+2. For each HTML slide, render and convert to PPTX using PptxGenJS
+3. Combine all slides into a single `.pptx` file
+
+### PPTX Step 3: Validate and Deliver
+- Open the PPTX to verify content and formatting
+- Save as `presentation.pptx` (or user-specified filename)
+- Offer to also generate the HTML version for preview
 
 ---
 

package/.claude/skills/make-slide/references/html-spec.md

@@ -47,10 +47,28 @@ Every generated presentation includes all of the following features. These ensur
 
 ### Speaker Notes Panel
 - `S` key toggles the speaker notes panel
-- Panel displays:
+- Implementation: Open a **separate popup window** using `window.open()`, not an inline panel
+- The popup window displays:
+  - Current slide number and total
   - Current slide's notes (from `data-notes` attribute)
-  - Next slide preview (when possible)
-- Panel should not obstruct the main slide view
+  - Next slide preview text (when possible)
+- The popup auto-updates when the main presentation changes slides
+- Popup styling should be clean and readable (large font, good contrast)
+- The main slide view must NOT be affected by the notes panel
+- Example implementation pattern:
+  ```javascript
+  let notesWindow = null;
+  function toggleNotes() {
+    if (notesWindow && !notesWindow.closed) { notesWindow.close(); notesWindow = null; return; }
+    notesWindow = window.open('', 'SpeakerNotes', 'width=500,height=400');
+    // Write styled HTML to notesWindow.document
+    updateNotes();
+  }
+  function updateNotes() {
+    if (!notesWindow || notesWindow.closed) return;
+    // Update content with current slide's data-notes
+  }
+  ```
 
 ### Touch/Swipe Navigation
 - Swipe left → Next slide

package/.claude/skills/make-slide/references/pptx-spec.md

@@ -0,0 +1,116 @@
+# PPTX Conversion Specification
+
+## Overview
+When generating PPTX output, first create HTML slides following PPTX-compatible rules, then convert using PptxGenJS or python-pptx.
+
+## HTML-to-PPTX Constraints
+
+These rules ensure HTML slides convert cleanly to PowerPoint format.
+
+### Text Rules (Critical)
+- ALL text MUST be inside `<p>`, `<h1>`-`<h6>`, `<ul>`, or `<ol>` tags
+- Text inside raw `<div>` or `<span>` without a text tag will be SILENTLY IGNORED in PPTX
+- NEVER use `<br>` tags — use separate text elements for each line
+- NEVER use manual bullet symbols (•, -, *) — use `<ul>` or `<ol>` lists
+
+### Font Rules
+- Use ONLY web-safe fonts that are universally available in PowerPoint:
+  - ✅ Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman, Courier New, Impact
+  - ❌ Pretendard, JetBrains Mono, SF Pro, Roboto, or any custom/CDN fonts
+- For code blocks, use Courier New instead of JetBrains Mono
+
+### Color and Gradient Rules
+- NEVER use CSS gradients (`linear-gradient`, `radial-gradient`) — they don't convert to PowerPoint
+- If gradients are needed, rasterize them as PNG images first using Sharp/Puppeteer, then reference as `<img>`
+- Use solid colors with hex format (#RRGGBB)
+- Ensure sufficient contrast for readability
+
+### Layout Rules
+- Slide dimensions: 720pt × 405pt (16:9 standard)
+- Use `display: flex` on body to prevent margin collapse
+- Use `margin` for spacing (padding is included in element size)
+- Flexbox positioning works — positions calculated from rendered layout
+- For slides with charts/tables, use either:
+  - Two-column layout (preferred): header spanning full width, text + content side by side
+  - Full-slide layout: let featured content take the entire slide
+  - NEVER vertically stack charts/tables below text in a single column
+
+### Shape and Border Rules
+- Backgrounds, borders, and shadows ONLY work on `<div>` elements, NOT on text elements
+- Supported border styles: `border: 2px solid #333333`
+- Partial borders supported: `border-left`, `border-right`, `border-top`, `border-bottom`
+- `border-radius: 50%` creates circular shapes
+- Box shadows convert to PowerPoint shadows (outer only, inset shadows ignored)
+
+### Image Rules
+- Use `<img>` tags with absolute URLs or local file paths
+- Inline SVG is NOT supported — convert to PNG first
+- Icons/emoji should be rasterized as PNG images
+
+### Animation Rules
+- CSS animations do NOT convert to PowerPoint
+- PowerPoint animations must be added programmatically via PptxGenJS if needed
+- For PPTX mode, skip stagger animations and transitions in HTML
+
+## Conversion Methods
+
+### Method 1: PptxGenJS (Recommended for Node.js)
+```bash
+npm install pptxgenjs sharp puppeteer
+```
+
+Workflow:
+1. Create HTML files for each slide (following rules above)
+2. Use Puppeteer to render each HTML slide and extract element positions
+3. Use PptxGenJS to create native PowerPoint elements at the extracted positions
+4. Save as .pptx
+
+### Method 2: python-pptx (Alternative for Python)
+```bash
+pip install python-pptx Pillow
+```
+
+Workflow:
+1. Create HTML slides following PPTX-compatible rules
+2. Use python-pptx to create slides programmatically
+3. Map HTML elements to python-pptx objects:
+   - `<p>`, `<h1>`-`<h6>` → `add_textbox()` with `TextFrame`
+   - `<ul>`, `<ol>` → `TextFrame` with `level` property for indentation
+   - `<div>` with background → `add_shape()` with fill
+   - `<img>` → `add_picture()`
+4. Save as .pptx
+
+### Method 3: Screenshot-based (Simplest but lowest quality)
+```bash
+npm install puppeteer pptxgenjs
+```
+
+Workflow:
+1. Generate full HTML presentation (standard mode, no PPTX constraints needed)
+2. Use Puppeteer to screenshot each slide as high-resolution PNG
+3. Insert each screenshot as a full-slide image in PPTX
+4. Add text overlays for searchability (optional)
+- Note: This produces image-based slides (no editable text) but preserves exact visual design
+
+## Design Principles for PPTX
+
+### Color Palette Selection
+Choose 3-5 colors that work together:
+- 1 dominant background color
+- 1-2 supporting/accent colors
+- 1 text color with strong contrast
+- Use solid colors only (no gradients unless rasterized)
+
+### Typography
+- Use 2-3 font sizes max for clear hierarchy:
+  - Title: 36-44pt
+  - Subtitle/heading: 24-28pt
+  - Body: 16-20pt
+  - Caption: 12-14pt
+- Bold for emphasis, avoid italic for body text
+
+### Layout Tips
+- Leave 10% margin on all sides (minimum)
+- Align elements to a grid
+- Use consistent spacing between elements
+- Left-align body text (center-align only for titles)

package/README.md

@@ -4,6 +4,7 @@
 **AI 코딩 에이전트가 단일 HTML 파일로 고품질 프레젠테이션을 생성하는 범용 스킬.**
 
 [![Live Gallery](https://img.shields.io/badge/🎨_Theme_Gallery-Live_Demo-blue?style=for-the-badge)](https://make-slide.vercel.app)
+[![npm](https://img.shields.io/npm/v/make-slide?style=for-the-badge)](https://www.npmjs.com/package/make-slide)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
 
 ---
@@ -41,59 +42,94 @@ Instead of crafting designs from scratch every time (wasting tokens and producin
 
 ## 🚀 Quick Start
 
-Give your AI coding tool the following instruction:
+### Install with npx (Recommended)
 
-### Claude Code
+```bash
+npx make-slide init
 ```
-Read SKILL.md from https://github.com/kuneosu/make-slide and create a presentation about [your topic] using the minimal-dark theme.
+
+This will:
+1. Copy the skill files into your project's `.claude/skills/make-slide/`
+2. Auto-detect your AI config (`CLAUDE.md`, `AGENTS.md`, `.cursorrules`) and inject the `/make-slide` command
+3. You're ready! Type `/make-slide` in Claude Code to create presentations
+
+### Other Commands
+
+```bash
+npx make-slide themes    # View all 10 themes
+npx make-slide gallery   # Open theme gallery in browser
+npx make-slide help      # Show help
 ```
 
-### Gemini CLI
+### Manual Setup (Any AI Tool)
+
+Give your AI coding tool the following instruction:
+
 ```
-Follow the instructions in SKILL.md at https://github.com/kuneosu/make-slide to build a 10-slide presentation about [your topic].
+Read SKILL.md from https://github.com/kuneosu/make-slide and create a presentation about [your topic] using the minimal-dark theme.
 ```
 
-### Any AI Coding Tool
+Or fetch it directly:
 ```
-Fetch https://raw.githubusercontent.com/kuneosu/make-slide/main/SKILL.md and follow its instructions to create a presentation about [your topic].
+Fetch https://raw.githubusercontent.com/kuneosu/make-slide/main/.claude/skills/make-slide/SKILL.md and follow its instructions to create a presentation about [your topic].
 ```
 
 > **Tip:** Browse themes first at [make-slide.vercel.app](https://make-slide.vercel.app) and tell your AI which one you like!
 
 ---
 
-## 🎨 Themes
+## ⚙️ How It Works
 
-All 10 themes are live at **[make-slide.vercel.app](https://make-slide.vercel.app)**
+### The `.claude/skills/` Convention
 
-| # | Theme | Style | Best For |
-|:-:|-------|-------|----------|
-| 1 | [`minimal-dark`](https://make-slide.vercel.app) | Clean dark, white typography | Tech talks, conferences |
-| 2 | [`minimal-light`](https://make-slide.vercel.app) | Bright white, precise type | General, academic |
-| 3 | [`corporate`](https://make-slide.vercel.app) | Navy & gold, structured | Business, reports |
-| 4 | [`gradient-pop`](https://make-slide.vercel.app) | Vibrant gradients, glassmorphism | Startups, pitches |
-| 5 | [`neon-terminal`](https://make-slide.vercel.app) | Terminal green, scanlines | Dev talks, hackathons |
-| 6 | [`paper`](https://make-slide.vercel.app) | Kraft paper, serif type | Education, workshops |
-| 7 | [`keynote-apple`](https://make-slide.vercel.app) | Dramatic dark, Apple-inspired | Product launches, keynotes |
-| 8 | [`magazine`](https://make-slide.vercel.app) | Editorial, asymmetric layout | Design, creative |
-| 9 | [`data-focus`](https://make-slide.vercel.app) | Dashboard aesthetic, clean | Data analysis, KPIs |
-| 10 | [`playful`](https://make-slide.vercel.app) | Rounded, pastel, bouncy | Workshops, casual talks |
+make-slide uses Claude Code's native skill system. After running `npx make-slide init`, your project gets:
+
+```
+your-project/
+├── .claude/
+│   └── skills/
+│       └── make-slide/
+│           ├── SKILL.md          ← Main instruction file
+│           └── references/
+│               ├── themes.md     ← 10 themes with GitHub raw URLs
+│               ├── slide-types.md ← 12 slide type patterns
+│               └── html-spec.md  ← HTML requirements
+├── CLAUDE.md                     ← Auto-updated with /make-slide command
+└── ... your project files
+```
+
+When you type `/make-slide` in Claude Code, it reads the skill and follows a 9-step workflow:
+
+1. **Analyze your input** — determine mode (topic / content / script) and slide count
+2. **Choose a theme** — you pick from the gallery or AI recommends one
+3. **Check image needs** — real images or styled CSS placeholders
+4. **Generate outline** — slide-by-slide plan for your approval
+5. **Fetch theme reference** — downloads the theme template from GitHub
+6. **Generate HTML** — builds your presentation matching the theme exactly
+7. **Add speaker notes** — conversational notes with timing cues
+8. **Generate script** — full speaking script (optional)
+9. **Deliver** — saves `index.html` + offers local preview
+
+Theme files are fetched from GitHub on demand — nothing heavy is stored locally.
 
 ---
 
-## ⚙️ How It Works
+## 🎨 Themes
 
-```
-┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
-│  1. AI reads │────▶│ 2. User picks│────▶│ 3. AI fetches│────▶│ 4. AI builds │
-│   SKILL.md   │     │    theme     │     │  reference   │     │  your slides │
-└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘
-```
+All 10 themes are live at **[make-slide.vercel.app](https://make-slide.vercel.app)**
 
-1. **AI reads `SKILL.md`** — the universal instruction file that any AI coding tool can follow
-2. **User picks a theme** — from the [gallery](https://make-slide.vercel.app) or AI recommends one
-3. **AI fetches theme reference** — `reference.html` (full example) + `README.md` (design guide) from GitHub
-4. **AI generates your presentation** — a single `index.html` file with speaker notes, matching the theme perfectly
+| # | Theme | Style | Best For |
+|:-:|-------|-------|----------|
+| 1 | `minimal-dark` | Clean dark, white typography | Tech talks, conferences |
+| 2 | `minimal-light` | Bright white, precise type | General, academic |
+| 3 | `corporate` | Navy & gold, structured | Business, reports |
+| 4 | `gradient-pop` | Vibrant gradients, glassmorphism | Startups, pitches |
+| 5 | `neon-terminal` | Terminal green, scanlines | Dev talks, hackathons |
+| 6 | `paper` | Kraft paper, serif type | Education, workshops |
+| 7 | `keynote-apple` | Dramatic dark, Apple-inspired | Product launches, keynotes |
+| 8 | `magazine` | Editorial, asymmetric layout | Design, creative |
+| 9 | `data-focus` | Dashboard aesthetic, clean | Data analysis, KPIs |
+| 10 | `playful` | Rounded, pastel, bouncy | Workshops, casual talks |
 
 ---
 
@@ -101,15 +137,22 @@ All 10 themes are live at **[make-slide.vercel.app](https://make-slide.vercel.ap
 
 ```
 make-slide/
-├── README.md              # This file
-├── SKILL.md               # AI agent instruction file (the "skill")
-├── LICENSE                 # MIT License
+├── package.json            # npm package config
+├── bin/cli.js              # CLI (init, themes, gallery)
+├── .claude/skills/make-slide/  # Skill template (copied by init)
+│   ├── SKILL.md
+│   └── references/
+│       ├── themes.md
+│       ├── slide-types.md
+│       └── html-spec.md
+├── SKILL.md                # Legacy standalone skill file
+├── README.md               # This file
+├── LICENSE                  # MIT License
 │
-├── themes/                # Theme references (10 themes)
+├── themes/                 # Theme references (10 themes)
 │   ├── minimal-dark/
-│   │   ├── README.md          # Design guidelines
-│   │   ├── reference.html     # Full example presentation
-│   │   └── preview.png        # Theme thumbnail
+│   │   ├── README.md           # Design guidelines
+│   │   └── reference.html      # Full example presentation
 │   ├── minimal-light/
 │   ├── corporate/
 │   ├── gradient-pop/
@@ -120,18 +163,17 @@ make-slide/
 │   ├── data-focus/
 │   └── playful/
 │
-├── gallery/               # Theme gallery website (Vercel)
-│   ├── index.html             # Gallery page
-│   └── public/previews/       # Theme screenshots
+├── gallery/                # Theme gallery website (Vercel)
+│   └── index.html
 │
-├── core/                  # Shared JS/CSS source
-│   ├── navigation.js          # Keyboard + touch navigation
-│   ├── fullscreen.js          # Fullscreen toggle
-│   ├── speaker-notes.js       # Speaker notes panel
-│   ├── pdf-export.css         # Print styles
-│   └── base.css               # Reset + utilities
+├── core/                   # Shared JS/CSS source
+│   ├── navigation.js
+│   ├── fullscreen.js
+│   ├── speaker-notes.js
+│   ├── pdf-export.css
+│   └── base.css
 │
-└── examples/              # Example presentations
+└── examples/               # Example presentations
     └── pineone-talk-reference.html
 ```
 
@@ -141,24 +183,23 @@ make-slide/
 
 ### Adding a New Theme
 
-1. **Create a folder** in `themes/` with your theme ID (kebab-case):
+1. Create a folder in `themes/` with your theme ID (kebab-case):
    ```
    themes/your-theme-name/
    ```
 
-2. **Add three files:**
-   - `reference.html` — A complete 10-slide example presentation showcasing all slide types (title, content, comparison, code, data, quote, closing, etc.) with navigation, fullscreen, speaker notes, and PDF export all working
-   - `README.md` — Design guidelines: color palette, typography, spacing, design philosophy, and use cases
-   - `preview.png` — A 1280×720 screenshot of the title slide
+2. Add these files:
+   - `reference.html` — Complete 10-slide example with all slide types, navigation, fullscreen, speaker notes, and PDF export
+   - `README.md` — Design guidelines: color palette, typography, spacing, philosophy
 
-3. **Follow the conventions** in `core/` for navigation, fullscreen, speaker notes, and PDF export functionality
+3. Follow the conventions in `core/` for navigation, fullscreen, speaker notes, and PDF export
 
-4. **Submit a PR** — and your theme will appear in the gallery!
+4. Submit a PR — your theme will appear in the gallery!
 
 ### Guidelines
 - Output must be a single `.html` file — all CSS/JS inlined
-- Only external dependencies allowed: font CDNs (Pretendard required) + Prism.js (for code blocks)
-- All themes must support the full slide type set defined in `SKILL.md`
+- Only external dependencies: font CDNs (Pretendard required) + Prism.js (for code blocks)
+- All themes must support the full slide type set
 - Test keyboard navigation, fullscreen, speaker notes, and print export
 
 ---
@@ -177,6 +218,7 @@ make-slide/
 **AI 코딩 에이전트가 단일 HTML 파일로 고품질 프레젠테이션을 생성하는 범용 스킬.**
 
 [![테마 갤러리](https://img.shields.io/badge/🎨_테마_갤러리-라이브_데모-blue?style=for-the-badge)](https://make-slide.vercel.app)
+[![npm](https://img.shields.io/npm/v/make-slide?style=for-the-badge)](https://www.npmjs.com/package/make-slide)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
 
 ---
@@ -195,139 +237,102 @@ make-slide/
 
 ---
 
-## ✨ 주요 기능
-
-| 기능 | 설명 |
-|------|------|
-| 🎨 **10개 테마** | 다크 미니멀부터 플레이풀 파스텔까지 — [갤러리 둘러보기](https://make-slide.vercel.app) |
-| 📄 **단일 HTML 출력** | 파일 하나, 빌드 불필요, 프레임워크 없음 — 브라우저에서 바로 열기 |
-| 🎤 **발표자 노트** | 슬라이드별 발표 노트 내장 (`S` 키로 토글) |
-| 🖨️ **PDF 내보내기** | `Ctrl+P`로 깔끔하게 인쇄 (`@media print` 스타일 적용) |
-| 🖥️ **전체화면** | `F` 키로 풀스크린 전환 |
-| ⌨️ **키보드 네비게이션** | 방향키, 스페이스바, 터치/스와이프 지원 |
-| 📥 **3가지 입력 모드** | 주제만 / 내용 제공 / 대본 제공 |
-| 🤖 **모든 AI 도구 호환** | Claude Code, Gemini CLI, Codex, Cursor 등 |
-| 🌍 **언어 무관** | 사용자의 언어로 콘텐츠 생성 |
-| 📊 **CSS 전용 차트** | 바 차트, 프로그레스 링, KPI 카드 — 차트 라이브러리 불필요 |
-
----
-
 ## 🚀 빠른 시작
 
-AI 코딩 도구에 다음과 같이 지시하세요:
+### npx로 설치 (권장)
 
-### Claude Code
-```
-https://github.com/kuneosu/make-slide 의 SKILL.md를 읽고 [주제]에 대한 프레젠테이션을 minimal-dark 테마로 만들어줘.
+```bash
+npx make-slide init
 ```
 
-### Gemini CLI
-```
-https://github.com/kuneosu/make-slide 의 SKILL.md 지침을 따라 [주제]에 대한 10장짜리 프레젠테이션을 만들어줘.
+이 명령어는:
+1. `.claude/skills/make-slide/`에 스킬 파일 복사
+2. AI 설정 파일(`CLAUDE.md`, `AGENTS.md`, `.cursorrules`) 자동 감지 후 `/make-slide` 명령어 주입
+3. 준비 완료! Claude Code에서 `/make-slide` 입력하면 프레젠테이션 생성
+
+### 기타 명령어
+
+```bash
+npx make-slide themes    # 10개 테마 보기
+npx make-slide gallery   # 테마 갤러리 열기
+npx make-slide help      # 도움말
 ```
 
-### 기타 AI 코딩 도구
+### 수동 설정 (다른 AI 도구)
+
+AI 코딩 도구에 다음과 같이 지시하세요:
+
 ```
-https://raw.githubusercontent.com/kuneosu/make-slide/main/SKILL.md 를 가져와서 지침에 따라 [주제]에 대한 프레젠테이션을 만들어줘.
+https://github.com/kuneosu/make-slide 의 SKILL.md를 읽고 [주제]에 대한 프레젠테이션을 minimal-dark 테마로 만들어줘.
 ```
 
 > **팁:** [make-slide.vercel.app](https://make-slide.vercel.app)에서 테마를 먼저 둘러보고 마음에 드는 것을 AI에게 알려주세요!
 
 ---
 
-## 🎨 테마
-
-10개 테마 모두 **[make-slide.vercel.app](https://make-slide.vercel.app)** 에서 확인할 수 있습니다.
+## ⚙️ 작동 방식
 
-| # | 테마 | 스타일 | 추천 용도 |
-|:-:|------|--------|-----------|
-| 1 | [`minimal-dark`](https://make-slide.vercel.app) | 다크 배경, 화이트 타이포 | 테크 발표, 컨퍼런스 |
-| 2 | [`minimal-light`](https://make-slide.vercel.app) | 화이트 배경, 클린 타이포 | 일반 발표, 세미나 |
-| 3 | [`corporate`](https://make-slide.vercel.app) | 네이비 & 골드, 구조적 | 비즈니스, 보고 |
-| 4 | [`gradient-pop`](https://make-slide.vercel.app) | 비비드 그라디언트, 글라스모피즘 | 스타트업, 피칭 |
-| 5 | [`neon-terminal`](https://make-slide.vercel.app) | 터미널 그린, 스캔라인 | 개발자 발표, 해커톤 |
-| 6 | [`paper`](https://make-slide.vercel.app) | 크래프트지, 세리프 타이포 | 교육, 워크숍 |
-| 7 | [`keynote-apple`](https://make-slide.vercel.app) | 드라마틱 다크, Apple 스타일 | 제품 발표, 키노트 |
-| 8 | [`magazine`](https://make-slide.vercel.app) | 에디토리얼, 비대칭 레이아웃 | 디자인, 크리에이티브 |
-| 9 | [`data-focus`](https://make-slide.vercel.app) | 대시보드 스타일, 깔끔 | 데이터 분석, KPI |
-| 10 | [`playful`](https://make-slide.vercel.app) | 둥근 모서리, 파스텔, 바운스 | 워크숍, 캐주얼 발표 |
+### `.claude/skills/` 컨벤션
 
----
-
-## ⚙️ 작동 방식
+`npx make-slide init` 실행 후 프로젝트 구조:
 
 ```
-┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
-│ 1. AI가      │────▶│ 2. 사용자가   │────▶│ 3. AI가      │────▶│ 4. AI가      │
-│ SKILL.md 읽기│     │  테마 선택    │     │ 레퍼런스 참조 │     │ 슬라이드 생성 │
-└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘
+your-project/
+├── .claude/
+│   └── skills/
+│       └── make-slide/
+│           ├── SKILL.md          ← 메인 지침서
+│           └── references/
+│               ├── themes.md     ← 10개 테마 + GitHub raw URL
+│               ├── slide-types.md ← 12가지 슬라이드 타입
+│               └── html-spec.md  ← HTML 요구사항
+├── CLAUDE.md                     ← /make-slide 명령어 자동 추가
+└── ... 프로젝트 파일들
 ```
 
-1. **AI가 `SKILL.md`를 읽습니다** — 모든 AI 코딩 도구가 따를 수 있는 범용 지침서
-2. **사용자가 테마를 선택합니다** — [갤러리](https://make-slide.vercel.app)에서 선택하거나 AI가 추천
-3. **AI가 테마 레퍼런스를 가져옵니다** — GitHub에서 `reference.html`(풀 예시) + `README.md`(디자인 가이드) fetch
-4. **AI가 프레젠테이션을 생성합니다** — 테마에 맞는 단일 `index.html` 파일 + 발표자 노트
+Claude Code에서 `/make-slide` 입력하면 9단계 워크플로우를 따릅니다:
 
----
+1. **입력 분석** — 모드(주제/내용/대본) 및 슬라이드 수 결정
+2. **테마 선택** — 갤러리에서 선택하거나 AI가 추천
+3. **이미지 확인** — 실제 이미지 또는 CSS 플레이스홀더
+4. **아웃라인 생성** — 슬라이드별 구성 승인
+5. **테마 레퍼런스 가져오기** — GitHub에서 테마 템플릿 다운로드
+6. **HTML 생성** — 테마에 맞는 프레젠테이션 빌드
+7. **발표자 노트 추가** — 타이밍 큐 포함 노트
+8. **대본 생성** — 전체 발표 대본 (선택)
+9. **전달** — `index.html` 저장 + 로컬 프리뷰
 
-## 📁 프로젝트 구조
-
-```
-make-slide/
-├── README.md              # 이 파일
-├── SKILL.md               # AI 에이전트 지침서 (스킬)
-├── LICENSE                 # MIT 라이선스
-│
-├── themes/                # 테마 레퍼런스 (10개)
-│   ├── minimal-dark/
-│   │   ├── README.md          # 디자인 가이드라인
-│   │   ├── reference.html     # 전체 예시 프레젠테이션
-│   │   └── preview.png        # 테마 썸네일
-│   ├── minimal-light/
-│   ├── corporate/
-│   ├── ... (총 10개)
-│   └── playful/
-│
-├── gallery/               # 테마 갤러리 웹사이트 (Vercel)
-│   ├── index.html             # 갤러리 페이지
-│   └── public/previews/       # 테마 스크린샷
-│
-├── core/                  # 공통 JS/CSS 소스
-│   ├── navigation.js          # 키보드 + 터치 네비게이션
-│   ├── fullscreen.js          # 전체화면 토글
-│   ├── speaker-notes.js       # 발표자 노트 패널
-│   ├── pdf-export.css         # 인쇄 스타일
-│   └── base.css               # 리셋 + 유틸리티
-│
-└── examples/              # 예시 프레젠테이션
-    └── pineone-talk-reference.html
-```
+테마 파일은 GitHub에서 온디맨드로 가져옵니다 — 로컬에 무거운 파일이 저장되지 않습니다.
 
 ---
 
-## 🤝 기여하기
+## 🎨 테마
 
-### 새 테마 추가하기
+10개 테마 모두 **[make-slide.vercel.app](https://make-slide.vercel.app)** 에서 확인할 수 있습니다.
 
-1. `themes/` 안에 테마 ID로 폴더를 생성하세요 (케밥 케이스):
-   ```
-   themes/your-theme-name/
-   ```
+| # | 테마 | 스타일 | 추천 용도 |
+|:-:|------|--------|-----------|
+| 1 | `minimal-dark` | 다크 배경, 화이트 타이포 | 테크 발표, 컨퍼런스 |
+| 2 | `minimal-light` | 화이트 배경, 클린 타이포 | 일반 발표, 세미나 |
+| 3 | `corporate` | 네이비 & 골드, 구조적 | 비즈니스, 보고 |
+| 4 | `gradient-pop` | 비비드 그라디언트, 글라스모피즘 | 스타트업, 피칭 |
+| 5 | `neon-terminal` | 터미널 그린, 스캔라인 | 개발자 발표, 해커톤 |
+| 6 | `paper` | 크래프트지, 세리프 타이포 | 교육, 워크숍 |
+| 7 | `keynote-apple` | 드라마틱 다크, Apple 스타일 | 제품 발표, 키노트 |
+| 8 | `magazine` | 에디토리얼, 비대칭 레이아웃 | 디자인, 크리에이티브 |
+| 9 | `data-focus` | 대시보드 스타일, 깔끔 | 데이터 분석, KPI |
+| 10 | `playful` | 둥근 모서리, 파스텔, 바운스 | 워크숍, 캐주얼 발표 |
 
-2. **세 가지 파일을 추가하세요:**
-   - `reference.html` — 모든 슬라이드 타입(타이틀, 콘텐츠, 비교, 코드, 데이터, 인용, 클로징 등)을 포함하는 10장짜리 전체 예시 프레젠테이션. 네비게이션, 전체화면, 발표자 노트, PDF 내보내기 모두 동작해야 함
-   - `README.md` — 디자인 가이드라인: 컬러 팔레트, 타이포그래피, 간격, 디자인 철학, 용도
-   - `preview.png` — 타이틀 슬라이드의 1280×720 스크린샷
+---
 
-3. `core/`의 네비게이션, 전체화면, 발표자 노트, PDF 내보내기 기능 **컨벤션을 따르세요**
+## 🤝 기여하기
 
-4. **PR을 제출하세요** — 갤러리에 테마가 추가됩니다!
+### 새 테마 추가하기
 
-### 가이드라인
-- 결과물은 반드시 단일 `.html` 파일 — 모든 CSS/JS 인라인
-- 허용되는 외부 의존성: 폰트 CDN (Pretendard 필수) + Prism.js (코드 블록용)
-- 모든 테마는 `SKILL.md`에 정의된 전체 슬라이드 타입 세트를 지원해야 함
-- 키보드 네비게이션, 전체화면, 발표자 노트, 인쇄 내보내기 테스트 필수
+1. `themes/` 안에 테마 ID로 폴더 생성 (케밥 케이스)
+2. `reference.html` + `README.md` 추가
+3. `core/`의 컨벤션을 따르기
+4. PR 제출 — 갤러리에 자동 추가!
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "make-slide",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "AI presentation skill — generate single-file HTML slides with 10 themes",
   "bin": {
     "make-slide": "./bin/cli.js"
@@ -11,7 +11,14 @@
     "README.md",
     "LICENSE"
   ],
-  "keywords": ["slides", "presentation", "ai", "claude", "skill", "html"],
+  "keywords": [
+    "slides",
+    "presentation",
+    "ai",
+    "claude",
+    "skill",
+    "html"
+  ],
   "author": "Kuneosu",
   "license": "MIT",
   "repository": {