Fluid Deck Engine

Generate polished Fluid-branded Reveal.js slide decks with Claude Code.

Quick Start

git clone <repo-url> fluid-deck-engine
cd fluid-deck-engine
npm install
npm start

Then in Claude Code:

/deck "Create a 6-slide deck about our Q2 payments progress"

How It Works

This repo is a skill-based pipeline for Claude Code. The /deck command orchestrates a 4-phase process:

1. Plan — Parse your content, choose archetypes + accent colors, get approval
2. Assemble — Fill archetype templates with content and decorative layers
3. Enhance — Add flow diagrams, data viz, icons, animations
4. Visual QA — Screenshot every slide, validate brand rules, fix issues

Structure

• archetypes/ — 16 slide layout templates (title, big-stat, dashboard, etc.)
• brands/ — Fluid brand system (CSS, fonts, decorative assets)
• components/ — Rich graphical components (flow diagrams, data viz, etc.)
• examples/ — Complete polished example decks
• template/ — Blank deck starter template
• .claude/ — Skills and agent definitions for Claude Code

Testing

npm test              # Static validation (no browser)
npm run test:render   # Visual render tests (requires Playwright)

Spec

See docs/superpowers/specs/2026-04-01-fluid-deck-engine-design.md for the full system design.