SkillsAdd

modelscope.cn

slidev

Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.

Installation

$ npx skills add https://modelscope.cn
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from modelscope.cn · top by installs.

npx skills add https://modelscope.cn
skill-creator 2K frontend-design 1.9K pptx-generator 1.3K minimax-docx 1.2K find-skills 1.1K minimax-xlsx 1.2K minimax-pdf 1.2K docx 942 self-improvement 932 pdf 914

Browse all from modelscope.cn

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 8,223 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

When to Use

  • Technical presentations with live code examples
  • Syntax-highlighted code snippets with animations
  • Interactive demos (Monaco editor, runnable code)
  • Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
  • Record presentations with presenter notes
  • Export to PDF, PPTX, or host as SPA

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->
  • --- separates slides
  • First frontmatter = headmatter (deck config)
  • HTML comments = presenter notes

Core References

Topic Description Reference
Markdown Syntax Slide separators, frontmatter, notes, code blocks [core-syntax](references/core-syntax.md)
Animations v-click, v-clicks, motion, transitions [core-animations](references/core-animations.md)
Headmatter Deck-wide configuration options [core-headmatter](references/core-headmatter.md)
Frontmatter Per-slide configuration options [core-frontmatter](references/core-frontmatter.md)
CLI Commands Dev, build, export, theme commands [core-cli](references/core-cli.md)
Components Built-in Vue components [core-components](references/core-components.md)
Layouts Built-in slide layouts [core-layouts](references/core-layouts.md)
Exporting PDF, PPTX, PNG export options [core-exporting](references/core-exporting.md)
Hosting Build and deploy to various platforms [core-hosting](references/core-hosting.md)
Global Context $nav, $slidev, composables API [core-global-context](references/core-global-context.md)

Feature Reference

Code & Editor

Feature Usage Reference
Line highlighting ` `ts {2,3} ` [code-line-highlighting](references/code-line-highlighting.md)
Click-based highlighting ` ``ts {1\ 2-3\ all} `` [code-line-highlighting](references/code-line-highlighting.md)
Line numbers lineNumbers: true or {lines:true} [code-line-numbers](references/code-line-numbers.md)
Scrollable code {maxHeight:'100px'} [code-max-height](references/code-max-height.md)
Code tabs ::code-group (requires mdc: true) [code-groups](references/code-groups.md)
Monaco editor ` `ts {monaco} ` [editor-monaco](references/editor-monaco.md)
Run code ` `ts {monaco-run} ` [editor-monaco-run](references/editor-monaco-run.md)
Edit files <<< ./file.ts {monaco-write} [editor-monaco-write](references/editor-monaco-write.md)
Code animations ` ``md magic-move ` [code-magic-move](references/code-magic-move.md)
TypeScript types ` `ts twoslash ` [code-twoslash](references/code-twoslash.md)
Import code <<< @/snippets/file.js [code-import-snippet](references/code-import-snippet.md)

Diagrams & Math

Feature Usage Reference
Mermaid diagrams ` `mermaid ` [diagram-mermaid](references/diagram-mermaid.md)
PlantUML diagrams ` `plantuml ` [diagram-plantuml](references/diagram-plantuml.md)
LaTeX math $inline$ or $$block$$ [diagram-latex](references/diagram-latex.md)

Layout & Styling

Feature Usage Reference
Canvas size canvasWidth, aspectRatio [layout-canvas-size](references/layout-canvas-size.md)
Zoom slide zoom: 0.8 [layout-zoom](references/layout-zoom.md)
Scale elements <Transform :scale="0.5"> [layout-transform](references/layout-transform.md)
Layout slots ::right::, ::default:: [layout-slots](references/layout-slots.md)
Scoped CSS <style> in slide [style-scoped](references/style-scoped.md)
Global layers global-top.vue, global-bottom.vue [layout-global-layers](references/layout-global-layers.md)
Draggable elements v-drag, <v-drag> [layout-draggable](references/layout-draggable.md)
Icons <mdi-icon-name /> [style-icons](references/style-icons.md)

Animation & Interaction

Feature Usage Reference
Click animations v-click, <v-clicks> [core-animations](references/core-animations.md)
Rough markers v-mark.underline, v-mark.circle [animation-rough-marker](references/animation-rough-marker.md)
Drawing mode Press C or config drawings: [animation-drawing](references/animation-drawing.md)
Direction styles forward:delay-300 [style-direction](references/style-direction.md)
Note highlighting [click] in notes [animation-click-marker](references/animation-click-marker.md)

Syntax Extensions

Feature Usage Reference
MDC syntax mdc: true + {style="color:red"} [syntax-mdc](references/syntax-mdc.md)
Block frontmatter ` `yaml instead of ---` [syntax-block-frontmatter](references/syntax-block-frontmatter.md)
Import slides src: ./other.md [syntax-importing-slides](references/syntax-importing-slides.md)
Merge frontmatter Main entry wins [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md)

Presenter & Recording

Feature Usage Reference
Recording Press G for camera [presenter-recording](references/presenter-recording.md)
Timer duration: 30min, timer: countdown [presenter-timer](references/presenter-timer.md)
Remote control slidev --remote [presenter-remote](references/presenter-remote.md)
Ruby text notesAutoRuby: [presenter-notes-ruby](references/presenter-notes-ruby.md)

Export & Build

Feature Usage Reference
Export options slidev export [core-exporting](references/core-exporting.md)
Build & deploy slidev build [core-hosting](references/core-hosting.md)
Build with PDF download: true [build-pdf](references/build-pdf.md)
Cache images Automatic for remote URLs [build-remote-assets](references/build-remote-assets.md)
OG image seoMeta.ogImage or og-image.png [build-og-image](references/build-og-image.md)
SEO tags seoMeta: [build-seo-meta](references/build-seo-meta.md)

Editor & Tools

Feature Usage Reference
Side editor Click edit icon [editor-side](references/editor-side.md)
VS Code extension Install antfu.slidev [editor-vscode](references/editor-vscode.md)
Prettier prettier-plugin-slidev [editor-prettier](references/editor-prettier.md)
Eject theme slidev theme eject [tool-eject-theme](references/tool-eject-theme.md)

Lifecycle & API

Feature Usage Reference
Slide hooks onSlideEnter(), onSlideLeave() [api-slide-hooks](references/api-slide-hooks.md)
Navigation API $nav, useNav() [core-global-context](references/core-global-context.md)

Common Layouts

Layout Purpose
cover Title/cover slide
center Centered content
default Standard slide
two-cols Two columns (use ::right::)
two-cols-header Header + two columns
image / image-left / image-right Image layouts
iframe / iframe-left / iframe-right Embed URLs
quote Quotation
section Section divider
fact / statement Data/statement display
intro / end Intro/end slides

Resources