{
  "markdown": "<p align=\"center\">\n  <img src=\"https://img.shields.io/badge/Skills-20-brightgreen\" alt=\"20 Skills\">\n  <img src=\"https://img.shields.io/badge/License-MIT-blue\" alt=\"MIT License\">\n  <img src=\"https://img.shields.io/badge/PRs-Welcome-orange\" alt=\"PRs Welcome\">\n  <img src=\"https://img.shields.io/github/stars/yoanbernabeu/slidev-skills?style=social\" alt=\"GitHub Stars\">\n</p>\n\n<h1 align=\"center\">Slidev Skills</h1>\n\n<p align=\"center\">\n  <strong>20 AI Agent Skills to create stunning presentations with Slidev.</strong><br>\n  Syntax, layouts, animations, code highlighting, diagrams — everything you need.\n</p>\n\n<p align=\"center\">\n  <a href=\"#quick-install\">Install</a> •\n  <a href=\"#all-20-skills\">Skills</a> •\n  <a href=\"#example-usage\">Usage</a> •\n  <a href=\"#contributing\">Contribute</a>\n</p>\n\n---\n\n## Quick Install\n\n```bash\nnpx skills add yoanbernabeu/slidev-skills\n```\n\n**That's it.** Works with Claude Code, Cursor, Codex, OpenCode, Windsurf, and 30+ AI agents.\n\n### One-Liners\n\n```bash\n# Install everything (20 skills)\nnpx skills add yoanbernabeu/slidev-skills\n\n# Install only code-related skills\nnpx skills add yoanbernabeu/slidev-skills --skill slidev-code-blocks\n\n# Install globally (available in all projects)\nnpx skills add yoanbernabeu/slidev-skills -g\n\n# List all available skills\nnpx skills add yoanbernabeu/slidev-skills --list\n\n# Install to specific agents\nnpx skills add yoanbernabeu/slidev-skills -a claude-code -a cursor\n\n# Non-interactive (CI/CD friendly)\nnpx skills add yoanbernabeu/slidev-skills --all -y\n```\n\n### Other Installation Methods\n\n<details>\n<summary><strong>Claude Code Plugin</strong></summary>\n\n```bash\n/install-skill yoanbernabeu/slidev-skills\n```\n</details>\n\n<details>\n<summary><strong>Manual Installation</strong></summary>\n\nCopy the `skills/` directory to:\n- **Global**: `~/.claude/skills/` (or `~/.cursor/skills/`, etc.)\n- **Project**: `.claude/skills/` (or `.cursor/skills/`, etc.)\n</details>\n\n---\n\n## Why These Skills?\n\nCreating presentations as a developer can be **tedious**. PowerPoint feels dated, Google Slides lacks code support, and starting from scratch takes forever. [Slidev](https://sli.dev) is the answer — but it has a learning curve. These skills give your AI agent **expert-level knowledge** of Slidev so you can focus on your content.\n\n| Challenge | Skill That Helps |\n|-----------|------------------|\n| \"How do I start a presentation?\" | `slidev-quick-start` |\n| \"My code looks ugly\" | `slidev-code-blocks` |\n| \"I want animated code transitions\" | `slidev-magic-move` |\n| \"How do I add diagrams?\" | `slidev-mermaid` |\n| \"I need click animations\" | `slidev-click-animations` |\n| \"How do I export to PDF?\" | `slidev-export` |\n\n---\n\n## All 20 Skills\n\n### Getting Started\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-quick-start` | Create your first presentation in minutes |\n| `slidev-project-structure` | Understand configuration and file organization |\n\n### Content Creation\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-syntax-guide` | Master Slidev's extended Markdown syntax |\n| `slidev-layouts` | Use cover, two-cols, image layouts and more |\n| `slidev-components` | Add Vue components for interactivity |\n\n### Code Presentation\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-code-blocks` | Beautiful syntax highlighting with Shiki |\n| `slidev-magic-move` | Animate code transformations smoothly |\n| `slidev-monaco-editor` | Live coding with Monaco Editor |\n\n### Visual Content\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-mermaid` | Create flowcharts, sequence diagrams, etc. |\n| `slidev-plantuml` | Professional UML and C4 diagrams |\n| `slidev-latex` | Mathematical formulas with KaTeX |\n\n### Animations\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-click-animations` | v-click, v-after, and motion directives |\n| `slidev-transitions` | Smooth slide transitions |\n\n### Presentation\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-presenter-mode` | Speaker notes, timer, remote control |\n| `slidev-drawings` | Draw and annotate during presentations |\n| `slidev-navigation` | Keyboard shortcuts and navigation |\n\n### Customization\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-themes` | Use and customize themes |\n| `slidev-styling` | Style with UnoCSS and custom CSS |\n\n### Export & Deploy\n| Skill | What It Does |\n|-------|--------------|\n| `slidev-export` | Export to PDF, PPTX, PNG |\n| `slidev-deployment` | Deploy to GitHub Pages, Netlify, Vercel |\n\n---\n\n## Example Usage\n\n### Create a Technical Presentation\n\n```\nYou: Create a presentation about React hooks using Slidev\n\nAI: [Uses slidev-quick-start to scaffold project]\n    [Uses slidev-layouts for proper structure]\n    [Uses slidev-code-blocks for syntax highlighting]\n    [Uses slidev-magic-move for code evolution]\n    [Uses slidev-click-animations for progressive reveals]\n```\n\n### Add a System Architecture Diagram\n\n```\nYou: Add a diagram showing our microservices architecture\n\nAI: [Uses slidev-mermaid to create flowchart]\n    [Uses slidev-layouts for proper positioning]\n```\n\n### Export for Conference\n\n```\nYou: Export this presentation as PDF for the conference\n\nAI: [Uses slidev-export with proper options]\n    [Suggests --with-clicks for handout version]\n```\n\n---\n\n## Skill Packs\n\nInstall skills by category:\n\n| Pack | Skills | Description |\n|------|--------|-------------|\n| `slidev-getting-started` | 2 | Quick start, project structure |\n| `slidev-content` | 3 | Syntax guide, layouts, components |\n| `slidev-code` | 3 | Code blocks, magic move, Monaco |\n| `slidev-visuals` | 3 | Mermaid, PlantUML, LaTeX |\n| `slidev-animations` | 2 | Click animations, transitions |\n| `slidev-presentation` | 3 | Presenter mode, drawings, navigation |\n| `slidev-customization` | 2 | Themes, styling |\n| `slidev-export` | 2 | Export, deployment |\n| **`slidev-complete`** | **20** | **All skills — complete toolkit** |\n\n---\n\n## Supported AI Agents\n\n| Agent | Project Path | Global Path |\n|-------|--------------|-------------|\n| Claude Code | `.claude/skills/` | `~/.claude/skills/` |\n| Cursor | `.cursor/skills/` | `~/.cursor/skills/` |\n| Codex | `.codex/skills/` | `~/.codex/skills/` |\n| OpenCode | `.opencode/skill/` | `~/.config/opencode/skill/` |\n| Windsurf | `.windsurf/skills/` | `~/.windsurf/skills/` |\n\n---\n\n## Quick Reference\n\n### Essential Commands\n\n```bash\n# Create new presentation\nnpm init slidev@latest\n\n# Start dev server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Export to PDF\nnpm run export\n```\n\n### Basic Slide Syntax\n\n```markdown\n---\ntheme: seriph\ntitle: My Presentation\n---\n\n# Slide 1\n\nWelcome to my presentation!\n\n---\n\n# Slide 2\n\n- Point 1\n- Point 2\n- Point 3\n\n---\nlayout: center\n---\n\n# Centered Content\n```\n\n### Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| `Space` / `→` | Next |\n| `←` | Previous |\n| `o` | Overview |\n| `d` | Dark mode |\n| `f` | Fullscreen |\n\n---\n\n## What is Slidev?\n\n[Slidev](https://sli.dev) (slide + dev) is a presentation framework for developers:\n\n- **Markdown-based** — Write slides in familiar Markdown\n- **Vue 3 Powered** — Use Vue components for interactivity\n- **Developer Friendly** — First-class code support with Shiki\n- **Live Coding** — Built-in Monaco Editor\n- **Diagrams** — Mermaid and PlantUML support\n- **Math** — LaTeX/KaTeX for formulas\n- **Animations** — Click animations and transitions\n- **Export** — PDF, PPTX, PNG, or host as SPA\n\n---\n\n## Resources\n\n- [Slidev Documentation](https://sli.dev/)\n- [GitHub Repository](https://github.com/slidevjs/slidev)\n- [Theme Gallery](https://sli.dev/resources/theme-gallery)\n- [Addon Gallery](https://sli.dev/resources/addon-gallery)\n- [Discord Community](https://chat.sli.dev/)\n- [Skills CLI](https://github.com/vercel-labs/skills) - The open agent skills tool\n- [Skills Directory](https://skills.sh) - Browse available skills\n\n---\n\n## Contributing\n\nContributions are welcome! Please read the [Contributing Guide](./CONTRIBUTING.md) before submitting a pull request.\n\n### How to Add a Skill\n\n1. Fork the repository\n2. Create `skills/[category]/[skill-id]/SKILL.md`\n3. Follow the format in existing skills\n4. Update `marketplace.json`\n5. Submit a PR\n\n---\n\n## License\n\nMIT License — see [LICENSE](./LICENSE) for details.\n\n---\n\n<p align=\"center\">\n  <sub>Made with ❤️ for developers who present</sub>\n</p>\n",
  "bytes": 8337,
  "sha": "b5ad6e96cc93f02a4d836b16c89b5d1eecb0e37eb055abc7a20e7478d10ec79f",
  "repo_slug": "yoanbernabeu/slidev-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_yoanbernabeu_slidev_skills_slidev_quick__a4c946ed/readme"
}