make-slide 2.0.0

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

@@ -0,0 +1,230 @@
+---
+name: make-slide
+description: "Generate single-file HTML presentations with 10 professional themes and speaker notes. Use this skill whenever the user mentions presentations, slides, deck, talk, keynote, pitch, slideshow, or wants to turn any content into a visual presentation — even if they don't explicitly say 'slide'. Also triggers for requests like 'make a talk about', 'create a pitch for', 'turn this into slides', or any request to visualize content for an audience."
+---
+
+# make-slide — AI Presentation Skill
+
+## Overview
+
+Generate single-file HTML presentations with speaker notes. The output is always a standalone `.html` file with all CSS and JS inlined — no build step, no framework, no dependencies beyond font CDNs.
+
+**Repository**: [github.com/kuneosu/make-slide](https://github.com/kuneosu/make-slide)
+**Theme Gallery**: [make-slide.vercel.app](https://make-slide.vercel.app)
+
+---
+
+## When to Use
+
+Activate this skill when the user's request matches any of these patterns:
+
+- "Make a presentation about..."
+- "Create slides for..."
+- "Build a slide deck..."
+- "Turn this into a presentation"
+- "Make a talk about..."
+- "Create a pitch deck for..."
+- "Generate presentation slides..."
+- Any request involving: **presentation**, **slides**, **deck**, **talk**, **keynote**, **pitch**, **slideshow**
+- Any request to visualize or structure content for an audience, even without explicit "slide" mention
+
+---
+
+## Input Modes
+
+Determine which mode applies based on the user's input:
+
+### Mode A: Topic Only
+The user provides a topic and optionally a duration or audience.
+```
+"Make a 15-min talk about AI trends"
+"Create a presentation on microservices architecture"
+```
+→ Design the structure, content, and speaker notes from scratch.
+
+### Mode B: Content/Material Provided
+The user provides source material (documents, notes, data, articles).
+```
+"Turn this document into a presentation"
+"Create slides based on these meeting notes"
+```
+→ Organize and distill the material into slides + speaker notes.
+
+### Mode C: Script Provided
+The user provides a written speech or speaking script.
+```
+"Create slides for this speech script"
+"Make a visual deck that accompanies this talk"
+```
+→ Analyze the script's structure and create matching visual slides. The script becomes the speaker notes.
+
+---
+
+## Workflow
+
+Follow these steps in order:
+
+### Step 1: Analyze Input
+- Determine the input mode (A, B, or C)
+- Estimate the appropriate number of slides:
+  - 5-min talk → 8–12 slides
+  - 10-min talk → 12–18 slides
+  - 15-min talk → 18–25 slides
+  - 20-min talk → 25–30 slides
+  - 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
+
+### Step 2: Choose a Theme
+Present the user with the theme gallery link for browsing:
+> **Browse themes here**: https://make-slide.vercel.app
+
+Read `references/themes.md` for the full theme list with GitHub raw URLs and recommendations by context.
+
+If the user doesn't choose a theme, recommend one based on context:
+- Tech/developer talk → `minimal-dark` or `neon-terminal`
+- Business/corporate → `corporate` or `minimal-light`
+- Startup pitch → `gradient-pop` or `keynote-apple`
+- Data/analytics → `data-focus`
+- Education/workshop → `paper` or `playful`
+- Design/creative → `magazine`
+- 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 4: Generate Outline
+Create a slide-by-slide outline with:
+- Slide number
+- Slide type (from slide types reference)
+- Title
+- Key points / content summary
+- Image placement (if applicable)
+
+Read `references/slide-types.md` for the 12 available slide type patterns.
+
+Present the outline to the user for confirmation. Wait for approval or modifications before proceeding.
+
+### Step 5: Fetch Theme Reference
+Fetch the chosen theme's reference files from GitHub:
+
+1. **reference.html** — The complete example presentation with all slide types, styles, navigation, and interactive features. This is the primary template.
+2. **README.md** — Design guidelines including color palette, typography, spacing rules, and design philosophy.
+
+Use the raw GitHub URLs listed in `references/themes.md`.
+
+### Step 6: Generate HTML
+Using the reference.html as the template:
+- Replicate the exact HTML structure, CSS styles, and JS functionality
+- Replace the demo content with the user's actual content
+- Keep all interactive features (navigation, fullscreen, speaker notes, etc.)
+- Match the theme's typography, colors, spacing, and animations
+- Ensure all slide types used match the patterns in the reference
+
+Read `references/html-spec.md` for the full HTML requirements including navigation, fullscreen, PDF export, CDN dependencies, image handling, and code blocks.
+
+### Step 7: Generate Speaker Notes
+Add speaker notes as `data-notes` attributes on each slide's `<div>`:
+```html
+<div class="slide" data-notes="Welcome everyone. Today I'll be talking about...">
+```
+- Notes should be conversational and natural
+- Include timing cues where helpful (e.g., "[PAUSE]", "[2 min]")
+- Expand on the slide text — don't just repeat it
+- Include transitions between slides (e.g., "Now let's move on to...")
+
+### 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
+- Timing estimates per section
+- Audience interaction cues
+- Key points to emphasize
+
+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 .
+  ```
+
+---
+
+## Output Rules
+
+1. Always output a single `.html` file with all CSS and JS inlined
+2. Only allowed external dependencies: Font CDNs (Pretendard, JetBrains Mono) + Prism.js CDN (conditional)
+3. Speaker notes embedded as `data-notes` attributes on each slide `<div>`
+4. Optionally output `script.md` for full speaking script (Mode A and B)
+5. Generate content in the user's language — detect from the conversation context
+6. Filename: `index.html` by default, or as specified by the user
+7. Vanilla JS only — no JavaScript frameworks
+8. Vanilla CSS only — no CSS frameworks
+
+---
+
+## Tips for Best Results
+
+### Content
+- Keep slides concise: max 6–8 bullet points per slide
+- One core idea per slide
+- Use short phrases, not full sentences, on slides
+- Save detailed explanations for speaker notes
+
+### Design
+- Use the theme's accent color for emphasis and key terms
+- Match typography hierarchy exactly from the reference.html
+- Maintain consistent spacing and padding throughout
+- Work within the theme's design system — don't override its core design
+
+### Speaker Notes
+- Write notes in a conversational tone
+- Expand, explain, give examples — don't just repeat slide text
+- Include timing hints: "[This section: ~3 minutes]"
+- Add transition phrases: "Now let's look at...", "Building on that..."
+- Mark audience interaction points: "[ASK AUDIENCE]", "[DEMO]", "[PAUSE]"
+
+### Data Visualization
+- Use CSS-only charts when possible (bar charts, progress bars, donut charts)
+- Keep numbers round and memorable (say "nearly 50%" not "49.7%")
+- Highlight the most important metric with size or color
+
+### Performance
+- Keep total HTML file size under 200KB ideally
+- Use `loading="lazy"` on images
+- Minimize complex CSS animations on slides with heavy content
+
+### Accessibility
+- Maintain sufficient color contrast ratios
+- Include `alt` text on all images
+- Ensure keyboard navigation works for all interactive elements
+- Use semantic HTML where appropriate
+
+---
+
+## Quick Start Example
+
+If the user says: *"Make a 10-minute presentation about Python best practices"*
+
+1. **Mode**: A (Topic only)
+2. **Slides**: ~15 slides
+3. **Theme recommendation**: `minimal-dark` or `neon-terminal` (developer topic)
+4. **Ask**: Theme preference + image needs
+5. **Generate outline** → Get confirmation
+6. **Fetch**: `minimal-dark/reference.html` + `minimal-dark/README.md`
+7. **Generate**: `index.html` + `script.md`
+8. **Offer**: Local server preview
+
+---
+
+*Skill version: 2.0 | Repository: [kuneosu/make-slide](https://github.com/kuneosu/make-slide) | Gallery: [make-slide.vercel.app](https://make-slide.vercel.app)*

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

@@ -0,0 +1,160 @@
+# HTML Specification
+
+Every generated presentation includes all of the following features. These ensure consistent, professional output across all themes.
+
+## File Structure
+- Single standalone `.html` file
+- All CSS inlined in `<style>` tags
+- All JS inlined in `<script>` tags
+- No external files except CDN links listed below
+
+## Required CDN Dependencies
+```html
+<!-- Pretendard Font (always include) -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css">
+
+<!-- JetBrains Mono for code blocks -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap">
+
+<!-- Prism.js for syntax highlighting (ONLY if code blocks exist) -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+<!-- Add language components as needed -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+```
+
+## Navigation & Controls
+
+### Keyboard Navigation
+- `←` / `→` Arrow keys: Previous / Next slide
+- `Space`: Next slide
+- `F`: Toggle fullscreen
+- `S`: Toggle speaker notes panel
+- `Escape`: Exit fullscreen
+
+### Slide Counter
+- Display current slide number and total: `3 / 25`
+- Position: bottom-right or as defined by the theme
+
+### Progress Bar
+- Visual progress indicator showing position in the deck
+- Updates on each slide transition
+
+### Fullscreen
+- `F` key toggles fullscreen mode
+- Fullscreen button in the UI controls
+- Uses the Fullscreen API (`requestFullscreen`)
+
+### Speaker Notes Panel
+- `S` key toggles the speaker notes panel
+- Panel displays:
+  - Current slide's notes (from `data-notes` attribute)
+  - Next slide preview (when possible)
+- Panel should not obstruct the main slide view
+
+### Touch/Swipe Navigation
+- Swipe left → Next slide
+- Swipe right → Previous slide
+- Implement using touch event listeners (`touchstart`, `touchend`)
+
+## PDF Export
+```css
+@media print {
+  /* Hide all UI controls */
+  .controls, .progress-bar, .slide-counter,
+  .fullscreen-btn, .speaker-notes-panel,
+  nav, button { display: none !important; }
+
+  /* Each slide = 1 page, landscape */
+  .slide {
+    page-break-after: always;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  @page {
+    size: landscape;
+    margin: 0;
+  }
+}
+```
+
+## Slide Transitions
+- Fade transition between slides (CSS transitions or animations)
+- Smooth and professional — no jarring jumps
+
+## Staggered Element Animations
+- Elements within a slide animate in sequentially (stagger effect)
+- Use CSS animations with incremental `animation-delay`
+- Trigger animations when the slide becomes active
+
+## Layout
+
+### Aspect Ratio
+- 16:9 aspect ratio for all slides
+- Centered on screen with letterboxing if needed
+
+### Responsive Design
+- Scales to fit various screen sizes
+- Text remains readable at all resolutions
+- Controls adapt to screen size
+
+### Content Overflow
+- Apply `overflow-y: auto` on slide content areas to prevent clipping
+- Scrollbar should be subtle and match the theme
+
+## Image Handling
+
+### Default: CSS Placeholders
+When no image URLs are provided, use styled placeholders that match the theme:
+```html
+<!-- Emoji-based placeholder -->
+<div class="image-placeholder">
+  <span class="placeholder-icon">🚀</span>
+  <span class="placeholder-label">Product Screenshot</span>
+</div>
+
+<!-- CSS shape placeholder -->
+<div class="image-placeholder gradient-bg">
+  <svg>...</svg>
+</div>
+```
+
+### When User Provides URLs
+```html
+<img src="https://example.com/image.jpg" alt="Description" loading="lazy">
+```
+- Always include descriptive `alt` text
+- Use `loading="lazy"` for images below the fold
+- Style images to fit within the slide layout without overflow
+
+## Code Blocks
+
+### Syntax Highlighting with Prism.js
+- Only include Prism.js CDN when code blocks are present in the presentation
+- If no code blocks exist, omit all Prism.js `<link>` and `<script>` tags
+
+### Supported Languages
+Include Prism.js language components as needed:
+- `prism-javascript.min.js` — JavaScript
+- `prism-typescript.min.js` — TypeScript
+- `prism-python.min.js` — Python
+- `prism-markup.min.js` — HTML/XML (included in core)
+- `prism-css.min.js` — CSS (included in core)
+- `prism-bash.min.js` — Bash/Shell
+- `prism-json.min.js` — JSON
+- `prism-java.min.js` — Java
+- `prism-go.min.js` — Go
+- `prism-rust.min.js` — Rust
+
+### Code Block Markup
+```html
+<pre><code class="language-javascript">
+function hello() {
+  console.log("Hello, World!");
+}
+</code></pre>
+```
+- Use `JetBrains Mono` font for all code blocks
+- Ensure adequate contrast for readability
+- Match the code theme to the presentation theme (dark themes → dark code, light themes → light code)

package/.claude/skills/make-slide/references/slide-types.md

@@ -0,0 +1,106 @@
+# Slide Types Reference
+
+Every theme supports these 12 common slide types. Use the appropriate type based on content needs.
+
+## 1. Title Slide
+The opening slide with presentation title, subtitle, presenter name, and date.
+```
+[Large Title]
+[Subtitle or tagline]
+[Presenter Name — Date]
+```
+
+## 2. Agenda / Table of Contents
+Overview of the presentation structure with numbered sections.
+```
+[Agenda heading]
+01. First Section
+02. Second Section
+03. Third Section
+...
+```
+
+## 3. Section Divider
+Marks the beginning of a new section. Usually has a big number or icon.
+```
+[Big Number: 01]
+[Section Title]
+[Optional brief description]
+```
+
+## 4. Content Slide
+Standard slide with heading and bullet points or paragraphs.
+```
+[Heading]
+• Point one
+• Point two
+• Point three
+[Optional supporting text]
+```
+
+## 5. Quote Slide
+Features a prominent quotation with attribution.
+```
+"The best way to predict the future is to invent it."
+— Alan Kay
+```
+
+## 6. Comparison Slide
+Side-by-side columns comparing two concepts, approaches, or options.
+```
+[Left Column: Option A]     [Right Column: Option B]
+- Feature 1                 - Feature 1
+- Feature 2                 - Feature 2
+```
+
+## 7. Flow / Process Slide
+Step-by-step process visualization with arrows or connectors.
+```
+[Step 1] → [Step 2] → [Step 3] → [Step 4]
+```
+
+## 8. Card Grid Slide
+2–4 cards arranged in a grid, each with an icon, title, and description.
+```
+[🎯 Card 1]  [🚀 Card 2]
+[Title]       [Title]
+[Desc]        [Desc]
+
+[💡 Card 3]  [⚡ Card 4]
+[Title]       [Title]
+[Desc]        [Desc]
+```
+
+## 9. Data / Chart Slide
+Statistics, metrics, bar charts, or KPI displays. Use CSS-only charts when possible.
+```
+[Metric: 95%]  [Metric: 2.5x]  [Metric: 10K+]
+[CSS bar chart or visual representation]
+```
+
+## 10. Code Block Slide
+Syntax-highlighted code with optional title and description.
+```
+[Title: Implementation Example]
+┌──────────────────────────┐
+│ function example() {     │
+│   return "hello";        │
+│ }                        │
+└──────────────────────────┘
+[Optional explanation below]
+```
+
+## 11. Image Slide
+Slide featuring an image (or placeholder) with optional caption.
+```
+[Image or Placeholder]
+[Caption text]
+```
+
+## 12. Closing Slide
+Final slide with thank you message, contact info, or call to action.
+```
+[Thank You]
+[Contact info / Social links / QR code]
+[Call to action]
+```

package/.claude/skills/make-slide/references/themes.md

@@ -0,0 +1,31 @@
+# Theme List
+
+10 professional themes available for presentations. Each theme includes a complete `reference.html` (template with all slide types) and a `README.md` (design guidelines).
+
+## Theme Table
+
+| # | Theme ID | Style | Best For | Reference HTML | README |
+|---|----------|-------|----------|---------------|--------|
+| 1 | `minimal-dark` | Clean dark background, white typography, modern minimal | Tech conferences, developer talks, open source presentations | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/minimal-dark/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/minimal-dark/README.md) |
+| 2 | `minimal-light` | Bright white background, precise typography, Apple-inspired | General presentations, corporate meetings, academic lectures | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/minimal-light/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/minimal-light/README.md) |
+| 3 | `corporate` | Navy and gold accents, professional structured layout | Business presentations, investor meetings, quarterly reports | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/corporate/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/corporate/README.md) |
+| 4 | `gradient-pop` | Vibrant purple-pink-orange gradients, glass-morphism cards | Startup pitches, product launches, marketing campaigns | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/gradient-pop/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/gradient-pop/README.md) |
+| 5 | `neon-terminal` | Terminal-style dark theme, neon green/cyan, scanline effects | Developer conferences, hackathons, CTF events, security talks | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/neon-terminal/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/neon-terminal/README.md) |
+| 6 | `paper` | Warm kraft-paper aesthetic, serif typography, terracotta accents | Educational talks, academic conferences, workshops, research | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/paper/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/paper/README.md) |
+| 7 | `keynote-apple` | Dramatic dark/gradient backgrounds, Apple keynote-inspired | Product launches, keynote conferences, executive briefings | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/keynote-apple/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/keynote-apple/README.md) |
+| 8 | `magazine` | Editorial magazine layout, asymmetric design, dramatic typography | Design presentations, portfolio reviews, brand guidelines | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/magazine/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/magazine/README.md) |
+| 9 | `data-focus` | Clean data-centric layout, dashboard aesthetics, trend indicators | Data analysis, KPI dashboards, financial reviews, statistical reports | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/data-focus/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/data-focus/README.md) |
+| 10 | `playful` | Rounded corners, pastel colors, emoji accents, bouncy animations | Team workshops, casual tech talks, retrospectives, community events | [reference.html](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/playful/reference.html) | [README.md](https://raw.githubusercontent.com/kuneosu/make-slide/main/themes/playful/README.md) |
+
+## Recommendation Guide
+
+| Context | Recommended Themes |
+|---------|-------------------|
+| Tech/developer talk | `minimal-dark`, `neon-terminal` |
+| Business/corporate | `corporate`, `minimal-light` |
+| Startup pitch | `gradient-pop`, `keynote-apple` |
+| Data/analytics | `data-focus` |
+| Education/workshop | `paper`, `playful` |
+| Design/creative | `magazine` |
+| Product launch | `keynote-apple` |
+| Casual/team event | `playful` |

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kuneosu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,336 @@
+# make-slide 🎯
+
+**AI-powered presentation skill that generates stunning single-file HTML slide decks.**
+**AI 코딩 에이전트가 단일 HTML 파일로 고품질 프레젠테이션을 생성하는 범용 스킬.**
+
+[![Live Gallery](https://img.shields.io/badge/🎨_Theme_Gallery-Live_Demo-blue?style=for-the-badge)](https://make-slide.vercel.app)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
+
+---
+
+## What is make-slide?
+
+**make-slide** is a skill (instruction set) for AI coding agents — like Claude Code, Gemini CLI, Codex, Cursor, and others — that enables them to generate professional presentation slides as a **single HTML file**.
+
+Instead of crafting designs from scratch every time (wasting tokens and producing inconsistent results), the AI references pre-built theme templates from this repository. The result is:
+
+- **Token-efficient** — AI fetches a reference file instead of inventing layouts
+- **Consistent quality** — every presentation follows a polished, tested design system
+- **Zero dependencies** — output is one `.html` file you can open anywhere
+
+> Think of it as a **design system for AI-generated presentations**.
+
+---
+
+## ✨ Features
+
+| Feature | Description |
+|---------|-------------|
+| 🎨 **10 Themes** | From dark minimal to playful pastels — [browse the gallery](https://make-slide.vercel.app) |
+| 📄 **Single HTML Output** | One file, no build step, no framework — just open in a browser |
+| 🎤 **Speaker Notes** | Built-in presenter mode with per-slide notes (press `S`) |
+| 🖨️ **PDF Export** | Print-ready via `Ctrl+P` with clean `@media print` styles |
+| 🖥️ **Fullscreen** | One-key fullscreen toggle (press `F`) |
+| ⌨️ **Keyboard Navigation** | Arrow keys, spacebar, touch/swipe support |
+| 📥 **3 Input Modes** | Topic only / Content provided / Script provided |
+| 🤖 **Works with Any AI Tool** | Claude Code, Gemini CLI, Codex, Cursor, and more |
+| 🌍 **Language-Agnostic** | Generates content in whatever language you speak |
+| 📊 **CSS-Only Charts** | Bar charts, progress rings, KPI cards — no chart library needed |
+
+---
+
+## 🚀 Quick Start
+
+Give your AI coding tool the following instruction:
+
+### Claude Code
+```
+Read SKILL.md from https://github.com/kuneosu/make-slide and create a presentation about [your topic] using the minimal-dark theme.
+```
+
+### Gemini CLI
+```
+Follow the instructions in SKILL.md at https://github.com/kuneosu/make-slide to build a 10-slide presentation about [your topic].
+```
+
+### Any AI Coding Tool
+```
+Fetch https://raw.githubusercontent.com/kuneosu/make-slide/main/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
+
+All 10 themes are live at **[make-slide.vercel.app](https://make-slide.vercel.app)**
+
+| # | 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 |
+
+---
+
+## ⚙️ How It Works
+
+```
+┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
+│  1. AI reads │────▶│ 2. User picks│────▶│ 3. AI fetches│────▶│ 4. AI builds │
+│   SKILL.md   │     │    theme     │     │  reference   │     │  your slides │
+└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘
+```
+
+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
+
+---
+
+## 📁 Project Structure
+
+```
+make-slide/
+├── README.md              # This file
+├── SKILL.md               # AI agent instruction file (the "skill")
+├── LICENSE                 # MIT License
+│
+├── themes/                # Theme references (10 themes)
+│   ├── minimal-dark/
+│   │   ├── README.md          # Design guidelines
+│   │   ├── reference.html     # Full example presentation
+│   │   └── preview.png        # Theme thumbnail
+│   ├── minimal-light/
+│   ├── corporate/
+│   ├── gradient-pop/
+│   ├── neon-terminal/
+│   ├── paper/
+│   ├── keynote-apple/
+│   ├── magazine/
+│   ├── data-focus/
+│   └── playful/
+│
+├── gallery/               # Theme gallery website (Vercel)
+│   ├── index.html             # Gallery page
+│   └── public/previews/       # Theme screenshots
+│
+├── 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
+│
+└── examples/              # Example presentations
+    └── pineone-talk-reference.html
+```
+
+---
+
+## 🤝 Contributing
+
+### Adding a New Theme
+
+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
+
+3. **Follow the conventions** in `core/` for navigation, fullscreen, speaker notes, and PDF export functionality
+
+4. **Submit a PR** — and 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`
+- Test keyboard navigation, fullscreen, speaker notes, and print export
+
+---
+
+## 📜 License
+
+[MIT](LICENSE) — use freely for personal and commercial projects.
+
+---
+---
+
+<br>
+
+# make-slide 🎯 (한국어)
+
+**AI 코딩 에이전트가 단일 HTML 파일로 고품질 프레젠테이션을 생성하는 범용 스킬.**
+
+[![테마 갤러리](https://img.shields.io/badge/🎨_테마_갤러리-라이브_데모-blue?style=for-the-badge)](https://make-slide.vercel.app)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
+
+---
+
+## make-slide란?
+
+**make-slide**는 Claude Code, Gemini CLI, Codex, Cursor 등 AI 코딩 에이전트를 위한 스킬(지침서)입니다. AI가 이 스킬을 읽고 따라하면 전문적인 프레젠테이션 슬라이드를 **단일 HTML 파일**로 생성합니다.
+
+매번 처음부터 디자인을 만드는 대신(토큰 낭비 + 일관성 없는 결과), AI가 이 레포의 사전 제작된 테마 템플릿을 참조합니다:
+
+- **토큰 절약** — AI가 레이아웃을 발명하는 대신 레퍼런스 파일을 가져옴
+- **일관된 품질** — 모든 프레젠테이션이 검증된 디자인 시스템을 따름
+- **제로 의존성** — 결과물은 어디서나 열 수 있는 `.html` 파일 하나
+
+> **AI 생성 프레젠테이션을 위한 디자인 시스템**이라고 생각하세요.
+
+---
+
+## ✨ 주요 기능
+
+| 기능 | 설명 |
+|------|------|
+| 🎨 **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 코딩 도구에 다음과 같이 지시하세요:
+
+### Claude Code
+```
+https://github.com/kuneosu/make-slide 의 SKILL.md를 읽고 [주제]에 대한 프레젠테이션을 minimal-dark 테마로 만들어줘.
+```
+
+### Gemini CLI
+```
+https://github.com/kuneosu/make-slide 의 SKILL.md 지침을 따라 [주제]에 대한 10장짜리 프레젠테이션을 만들어줘.
+```
+
+### 기타 AI 코딩 도구
+```
+https://raw.githubusercontent.com/kuneosu/make-slide/main/SKILL.md 를 가져와서 지침에 따라 [주제]에 대한 프레젠테이션을 만들어줘.
+```
+
+> **팁:** [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) | 둥근 모서리, 파스텔, 바운스 | 워크숍, 캐주얼 발표 |
+
+---
+
+## ⚙️ 작동 방식
+
+```
+┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
+│ 1. AI가      │────▶│ 2. 사용자가   │────▶│ 3. AI가      │────▶│ 4. AI가      │
+│ SKILL.md 읽기│     │  테마 선택    │     │ 레퍼런스 참조 │     │ 슬라이드 생성 │
+└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘
+```
+
+1. **AI가 `SKILL.md`를 읽습니다** — 모든 AI 코딩 도구가 따를 수 있는 범용 지침서
+2. **사용자가 테마를 선택합니다** — [갤러리](https://make-slide.vercel.app)에서 선택하거나 AI가 추천
+3. **AI가 테마 레퍼런스를 가져옵니다** — GitHub에서 `reference.html`(풀 예시) + `README.md`(디자인 가이드) fetch
+4. **AI가 프레젠테이션을 생성합니다** — 테마에 맞는 단일 `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
+```
+
+---
+
+## 🤝 기여하기
+
+### 새 테마 추가하기
+
+1. `themes/` 안에 테마 ID로 폴더를 생성하세요 (케밥 케이스):
+   ```
+   themes/your-theme-name/
+   ```
+
+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`에 정의된 전체 슬라이드 타입 세트를 지원해야 함
+- 키보드 네비게이션, 전체화면, 발표자 노트, 인쇄 내보내기 테스트 필수
+
+---
+
+## 📜 라이선스
+
+[MIT](LICENSE) — 개인 및 상업 프로젝트에 자유롭게 사용하세요.

package/bin/cli.js

@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const SKILL_DIR = '.claude/skills/make-slide';
+const GALLERY_URL = 'https://make-slide.vercel.app';
+
+const THEMES = [
+  { id: 'minimal-dark',   style: 'Clean dark, white typography',        bestFor: 'Tech talks, developer conferences' },
+  { id: 'minimal-light',  style: 'Bright white, Apple-inspired',        bestFor: 'General, corporate, academic' },
+  { id: 'corporate',      style: 'Navy & gold, professional layout',    bestFor: 'Business, investor meetings' },
+  { id: 'gradient-pop',   style: 'Purple-pink gradients, glassmorphism',bestFor: 'Startup pitches, marketing' },
+  { id: 'neon-terminal',  style: 'Terminal dark, neon green/cyan',      bestFor: 'Hackathons, security, CTF' },
+  { id: 'paper',          style: 'Kraft paper, serif, terracotta',      bestFor: 'Education, workshops, research' },
+  { id: 'keynote-apple',  style: 'Dramatic dark, Apple keynote',        bestFor: 'Product launches, keynotes' },
+  { id: 'magazine',       style: 'Editorial, asymmetric, dramatic',     bestFor: 'Design, portfolio, branding' },
+  { id: 'data-focus',     style: 'Dashboard aesthetics, data-centric',  bestFor: 'Analytics, KPIs, financial' },
+  { id: 'playful',        style: 'Pastel colors, bouncy animations',    bestFor: 'Workshops, casual talks, retros' },
+];
+
+const INJECT_TEXT = `
+
+## /make-slide
+When the user types "/make-slide", read \`.claude/skills/make-slide/SKILL.md\` and follow the presentation creation workflow. Browse themes at ${GALLERY_URL}
+`;
+
+// ── Helpers ──
+
+function copyDirSync(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDirSync(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function openUrl(url) {
+  const platform = process.platform;
+  try {
+    if (platform === 'darwin') execSync(`open "${url}"`);
+    else if (platform === 'win32') execSync(`start "" "${url}"`);
+    else execSync(`xdg-open "${url}"`);
+  } catch {
+    console.log(`Open manually: ${url}`);
+  }
+}
+
+function padEnd(str, len) {
+  return str.length >= len ? str : str + ' '.repeat(len - str.length);
+}
+
+// ── Commands ──
+
+function cmdInit() {
+  const cwd = process.cwd();
+
+  // Find the source skill directory (bundled with the package)
+  const packageRoot = path.resolve(__dirname, '..');
+  const srcSkill = path.join(packageRoot, SKILL_DIR);
+
+  if (!fs.existsSync(srcSkill)) {
+    console.error('❌ Skill template not found. Reinstall with: npx make-slide init');
+    process.exit(1);
+  }
+
+  const destSkill = path.join(cwd, SKILL_DIR);
+
+  // Copy skill files
+  console.log('📁 Copying skill files...');
+  copyDirSync(srcSkill, destSkill);
+  console.log(`   ✅ ${SKILL_DIR}/`);
+
+  // Auto-detect and inject into AI config files
+  const configFiles = ['CLAUDE.md', 'AGENTS.md', '.cursorrules'];
+  let injected = false;
+
+  for (const file of configFiles) {
+    const filePath = path.join(cwd, file);
+    if (fs.existsSync(filePath)) {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      if (content.includes('/make-slide')) {
+        console.log(`   ⏭️  ${file} already has /make-slide reference`);
+      } else {
+        fs.appendFileSync(filePath, INJECT_TEXT);
+        console.log(`   ✅ Injected /make-slide into ${file}`);
+      }
+      injected = true;
+    }
+  }
+
+  if (!injected) {
+    console.log('');
+    console.log('💡 No AI config file found (CLAUDE.md, AGENTS.md, .cursorrules).');
+    console.log('   To use with Claude Code, add this to your CLAUDE.md:');
+    console.log('');
+    console.log('   ## /make-slide');
+    console.log('   When the user types "/make-slide", read `.claude/skills/make-slide/SKILL.md`');
+    console.log('   and follow the presentation creation workflow.');
+  }
+
+  console.log('');
+  console.log('🎉 make-slide installed successfully!');
+  console.log('');
+  console.log('Next steps:');
+  console.log('  1. Type /make-slide in Claude Code to create a presentation');
+  console.log(`  2. Browse themes: ${GALLERY_URL}`);
+  console.log('  3. Run: npx make-slide themes');
+}
+
+function cmdThemes() {
+  console.log('');
+  console.log('🎨 make-slide themes');
+  console.log('═'.repeat(80));
+  console.log('');
+  console.log(`  ${padEnd('#', 4)} ${padEnd('Theme', 18)} ${padEnd('Style', 40)} Best For`);
+  console.log(`  ${'-'.repeat(4)} ${'-'.repeat(18)} ${'-'.repeat(40)} ${'-'.repeat(30)}`);
+
+  THEMES.forEach((t, i) => {
+    const num = String(i + 1).padStart(2, ' ');
+    console.log(`  ${padEnd(num, 4)} ${padEnd(t.id, 18)} ${padEnd(t.style, 40)} ${t.bestFor}`);
+  });
+
+  console.log('');
+  console.log(`  🌐 Gallery: ${GALLERY_URL}`);
+  console.log('');
+}
+
+function cmdGallery() {
+  console.log(`🌐 Opening theme gallery: ${GALLERY_URL}`);
+  openUrl(GALLERY_URL);
+}
+
+function cmdHelp() {
+  console.log('');
+  console.log('🎯 make-slide — AI presentation skill');
+  console.log('');
+  console.log('Commands:');
+  console.log('  npx make-slide init      Install skill into current project');
+  console.log('  npx make-slide themes    Show available themes');
+  console.log('  npx make-slide gallery   Open theme gallery in browser');
+  console.log('  npx make-slide help      Show this help');
+  console.log('');
+  console.log(`Gallery: ${GALLERY_URL}`);
+  console.log('GitHub:  https://github.com/Kuneosu/make-slide');
+  console.log('');
+}
+
+// ── Main ──
+
+const command = process.argv[2] || 'help';
+
+switch (command) {
+  case 'init':    cmdInit(); break;
+  case 'themes':  cmdThemes(); break;
+  case 'gallery': cmdGallery(); break;
+  case 'help':
+  case '--help':
+  case '-h':      cmdHelp(); break;
+  default:
+    console.error(`Unknown command: ${command}`);
+    cmdHelp();
+    process.exit(1);
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "make-slide",
+  "version": "2.0.0",
+  "description": "AI presentation skill — generate single-file HTML slides with 10 themes",
+  "bin": {
+    "make-slide": "./bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    ".claude/",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": ["slides", "presentation", "ai", "claude", "skill", "html"],
+  "author": "Kuneosu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Kuneosu/make-slide.git"
+  }
+}