Menu
Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
专业的代码审查助手，提供结构化的审查流程、详细的检查清单和建设性的反馈指南。适用于审查Pull Request、代码提交或任何需要代码质量评估的场景，涵盖功能性、安全性、性能、测试、文档、架构设计等多个维度。
Frontend-focused code review skill for React/TypeScript/Tailwind projects. Analyzes code quality, security vulnerabilities (XSS, CSRF), performance issues, accessibility (WCAG), React best practices, hooks usage, component architecture, responsive design, and SEO. Use when users request code review, want feedback on components, ask about frontend security, performance optimization, or accessibility compliance. Provides actionable feedback with severity levels and fix suggestions.
| 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