slides-as-code
Create presentation slides as standalone HTML files with automated PNG export. Use when users ask to: create slides, build a deck, make a presentation, design slides, export slides to images, or work with HTML-based presentations. Triggers: "create slides", "make a presentation", "build a deck", "slide deck", "export slides", "slides as code".
Resources
3Install
npx skillscat add evolving-machines-lab/evolve/slides-as-code Install via the SkillsCat registry.
The skill creates standalone HTML presentation files with embedded CSS and automatically exports them as PNG images. It solves the need to generate professional slide decks without external tools, allowing agents to produce and export slide decks on demand from HTML-based presentations.
Slides as Code
Create presentation decks as standalone HTML files (1920x1080). Each slide is self-contained with embedded CSS. Preview in browser, export to PNG/PPTX.
Workflow
Always follow this sequence when creating a deck:
- Initialize project in user's working directory (NOT inside the skill folder)
- Create all slide HTML files in
<project>/html/ - Update
<project>/html/viewer.htmlslides array - Run export:
cd <project> && npm run build
IMPORTANT: After creating slides, always run npm run build to generate PNG and PPTX exports. Do not skip this step.
Quick Start
Initialize a new deck in the user's current working directory:
# CORRECT: Run from user's cwd, use absolute path to script
bash ~/.claude/skills/slides-as-code/scripts/init-slideshow.sh my-deck
# WRONG: Don't cd into skill folder first
# cd ~/.claude/skills/slides-as-code && bash scripts/init-slideshow.sh my-deckThis creates my-deck/ in the current directory with all files ready.
Auto-installs dependencies. Takes ~30 seconds.
Design Philosophy
Don't look AI-generated. Think Apple iOS, Linear, Vercel - professionally designed by outlier designers.
NEVER use:
- Emoji icons (🚀 ✨ 💡 🎯) - instant AI-generated signal
- Clip art or stock icons
- Colored background boxes for every section
- Generic headers ("Our Solution", "Key Benefits")
- Placeholder text or fake code
ALWAYS use:
- Typography as design - Let fonts do the work, not decorations
- Whitespace - Generous spacing is sophistication
- Restrained color - Gradient on 1-2 key words only
- Real content - Actual code, specific numbers, concrete claims
- Symbols over icons - Use → ✓ ✕ + = as visual elements
Quality bar:
If a slide looks like it could be from a free template or AI generator, redesign it. Aim for the aesthetic of Linear's changelog, Vercel's marketing, or Apple keynotes.
For detailed styling: See references/design-guide.md
For layout patterns: See references/slide-patterns.md
Typography
/* Three fonts, each with a purpose */
font-family: 'Space Grotesk', sans-serif; /* Titles, UI */
font-family: 'Lora', serif; /* Body text */
font-family: 'JetBrains Mono', monospace; /* Code */Title: 52-72px, weight 300 (light = sophisticated), letter-spacing -0.02em
Colors
/* Gradient - use sparingly */
background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
/* Text hierarchy */
#1a1a1a /* Headings */
#333333 /* Body */
#555555 /* Subtle */
#888888 /* Muted */
/* Surfaces */
#ffffff /* Background */
#fafafa /* Light cards */
#1a1a1a /* Dark cards/code */Slide Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide N - Specific Title</title>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow: hidden; }
body {
font-family: 'Space Grotesk', sans-serif;
background: #ffffff;
width: 1920px;
height: 1080px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Content -->
</body>
</html>Common Elements
Gradient text:
.gradient {
background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
}Arrow bullets:
.bullets li::before { content: "→"; color: #8B5CF6; }Check/X bullets:
.gained li::before { content: "✓"; color: #8B5CF6; }
.eliminated li::before { content: "✕"; color: #EC4899; }Code box:
.code-box {
background: #1a1a1a;
border-radius: 10px;
padding: 32px 40px;
}Viewer
Update slides array in html/viewer.html:
const slides = ['slide1.html', 'slide2.html', 'slide3.html'];Open in browser, use arrow keys to navigate.
Export
npm run export # HTML → PNG (2x resolution)
npm run pptx # PNG → PPTX
npm run build # Full pipelineCategories
Install
npx skillscat add evolving-machines-lab/evolve/slides-as-code Install via the SkillsCat registry.