// Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications
| name | slidev |
| description | Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications |
This skill helps create and edit presentation slides using Slidev, a markdown-based presentation framework for developers.
Use this skill when the user asks to:
Slides are located in packages/slides/ directory with:
*.slides.md or slides.mdcomponents/ directory for Vue componentspackage.json for dependenciesStart the development server:
pnpm run slides [filename]
The dev server runs on http://localhost:3030 by default.
Every Slidev file starts with YAML frontmatter:
---
theme: seriph # or 'default'
title: Your Presentation Title
info: |
## Presentation description
Additional info here
class: text-center
drawings:
persist: false
transition: slide-left # fade-out, slide-up, etc.
mdc: true
duration: 10min
---
Slides are separated by ---:
---
# Slide 1
Content here
---
# Slide 2
More content
Individual slides can have frontmatter:
---
layout: center
class: text-center
---
# Centered Slide
default - Standard layoutcenter - Centered contenttwo-cols - Two column layoutimage-right - Image on right sidecover - Cover slide---
layout: two-cols
---
# Left Column
Content here
::right::
# Right Column
Content here
Use v-click for progressive reveals:
<v-click>
Content appears on click
</v-click>
<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>
Use Vue components in slides:
Custom one are stored packages/slides/components directory
<Counter :count="10" />
Syntax highlighting with line highlighting:
```ts {1|3|1-3}
const message = "Hello"
console.log(message)
```
Add notes in HTML comments at the end of slides:
---
# Slide Title
Content
<!--
These are presenter notes
Only visible in presenter mode
-->
# Development
pnpm run slides [filename]
# Build static version
pnpm --filter @chris-towles/slides run build
# Export to PDF
pnpm --filter @chris-towles/slides run export
Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
AI SDK-based image generation using official OpenAI and Google APIs. Supports text-to-image, reference images, aspect ratios, and quality presets.
A fundamental skill that demonstrates the basic execution of a Python script. It serves as a "Hello, World!" example for the skill system, verifying that the environment is correctly set up and that the agent can execute scripts.
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
Comprehensive CrewAI framework guide for building collaborative AI agent teams and structured workflows. Use when developing multi-agent systems with CrewAI, creating autonomous AI crews, orchestrating flows, implementing agents with roles and tools, or building production-ready AI automation. Essential for developers building intelligent agent systems, task automation, and complex AI workflows.
Convert various file formats (PDF, Office documents, images, audio, web content, structured data) to Markdown optimized for LLM processing. Use when converting documents to markdown, extracting text from PDFs/Office files, transcribing audio, performing OCR on images, extracting YouTube transcripts, or processing batches of files. Supports 20+ formats including DOCX, XLSX, PPTX, PDF, HTML, EPUB, CSV, JSON, images with OCR, and audio with transcription.