메뉴
Build or edit Slidev (sli.dev) presentations for tech talks, workshops, conference sessions, and live-coding demos. Use when the user asks to create slides, a deck, a presentation, a workshop deck, a conference talk, or edit an existing slides.md.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Guide users through creating, reviewing, and fixing custom skills for Claude — both command skills (invoked via /slash) and context skills (auto-loaded by tech stack). Use when the user asks to create a skill, build a skill, make a new slash command skill, add a coding standards skill, review an existing skill, update a skill, or fix a skill that doesn't trigger.
Write INVEST-compliant user stories with Given-When-Then acceptance criteria. Use when writing user stories, creating acceptance criteria, or during /design Step 4.
Gradle build tool standards focusing on Kotlin DSL. Covers project configuration, dependency management, and custom plugin/task development with Gradle 9 LTS.
Java coding standards for enterprise applications. Includes naming conventions, modern Java features, design patterns, and recommended tooling.
This skill provides JavaScript coding standards and is automatically loaded for JavaScript projects. It includes modern ES2025 patterns, async handling, and recommended tooling.
Kotlin coding standards for modern applications. Includes naming conventions, coroutines, flows, modern Kotlin 2.3.0 features, and recommended tooling.
SOC 직업 분류 기준
| name | create-slidev-presentation |
| description | Build or edit Slidev (sli.dev) presentations for tech talks, workshops, conference sessions, and live-coding demos. Use when the user asks to create slides, a deck, a presentation, a workshop deck, a conference talk, or edit an existing slides.md. |
| type | command |
| source | https://github.com/b33eep/claude-code-setup |
Create and edit high-quality Slidev presentations. Slidev turns a single Markdown file into a presentation with live code, animations, diagrams, and PDF/PPTX export. It is the strongest tool available for tech talks because slides can show code the way code actually behaves — Monaco editors run inline, Shiki Magic-Move morphs code between states, TwoSlash surfaces TypeScript type info, and the whole deck is a git-versionable markdown file.
Primary use cases this skill supports:
Runtime requirements: Node.js ≥ 20.12.0 (Node 24 recommended; Slidev's own create-slidev pins engines.node >=20.12.0). pnpm is the preferred package manager (matches Slidev's official docs); npm and yarn work identically.
Slidev version this skill targets: v52+ (Shiki Magic-Move, TwoSlash, MDC syntax, modern Monaco API all available).
Follow this order when the user asks to work with slides.
New deck → Go to §2 (Pick a template).
Existing deck → Read slides.md first. Never rewrite; make targeted edits. Jump to §7 (Editing workflow).
Ask the user (or infer from their phrasing) which of these fits best:
| User signal | Template | When |
|---|---|---|
| "quick slides", "simple deck", "just a few slides" | assets/starter-deck.md | Minimal, no opinionated structure |
| "conference talk", "30 minutes", "keynote-ish" | assets/conference-talk-deck.md | Narrative: cover → agenda → sections → Q&A |
| "workshop", "hands-on", "tutorial", "live coding heavy" | assets/workshop-deck.md | Mixed: explanation + dual-pane demo slots + exercise markers |
| "lightning talk", "5 minute", "quick demo" | assets/lightning-talk-deck.md | 8–12 slides, high animation, one core idea |
If none fits cleanly, start from starter-deck.md and compose. Don't invent a new structure — copy an asset and modify.
Run the following (adapt cwd):
# Create project directory and scaffold (interactive prompt accepts defaults)
pnpm create slidev my-deck
cd my-deck
Then replace the generated slides.md with the selected template from assets/. Keep the generated package.json, netlify.toml (if any), and .gitignore.
For a manual bootstrap without the interactive prompt, see references/07-config.md → "Minimal project scaffold".
Every deck has one YAML block at the top (headmatter) that configures the whole deck. Start with this opinionated default and add options as needed:
---
theme: seriph
title: Your Talk Title
info: |
One-line description — shows in browser tab, PDF metadata, presenter mode.
author: Speaker Name
keywords: [tag1, tag2]
colorSchema: auto
transition: slide-left
mdc: true
lineNumbers: false
drawings:
persist: false
fonts:
sans: 'Geist'
serif: 'Geist'
mono: 'Geist Mono'
provider: google
weights: '400,500,600,700'
lang: en
---
When to change what — see references/07-config.md for a complete field reference.
Open the chosen asset template and modify it. Key rules:
<v-clicks> so the speaker reveals one point at a time.```ts not ```). Otherwise Shiki cannot highlight.Use the feature that matches the intent. Don't reach for Monaco when line highlighting is enough.
| Intent | Feature | Doc |
|---|---|---|
| "Explain this code line by line" | Shiki line highlighting: ```ts {1|3-5|all} | references/04-code-presentation.md |
| "Show code evolving between versions" | Shiki Magic-Move — morphs between code states | references/04-code-presentation.md |
| "Let the audience run the code" | Monaco editor: ```ts {monaco-run} | references/04-code-presentation.md |
| "Show TypeScript type info inline" | TwoSlash — type hover & errors rendered static | references/04-code-presentation.md |
| "Reveal bullets one by one" | <v-clicks> wrapper | references/03-components.md |
| "Animate an element sliding in" | v-motion directive | references/03-components.md |
| "Flow diagram / sequence / architecture" | Mermaid fenced block | references/05-diagrams-math.md |
| "Math formula" | KaTeX: $ E = mc^2 $ inline, $$...$$ block | references/05-diagrams-math.md |
| "Split slide: cmd left, result right" | layout: two-cols (or a custom dual-pane layout) | references/09-live-demo-patterns.md |
slides.md in full before any edit. Understand the headmatter, the slide count, the layouts used, the theme.---, change a layout line, add a <v-clicks> wrapper. Never reformat unrelated slides.pnpm dev --open in the deck directory; the user verifies in the browser.Ask the user what they need:
pnpm export — requires playwright-chromium as dev dep.pnpm build produces dist/.references/08-export-deploy.md for ready CI snippets.Before reporting a deck done, run through references/11-quality-checklist.md. Covers content, frontmatter, speaker notes, runtime checks, and accessibility.
TODO: markers.``` code ``` → always specify the language.references/.When details are needed beyond this file, read the specific reference, don't guess. Each references/ file is self-contained.
Internal (bundled, read on demand):
references/01-syntax.md — markdown conventions, headmatter, slide separators, notes, importsreferences/02-layouts.md — all built-in layouts with side-by-side comparisonreferences/03-components.md — v-click, v-motion, Toc, Link, icons, Youtube, Tweetreferences/04-code-presentation.md — Shiki, Magic-Move, TwoSlash, Monaco, code groupsreferences/05-diagrams-math.md — Mermaid, PlantUML, KaTeX, chemistryreferences/06-themes-styling.md — theme gallery, colorSchema, fonts, UnoCSS, scoped CSSreferences/07-config.md — complete headmatter schema + slidev.config.tsreferences/08-export-deploy.md — PDF, PPTX, static, GitHub Pages, Vercel, Netlify, CIreferences/09-live-demo-patterns.md — dual-pane layouts, demo choreography, fallback slidesreferences/10-troubleshooting.md — cache, Monaco, Playwright export, common errorsreferences/11-quality-checklist.md — pre-ship checks for content, frontmatter, speaker notes, runtime, accessibilityAsset templates (bundled, copy-then-modify):
assets/starter-deck.md — minimal deckassets/conference-talk-deck.md — 20–40 min narrative structureassets/workshop-deck.md — hands-on, dual-pane demo slotsassets/lightning-talk-deck.md — 5–10 min, punchyassets/package-json-template.json — reproducible Slidev + Playwright pinningOfficial: