| 1 | # Slidev Skills for Claude Code |
| 2 | |
| 3 | Agent skills that help Claude Code understand and work with [Slidev](https://sli.dev) presentations. |
| 4 | |
| 5 | ## Installation |
| 6 | |
| 7 | ```bash |
| 8 | npx skills add slidevjs/slidev |
| 9 | ``` |
| 10 | |
| 11 | This will add the Slidev skill to your Claude Code configuration. |
| 12 | |
| 13 | ## What's Included |
| 14 | |
| 15 | The Slidev skill provides Claude Code with knowledge about: |
| 16 | |
| 17 | - **Core Syntax** - Markdown syntax, slide separators, frontmatter |
| 18 | - **Animations** - Click animations, transitions, motion effects |
| 19 | - **Code Features** - Line highlighting, Monaco editor, code groups, magic-move |
| 20 | - **Diagrams** - Mermaid, PlantUML, LaTeX math |
| 21 | - **Layouts** - Built-in layouts, slots, global layers |
| 22 | - **Presenter Mode** - Recording, timer, remote access |
| 23 | - **Exporting** - PDF, PPTX, PNG, SPA hosting |
| 24 | |
| 25 | ## Usage |
| 26 | |
| 27 | Once installed, Claude Code will automatically use Slidev knowledge when: |
| 28 | |
| 29 | - Creating new presentations |
| 30 | - Adding slides with code examples |
| 31 | - Setting up animations and transitions |
| 32 | - Configuring themes and layouts |
| 33 | - Exporting presentations |
| 34 | |
| 35 | ### Example Prompts |
| 36 | |
| 37 | ``` |
| 38 | Create a Slidev presentation about TypeScript generics with code examples |
| 39 | ``` |
| 40 | |
| 41 | ``` |
| 42 | Add a two-column slide with code on the left and explanation on the right |
| 43 | ``` |
| 44 | |
| 45 | ``` |
| 46 | Set up click animations to reveal bullet points one by one |
| 47 | ``` |
| 48 | |
| 49 | ``` |
| 50 | Configure the presentation for PDF export with speaker notes |
| 51 | ``` |
| 52 | |
| 53 | ## Documentation |
| 54 | |
| 55 | - [Slidev Documentation](https://sli.dev) |
| 56 | - [Theme Gallery](https://sli.dev/resources/theme-gallery) |
| 57 | - [Showcases](https://sli.dev/resources/showcases) |
| 58 | |
| 59 | ## License |
| 60 | |
| 61 | MIT |
| 62 |