yoanbernabeu/slidev-skills
20 skills2.6k installsGitHub
Install
npx skills add https://github.com/yoanbernabeu/slidev-skillsSkills in this repo
1Slidev Stylingslidev-styling is a skill that teaches comprehensive visual customization of Slidev presentations, covering UnoCSS atomic utilities, custom CSS, scoped styles, animations, and responsive layouts. It is the go-to reference when you want to move beyond default Slidev themes and craft a distinctive, polished look for your slide deck. Solo builders will reach for it when personalizing colors, typography, animations, or building reusable design patterns across slides.181installs2Slidev Themesslidev-themes covers how to use, customize, and build themes for Slidev presentations, providing consistent styling, layouts, and component libraries across your slide deck. It walks through theme selection, color customization, ejecting for modification, and creating themes from scratch. Solo builders use it when they want polished, branded developer presentations rather than bare-bones default styles.175installs3Slidev Quick Startslidev-quick-start is the entry-point skill for Slidev, the developer presentation framework. It guides you through creating a new presentation project, learning fundamental Markdown-based syntax, launching a local preview, and migrating from other formats. Solo builders use it when starting their first Slidev presentation or onboarding teammates who are new to the tool.174installs4Slidev Syntax Guideslidev-syntax-guide is a comprehensive reference skill for Slidev developers learning the framework's extended Markdown syntax. It covers slide separators, frontmatter configuration, speaker notes, MDC components, and special formatting options that go beyond standard Markdown. Reach for this skill when authoring complex Slidev content, adapting standard Markdown into Slidev format, or debugging syntax-related issues in your presentation.161installs5Slidev Drawingsslidev-drawings adds real-time drawing and annotation capabilities to Slidev presentations using the drauu library. Presenters can highlight content, sketch diagrams, and annotate slides live during a talk without leaving the presentation environment. Reach for this skill when building interactive or teaching-focused slide decks where on-the-fly visual emphasis is needed.144installs6Slidev Project Structureslidev-project-structure explains the complete anatomy of a Slidev project, covering the standard directory layout, configuration files, custom component directories, layout overrides, theme integration, and proper placement of assets and stylesheets. Solo builders use it when setting up a complex Slidev project beyond the basics, or when debugging why custom components or layouts are not being picked up correctly.137installs7Slidev Layoutsslidev-layouts is a skill that teaches developers how to use and customize Slidev slide layouts, covering built-in options like multi-column arrangements and background images configured through frontmatter. It also guides building custom layout components for personalized presentation structures. Reach for this skill when you need to organize slide content visually or want a layout that goes beyond Slidev defaults.121installs8Slidev Plantumlslidev-plantuml is a Slidev skill that integrates PlantUML diagramming directly into presentation slides using a dedicated plantuml code block. It supports the full range of UML diagram types including sequence, component, deployment, use case, and C4 architecture diagrams. Reach for this skill when your Slidev technical presentation requires precise UML notation with more control than Mermaid provides.121installs9Slidev Latexslidev-latex is a Slidev skill that adds LaTeX mathematical formula rendering to presentation slides via the KaTeX library. It supports both inline math (using $ delimiters) and full display math blocks, making it essential for academics, engineers, and scientists creating technical slide decks. Reach for this skill whenever your Slidev presentation needs equations, scientific notation, or mathematical content.119installs10Slidev Mermaidslidev-mermaid teaches you how to embed Mermaid diagram syntax directly into Slidev presentation slides, enabling you to create flowcharts, sequence diagrams, class diagrams, Gantt charts, and more using simple text. Diagrams are code-based, so they are version-controllable and easy to update. Solo builders reach for it when building technical presentations that need visual architecture or workflow diagrams without leaving their code editor.118installs11Slidev Exportslidev-export is a skill that guides developers through exporting Slidev presentations into shareable static formats including PDF, PPTX, PNG images, and Markdown. It covers the built-in browser exporter introduced in Slidev v0.50.0 and various configuration options for each format. Reach for this skill when your presentation is ready and you need to share it without requiring recipients to run Slidev, print it, or archive it.115installs12Slidev Transitionsslidev-transitions covers how to add smooth animated transitions between slides in Slidev, supporting built-in effects, custom CSS animations, and directional transitions that respond to navigation direction. Transitions can be set globally or per-slide via frontmatter. Solo builders use it when adding visual polish to developer presentations to make slide changes feel intentional rather than abrupt.114installs13Slidev Monaco Editorslidev-monaco-editor integrates Monaco Editor — the engine powering VS Code — directly into Slidev presentation slides by adding a simple {monaco} annotation to any code block. It turns static code examples into interactive live editors with auto-completion and type hints. A solo developer or educator reaches for it when building presentation slides that require live coding demonstrations, real-time code execution, or interactive programming exercises.113installs14Slidev Click Animationsslidev-click-animations is a skill that teaches Slidev click-based animation directives including v-click, v-after, v-clicks, v-switch, and motion effects. These enable progressive content revelation, step-by-step diagram construction, and interactive audience engagement. Reach for this skill when you want to reveal slide content incrementally, build suspense, or guide your audience through complex information in a structured sequence.111installs15Slidev Code Blocksslidev-code-blocks is a Slidev skill that enables rich code presentation features including Shiki syntax highlighting, line-level emphasis, animated progressive reveals, and direct import from source files. It lets developers show actual source files rather than manually copy-pasting code snippets and keeps slides in sync with real code. Reach for it when building technical talks or tutorials in Slidev where code clarity and step-by-step explanation matter.111installs16Slidev Componentsslidev-components teaches developers how to use Vue components within Slidev presentations, covering the full built-in component library and the process of building custom interactive elements. Components embed directly into Markdown slide files, enabling dynamic content without complex tooling. Reach for it when you want to add interactive features, reusable elements, or dynamic content to a Slidev presentation and need guidance on the component system.109installs17Slidev Navigationslidev-navigation is a skill that covers all navigation capabilities in Slidev presentations, from built-in keyboard shortcuts and the navigation bar to overview mode and fully custom navigation components. It helps developers understand the default controls and customize them to fit specific presentation styles or audience needs. Reach for it when setting up a Slidev project and wanting to tailor how presenters and viewers move through slides.109installs18Slidev Presenter Modeslidev-presenter-mode is a skill that enables Slidev professional presenter mode features for live talks, covering speaker notes, built-in timers, slide overview, and remote control from a mobile device. It is ideal for dual-screen presentation setups where the presenter needs private notes and navigation tools. Reach for this skill when preparing to deliver a live Slidev presentation and needing speaker support features.108installs19Slidev Magic Moveslidev-magic-move brings Shiki Magic Move animated code transitions to Slidev presentations, creating smooth animated effects between two code states by tracking token changes, moves, additions, and removals. It produces an effect similar to Keynote Magic Move but specialized for code blocks. Reach for this skill when your Slidev presentation needs to demonstrate code evolution, refactoring, or step-by-step transformations with polished animated transitions.107installs20Slidev Deploymentslidev-deployment is a skill that guides deploying Slidev presentations as static websites to various hosting platforms. It covers the build command, deployment targets, CI/CD pipeline setup for automated publishing, and embedding presentations into other sites. Reach for it when a presentation is ready to share publicly via URL, whether for a conference, permanent archive, or continuous deployment workflow.104installs