// Create and manage Slidev presentation decks. Use when user asks to "create slides", "make a presentation", "add slides to this project", "set up a slide deck", or mentions "slidev", "pitch deck", or "slides folder".
| name | slides |
| description | Create and manage Slidev presentation decks. Use when user asks to "create slides", "make a presentation", "add slides to this project", "set up a slide deck", or mentions "slidev", "pitch deck", or "slides folder". |
Scaffold and manage Slidev markdown slide decks in any project.
Ask the user where to create the slides folder. Suggest ./slides as default.
Create the following structure:
<slides-dir>/
├── slides.md # Slide content (Slidev markdown)
├── package.json # Slidev dependencies
├── Makefile # Convenience targets
└── public/ # Static assets (images, diagrams)
package.json{
"name": "slides",
"private": true,
"scripts": {
"dev": "slidev slides.md --open",
"build": "slidev build slides.md",
"export": "slidev export slides.md"
},
"dependencies": {
"@slidev/cli": "^52.11.5",
"@slidev/theme-default": "^0.25.0"
}
}
Makefile.PHONY: slides slides-build slides-export slides-setup
slides: node_modules ## Open slides in browser with hot-reload
npx slidev slides.md --open
slides-build: node_modules ## Build static SPA to ./dist
npx slidev build slides.md
slides-export: node_modules ## Export slides to PDF
npx slidev export slides.md
slides-setup: ## Install dependencies
npm install
node_modules: package.json
npm install
@touch node_modules
slides.md (starter)Generate a title slide using the project name. Use this template:
---
theme: default
title: "<Project Name>"
---
# <Project Name>
<One-line project description from README or user prompt.>
---
# Overview
- Point one
- Point two
- Point three
Run npm install inside the slides folder.
If a .gitignore exists in the slides folder or project root, ensure node_modules/ and dist/ are ignored. Check before adding to avoid duplicates.
When asked to generate or write slide content:
--- separates slidespublic/ and are referenced as /image.pngslides.md---
theme: default
title: "Deck Title"
---
# Slide Title
Regular markdown content.
---
# Code Slide
\`\`\`python
def hello():
print("hello")
\`\`\`
---
# Image Slide
<img src="/diagram.png" class="h-80" />
---
layout: two-cols
---
# Left Column
Content here.
::right::
# Right Column
Content here.
---
layout: center
---
# Centered Content
Big statement.
default — standard contentcenter — centered on pagetwo-cols — split with ::right:: separatorimage-right / image-left — content + image side by sidecover — title/cover slidesection — section dividerKeep slides.md readable. Prefer built-in layouts and theme classes before writing custom CSS. Add styles selectively — not preemptively.
Content first, styling after. When a slide does need a <style> or <style scoped> block, put it at the bottom of the slide, just above the closing ---. Slidev parses the whole slide regardless of position, so pushing CSS below the content means a reader opening slides.md sees the actual content first — if they then scroll past some styling, so be it.
If a pattern is reused across many slides (typography, card layouts, shared tables), promote it to the theme under themes/<name>/styles/ instead of repeating it inline.
When asked to edit slides:
slides.mdmake slides to preview changesBy default, use theme: default in frontmatter. Do NOT suggest or apply custom themes unless the user specifically asks about available themes.
Custom themes are local Slidev theme folders stored in this skill at themes/<name>/. To apply one, copy the theme folder into the slides directory and set theme: ./<name> in frontmatter.
Style inspired by QuantumBlack's publicly available visual identity. All colors, fonts, and design patterns sourced exclusively from public materials:
#0C1C23Setup: Copy themes/qblabs/ into the slides directory, then:
---
theme: ./qblabs
title: "Deck Title"
---
Layouts:
cover — dark navy background, blue accent bar, centered titledefault — clean white background, blue underline on h1section — dark navy section divider with blue accentKey colors (from public QB website/branding):
#051C2C — Dark navy (hero/section backgrounds)#2251FF — Electric blue (accent, links, CTAs)#222222 — Body text (on light backgrounds)#A2AAAD — Secondary text (medium grey)Fonts: Georgia (serif, headings) and Arial (sans, body) — standard PowerPoint substitutes for Bower and McKinsey Sans which are not publicly licensed.
Utility classes: .qb-blue, .qb-navy, .qb-bg-dark, .qb-bg-light, .qb-accent-bar
User: "Add slides to this project"
./slides)theme: defaultnpm installcd slides && make slides to open in browserUser: "Create slides from the README"
slides.md to understand current stateslides.mdmake slides to previewUser: "Add a slide about the architecture"
slides.md--- delimitermake slides to previewUser: "What themes are available?" or "Use the qblabs theme"
theme: ./<name>This skill should be used when the user asks to "improve my setup", "learn from this session", "fix my config", "stop asking for permissions", or reports friction with skills, agents, hooks, or permissions. Analyzes conversation history and proposes configuration improvements.
Create a new GitHub project with standard configuration. Use when user asks to "create a project", "set up a new repo", "initialize a repository", or wants to start a new GitHub project.
This skill should be used when the user asks to "create a hook", "add a hook", "write a hook", or mentions Claude Code hooks. Also suggest this skill when the user asks to "automatically do X" or "run X before/after Y" as these are good candidates for hooks.
This skill should be used when the user asks to "set up memory", "configure CLAUDE.md", "add rules", "create project rules", "organize instructions", or mentions Claude Code memory, CLAUDE.md files, .claude/rules, rules, or project instructions. Also use when the user wants to persist preferences, add coding conventions, scope instructions to specific files, or understand when to use rules vs hooks or other memory mechanisms.
This skill should be used when the user asks to "create a plugin", "build a plugin", "write a plugin", or wants to bundle agents, hooks, commands, skills, or MCP servers into a distributable Claude Code plugin.
This skill should be used when the user asks to "create a skill", "write a skill", "build a skill", or wants to add new capabilities to Claude Code. Use when developing SKILL.md files, organizing skill content, or improving existing skills. Do NOT use for plugin development, hook creation, agent creation, or slash command creation — those have dedicated skills.