{"id":"97aec024-61c8-4960-8d0a-f63331d26a1a","shortId":"HD989r","kind":"skill","title":"Slidev","tagline":"Skills skill by Antfu","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"],"capabilities":["skill","source-antfu","category-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/slidev","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under antfu/skills","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:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T21:40:15.722Z","embedding":null,"createdAt":"2026-04-18T20:26:37.980Z","updatedAt":"2026-04-23T21:40:15.722Z","lastSeenAt":"2026-04-23T21:40:15.722Z","tsv":"'-3':294 '/file.ts':355 '/snippets/file.js':385 '0.8':436 '1':292 '100px':316 '2':280,293 '3':281 '3030':89,116 'anim':39,174,185,365 'antfu':5 'api':264 'aspectratio':427 'base':13,289 'bash':75 'basic':130 'block':169,414 'build':92,93,210,249 'built':16,220,230 'built-in':219,229 'canva':424,430 'canvaswidth':426 'category-skills' 'check':121 'chromium':105 'cli':207,216 'click':177,180,288 'click-bas':287 'code':31,36,45,66,168,272,283,297,309,314,318,322,325,331,343,364,371,380,384,387 'code-group':324,330 'code-import-snippet':386 'code-line-highlight':282,296 'code-line-numb':308 'code-magic-mov':370 'code-max-height':317 'code-twoslash':379 'comark':328 'command':208,213 'comment':154 'compon':218,223,226 'compos':263 'config':152 'configur':191,201 'confirm':111 'content':140,145 'context':260,268 'core':157,171,184,194,204,215,225,235,245,256,266 'core-anim':183 'core-c':214 'core-compon':224 'core-export':244 'core-frontmatt':203 'core-global-context':265 'core-headmatt':193 'core-host':255 'core-layout':234 'core-syntax':170 'creat':77,79 'css':456 'deck':151,189 'deck-wid':188 'default':134,450 'demo':41 'deploy':251 'descript':160 'dev':83,85,110,209 'develop':10,69 'diagram':50,391,397,400,404,407,416 'diagram-latex':415 'diagram-mermaid':399 'diagram-plantuml':406 'edit':353 'editor':43,273,335,339,349,360 'editor-monaco':338 'editor-monaco-run':348 'editor-monaco-writ':359 'element':442 'equat':47 'exampl':32 'exist':125 'export':58,98,99,120,211,238,242,246 'featur':270,274,393,421 'file':354 'first':138,148 'frontmatt':149,166,197,205 'global':259,267 'group':326,332 'headmatt':150,187,195 'height':320 'highlight':35,278,285,290,299 'host':63,248,257 'html':153 'import':383,388 'inlin':412 'interact':40 'latex':48,410,417 'layout':228,233,236,419,429,438,444,447,452 'layout-canvas-s':428 'layout-slot':451 'layout-transform':443 'layout-zoom':437 'line':277,284,298,301,306,310 'linenumb':303 'live':30 'load':113 'localhost':88,115 'magic':368,372 'magic-mov':367 'maker':15 'markdown':21,162 'math':392,411 'mathemat':46 'max':319 'maxheight':315 'md':132,366 'mermaid':51,396,398,401 'monaco':42,334,337,340,346,350,357,361 'monaco-run':345 'monaco-writ':356 'motion':181 'move':369,373 'nav':261 'note':57,156,167 'number':302,311 'open':87 'option':192,202,243 'output':123 'pdf':60,101,124,239 'per':199 'per-slid':198 'plantuml':52,403,405,408 'platform':254 'playwright':104 'playwright-chromium':103 'png':241 'pnpm':76,81,90,96,108,118 'pptx':61,240 'present':7,26,54,56,137,155 'project':80,128 'quick':73 'record':53 'refer':158,161,271,276,395,423 'references/code-groups.md':333 'references/code-import-snippet.md':390 'references/code-line-highlighting.md':286,300 'references/code-line-numbers.md':312 'references/code-magic-move.md':374 'references/code-max-height.md':321 'references/code-twoslash.md':382 'references/core-animations.md':186 'references/core-cli.md':217 'references/core-components.md':227 'references/core-exporting.md':247 'references/core-frontmatter.md':206 'references/core-global-context.md':269 'references/core-headmatter.md':196 'references/core-hosting.md':258 'references/core-layouts.md':237 'references/core-syntax.md':173 'references/diagram-latex.md':418 'references/diagram-mermaid.md':402 'references/diagram-plantuml.md':409 'references/editor-monaco-run.md':352 'references/editor-monaco-write.md':363 'references/editor-monaco.md':341 'references/layout-canvas-size.md':432 'references/layout-slots.md':454 'references/layout-transform.md':446 'references/layout-zoom.md':440 'requir':102,327 'right':449 'root':129 'run':82,91,97,109,119,342,347,351 'runnabl':44 'scale':441 'scope':455 'scrollabl':313 'second':142 'separ':146,165 'server':86 'size':425,431 'skill':2,3 'slide':8,14,112,139,143,147,164,200,232,434 'slidedeck':28 'slidev':1,6,78,262 'slot':448,453 'snippet':37,389 'source-antfu' 'spa':65,95 'start':74,84 'static':94 'style':420 'syntax':34,131,163,172 'syntax-highlight':33 'tab':323 'talk':70 'technic':25 'theme':133,212 'titl':135 'topic':159 'transform':445 'transit':182 'true':304,307,329 'ts':279,291,336,344,377 'twoslash':378,381 'type':376 'typescript':375 'usag':275,394,422 'use':24 'v':176,179 'v-click':175,178 'various':253 'verifi':106 'vite':18 'vue':19,222 'walkthrough':67 'web':12 'web-bas':11 'wide':190 'workshop':72 'write':358,362 'zoom':433,435,439","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-04-23T18:53:29.536Z"},{"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-04-23T21:40:15.722Z"}],"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","source":"skills_sh","category":"skills","skills_sh_url":"https://skills.sh/antfu/skills/slidev"},"updatedAt":"2026-04-23T21:40:15.722Z"}}