{"id":"97aec024-61c8-4960-8d0a-f63331d26a1a","shortId":"HD989r","kind":"skill","title":"slidev","tagline":"Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.","description":"# Slidev - Presentation Slides for Developers\n\nWeb-based slides maker built on Vite, Vue, and Markdown.\n\n## When to Use\n\n- Technical presentations or slidedecks with live code examples\n- Syntax-highlighted code snippets with animations\n- Interactive demos (Monaco editor, runnable code)\n- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)\n- Record presentations with presenter notes\n- Export to PDF, PPTX, or host as SPA\n- Code walkthroughs for developer talks or workshops\n\n## Quick Start\n\n```bash\npnpm create slidev    # Create project\npnpm run dev          # Start dev server (opens http://localhost:3030)\npnpm run build        # Build static SPA\npnpm run export       # Export to PDF (requires playwright-chromium)\n```\n\n**Verify**: After `pnpm run dev`, confirm slides load at `http://localhost:3030`. After `pnpm run export`, check the output PDF exists in the project root.\n\n## Basic Syntax\n\n```md\n---\ntheme: default\ntitle: My Presentation\n---\n\n# First Slide\n\nContent here\n\n---\n\n# Second Slide\n\nMore content\n\n<!--\nPresenter notes go here\n-->\n```\n\n- `---` separates slides\n- First frontmatter = headmatter (deck config)\n- HTML comments = presenter notes\n\n## Core References\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |\n| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |\n| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |\n| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |\n| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |\n| Components | Built-in Vue components | [core-components](references/core-components.md) |\n| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |\n| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |\n| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |\n| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |\n\n## Feature Reference\n\n### Code & Editor\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |\n| Click-based highlighting | `` ```ts {1\\|2-3\\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |\n| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |\n| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |\n| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) |\n| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |\n| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |\n| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |\n| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |\n| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |\n| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |\n\n### Diagrams & Math\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |\n| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |\n| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |\n\n### Layout & Styling\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |\n| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |\n| Scale elements | `<Transform :scale=\"0.5\">` | [layout-transform](references/layout-transform.md) |\n| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |\n| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |\n| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |\n| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |\n| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |\n\n### Animation & Interaction\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |\n| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |\n| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |\n| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |\n| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |\n\n### Syntax Extensions\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Comark syntax | `comark: true` + `{style=\"color:red\"}` | [syntax-comark](references/syntax-comark.md) |\n| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |\n| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |\n| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |\n\n### Presenter & Recording\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |\n| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |\n| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |\n| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |\n\n### Export & Build\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |\n| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |\n| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |\n| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |\n| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |\n| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |\n\n**Export prerequisite**: `pnpm add -D playwright-chromium` is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.\n\n### Editor & Tools\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Side editor | Click edit icon | [editor-side](references/editor-side.md) |\n| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |\n| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |\n| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |\n\n### Lifecycle & API\n\n| Feature | Usage | Reference |\n|---------|-------|-----------|\n| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |\n| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |\n\n## Common Layouts\n\n| Layout | Purpose |\n|--------|---------|\n| `cover` | Title/cover slide |\n| `center` | Centered content |\n| `default` | Standard slide |\n| `two-cols` | Two columns (use `::right::`) |\n| `two-cols-header` | Header + two columns |\n| `image` / `image-left` / `image-right` | Image layouts |\n| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |\n| `quote` | Quotation |\n| `section` | Section divider |\n| `fact` / `statement` | Data/statement display |\n| `intro` / `end` | Intro/end slides |\n\n## Resources\n\n- Documentation: https://sli.dev\n- Theme Gallery: https://sli.dev/resources/theme-gallery\n- Showcases: https://sli.dev/resources/showcases","tags":["slidev","skills","antfu","agent-skills"],"capabilities":["skill","source-antfu","skill-slidev","topic-agent-skills","topic-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/slidev","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add antfu/skills","source_repo":"https://github.com/antfu/skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 4987 github stars · SKILL.md body (8,470 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:45.707Z","embedding":null,"createdAt":"2026-04-18T20:26:37.980Z","updatedAt":"2026-05-18T18:52:45.707Z","lastSeenAt":"2026-05-18T18:52:45.707Z","tsv":"'-3':325 '/file.ts':386 '/snippets/file.js':416 '0.8':467 '1':323 '100px':347 '2':311,324 '3':312 '3030':120,147 'anim':19,70,205,216,396 'api':295 'aspectratio':458 'base':7,44,320 'bash':106 'basic':161 'block':200,445 'build':25,123,124,241,280 'built':47,251,261 'built-in':250,260 'canva':455,461 'canvaswidth':457 'check':152 'chromium':136 'cli':238,247 'click':208,211,319 'click-bas':318 'code':17,30,62,67,76,97,199,303,314,328,340,345,349,353,356,362,374,395,402,411,415,418 'code-group':355,361 'code-import-snippet':417 'code-line-highlight':313,327 'code-line-numb':339 'code-magic-mov':401 'code-max-height':348 'code-twoslash':410 'comark':359 'command':239,244 'comment':185 'compon':16,249,254,257 'compos':294 'confer':28 'config':183 'configur':222,232 'confirm':142 'content':171,176 'context':291,299 'core':188,202,215,225,235,246,256,266,276,287,297 'core-anim':214 'core-c':245 'core-compon':255 'core-export':275 'core-frontmatt':234 'core-global-context':296 'core-headmatt':224 'core-host':286 'core-layout':265 'core-syntax':201 'creat':2,108,110 'css':487 'deck':36,182,220 'deck-wid':219 'default':165,481 'demo':72 'deploy':282 'descript':191 'dev':114,116,141,240 'develop':10,35,41,100 'diagram':81,422,428,431,435,438,447 'diagram-latex':446 'diagram-mermaid':430 'diagram-plantuml':437 'edit':384 'editor':74,304,366,370,380,391 'editor-monaco':369 'editor-monaco-run':379 'editor-monaco-writ':390 'element':473 'equat':78 'exampl':63 'exist':156 'export':89,129,130,151,242,269,273,277 'featur':22,301,305,424,452 'file':385 'first':169,179 'frontmatt':180,197,228,236 'global':290,298 'group':357,363 'headmatt':181,218,226 'height':351 'highlight':18,66,309,316,321,330 'host':94,279,288 'html':184 'import':414,419 'inlin':443 'interact':21,71 'latex':79,441,448 'layout':259,264,267,450,460,469,475,478,483 'layout-canvas-s':459 'layout-slot':482 'layout-transform':474 'layout-zoom':468 'line':308,315,329,332,337,341 'linenumb':334 'live':61 'load':144 'localhost':119,146 'magic':399,403 'magic-mov':398 'maker':46 'markdown':14,52,193 'materi':33 'math':423,442 'mathemat':77 'max':350 'maxheight':346 'md':163,397 'mermaid':82,427,429,432 'monaco':73,365,368,371,377,381,388,392 'monaco-run':376 'monaco-writ':387 'motion':212 'move':400,404 'nav':292 'note':88,187,198 'number':333,342 'open':118 'option':223,233,274 'output':154 'pdf':91,132,155,270 'per':230 'per-slid':229 'plantuml':83,434,436,439 'platform':285 'playwright':135 'playwright-chromium':134 'png':272 'pnpm':107,112,121,127,139,149 'pptx':92,271 'present':4,27,38,57,85,87,168,186 'project':111,159 'quick':104 'record':84 'refer':189,192,302,307,426,454 'references/code-groups.md':364 'references/code-import-snippet.md':421 'references/code-line-highlighting.md':317,331 'references/code-line-numbers.md':343 'references/code-magic-move.md':405 'references/code-max-height.md':352 'references/code-twoslash.md':413 'references/core-animations.md':217 'references/core-cli.md':248 'references/core-components.md':258 'references/core-exporting.md':278 'references/core-frontmatter.md':237 'references/core-global-context.md':300 'references/core-headmatter.md':227 'references/core-hosting.md':289 'references/core-layouts.md':268 'references/core-syntax.md':204 'references/diagram-latex.md':449 'references/diagram-mermaid.md':433 'references/diagram-plantuml.md':440 'references/editor-monaco-run.md':383 'references/editor-monaco-write.md':394 'references/editor-monaco.md':372 'references/layout-canvas-size.md':463 'references/layout-slots.md':485 'references/layout-transform.md':477 'references/layout-zoom.md':471 'requir':133,358 'right':480 'root':160 'run':113,122,128,140,150,373,378,382 'runnabl':75 'scale':472 'scope':486 'scrollabl':344 'second':173 'separ':177,196 'server':117 'size':456,462 'skill' 'skill-slidev' 'slide':39,45,143,170,174,178,195,231,263,465 'slidedeck':8,59 'slidev':1,12,37,109,293 'slot':479,484 'snippet':68,420 'source-antfu' 'spa':96,126 'start':105,115 'static':125 'style':451 'syntax':65,162,194,203 'syntax-highlight':64 'tab':354 'talk':29,101 'teach':32 'technic':26,56 'theme':164,243 'titl':166 'topic':190 'topic-agent-skills' 'topic-skills' 'transform':476 'transit':213 'true':335,338,360 'ts':310,322,367,375,408 'twoslash':409,412 'type':407 'typescript':406 'usag':306,425,453 'use':11,23,55 'v':207,210 'v-click':206,209 'various':284 'verifi':137 'vite':49 'vue':15,50,253 'walkthrough':31,98 'web':6,43 'web-bas':5,42 'wide':221 'workshop':103 'write':389,393 'zoom':464,466,470","prices":[{"id":"352724de-3972-4109-b26c-6709b06f3be0","listingId":"97aec024-61c8-4960-8d0a-f63331d26a1a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"antfu","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:26:37.980Z"}],"sources":[{"listingId":"97aec024-61c8-4960-8d0a-f63331d26a1a","source":"github","sourceId":"antfu/skills/slidev","sourceUrl":"https://github.com/antfu/skills/tree/main/skills/slidev","isPrimary":false,"firstSeenAt":"2026-04-18T21:53:48.929Z","lastSeenAt":"2026-05-18T18:52:45.707Z"},{"listingId":"97aec024-61c8-4960-8d0a-f63331d26a1a","source":"skills_sh","sourceId":"antfu/skills/slidev","sourceUrl":"https://skills.sh/antfu/skills/slidev","isPrimary":true,"firstSeenAt":"2026-04-18T20:26:37.980Z","lastSeenAt":"2026-05-07T22:40:19.337Z"}],"details":{"listingId":"97aec024-61c8-4960-8d0a-f63331d26a1a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"antfu","slug":"slidev","github":{"repo":"antfu/skills","stars":4987,"topics":["agent-skills","skills"],"license":"mit","html_url":"https://github.com/antfu/skills","pushed_at":"2026-05-01T16:46:24Z","description":"Anthony Fu's curated collection of agent skills.","skill_md_sha":"35c34842293e0ab3945dc1be8c562640c6c75e0c","skill_md_path":"skills/slidev/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/antfu/skills/tree/main/skills/slidev"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"slidev","description":"Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks."},"skills_sh_url":"https://skills.sh/antfu/skills/slidev"},"updatedAt":"2026-05-18T18:52:45.707Z"}}