Zero-Build Slides

A presentation engine designed for AI agents. Four plain JS files, no npm, no build step — serve from any static hosting and go.

Install as Claude Code Skill

bunx @decocms/zero-build-slides

This installs the skill so Claude Code (and 40+ other agents) knows how to create and edit slide decks for you. Then just ask your agent to create a presentation.

Quick Start

bunx serve
open http://localhost:3000

Architecture

File	Role
index.html	Bootstrap: import maps, fonts, Tailwind CDN, base CSS
app.js	Router, viewport scaling (1920x1080), keyboard nav, theme context
layouts.js	Every slide template as a Preact component
data.js	Presentations as plain JS objects + color maps
themes.js	6 built-in color themes
context.js	Preact context for theme propagation

How It Works

• Preact + htm via ESM import maps from esm.sh CDN — JSX-like syntax that runs natively in the browser
• Tailwind CDN with inline config for design tokens
• Hash-based routing: #/deck-slug?slide=N&theme=name
• Viewport scaling: 1920x1080 base scaled to fit any screen at 16:9

Working with AI Agents

An LLM can create or edit presentations by modifying data.js:

1. Read the data file and understand the slide schema
2. Add/edit slides as JS objects — pick a layout, set colors, write content
3. Upload to any static host — no build step needed

See SKILL.md for the full agent reference (slide schema, available layouts, color palette, theme system).

Themes

Add ?theme=name to any URL to switch the color palette instantly.

Theme	Accent	Vibe
deco	Green #D0EC1A	Default brand
ocean	Blue #38BDF8	Corporate
ember	Orange #F97316	Warm startup
midnight	Purple #C084FC	Creative
forest	Green #4ADE80	Organic
mono	White #FFFFFF	Minimal B&W

Example: #/demo?theme=ocean&slide=3

Available Layouts

• title — Cover and section headers (centered or TOC variant)
• dinner-thesis — Bold claim with proof-point bullets
• dinner-features — Icon cards with hover interactions (1-4 columns)
• dinner-demo — 40/60 split with stacked cards
• dinner-admin-cases — Two-column: blog grid + quote cards
• market-signals-funnel — 4-stage chevron pipeline
• dinner-roadmap — 3-column strategic directions
• dinner-cta — Call-to-action with icon cards
• timeline — Alternating above/below timeline
• retrospective-intro — Numbered section index
• retrospective-stats — Animated counter stats

URL Structure

https://your-host/#/deck-slug?slide=5&theme=ocean

• deck-slug — presentation key from DECKS map in app.js
• slide — slide number (0 = cover)
• theme — color theme name

License

MIT