A powerful Agent Skill generated with Claude's official skill-creator for creating and managing Slidev presentations with rich features like animations, code highlighting, and interactive elements.
The Slidev Skill is an Agent Skill designed to assist with creating, enhancing, and managing Slidev presentations. It combines the flexibility of Markdown with the power of Vue.js to create modern, developer-friendly presentations. This skill was generated using Claude's official skill-creator tool, making it fully compatible with Claude agent systems.
This agent skill helps users:
- Generate Slidev format markdown files
- Create complete Slidev projects
- Implement advanced Slidev features
- Add rich animations and transitions
- Format code blocks with syntax highlighting
- Create interactive presentation elements
- Add speaker notes and click markers
- Utilize Shiki Magic Move for smooth code transitions
- Markdown-driven - Write slides using familiar Markdown syntax
- Vue 3 components - Leverage Vue.js power for interactive elements
- Real-time preview - See changes instantly during development
- Rich animations - Click animations, motion animations, and slide transitions
- Advanced code features - Syntax highlighting, Monaco editor integration, and Shiki Magic Move
- Mathematical formulas - Built-in LaTeX support
- Diagram support - Mermaid and PlantUML diagrams
- Speaker notes - Comprehensive speaker notes with click markers
- Customizable themes - Official and community themes with configuration options
- Multiple export options - PDF, PPTX, PNG, and static website
To create a Slidev presentation with this agent skill:
- Activate the Slidev Skill in your Claude agent environment
- Provide your presentation content requirements and preferences
- Let the agent skill generate the Slidev project structure and content
- Customize and enhance your slides as needed
- Use Slidev's development server to preview and refine your presentation
slidev-skill/
├── .trae/skills/slidev/ # Skill definition file (generated by Claude skill-creator)
├── slidev-skill/ # Example Slidev project
├── slidev/ # Slidev examples and resources
├── slidev动画.md # Slidev animation documentation
├── slidev补充特性.md # Slidev additional features documentation
├── slidev说明.md # Slidev usage documentation
├── test-slidev.md # Test file for Slidev features
└── README.md # This file
- Click Animations: Reveal content step-by-step with
<v-click>and<v-clicks> - Motion Animations: Smooth transitions with
<v-motion>directive - Slide Transitions: Custom transition effects between slides
- Enhanced Code Blocks: Line highlighting, focus, and line numbers
- Monaco Editor: Interactive code editing within slides
- Code Comparison: Side-by-side code differences
- Shiki Magic Move: Smooth transitions for code changes
- Speaker Notes: Private notes visible only in speaker view
- Click Markers: Synchronized note highlighting with slide progress
- Markdown Support: Rich formatting in notes
# Create a new Slidev project
pnpm create slidev
# Start development server
npm run dev
# Build for production
npm run build
# Export to PDF
slidev export --format pdfThe skill is defined in .trae/skills/slidev/SKILL.md with:
- Comprehensive feature documentation
- Usage guidelines and best practices
- Code examples for all features
- Project management recommendations
Contributions are welcome! Feel free to:
- Report issues
- Submit feature requests
- Create pull requests
MIT License - see LICENSE for details
For questions or support, please:
- Check the Slidev official documentation
- Join the Slidev Discord community
- Create an issue in the repository
Happy Slideving! 🚀