/html-plan

A Claude Code skill that turns a project architecture, tool stack, or technical plan into a publication-ready HTML visual brief.

The output is a fully self-contained .html file with an animated pipeline diagram and data panels. Uses a semantic color system where every color has a defined meaning: red = YOU (manual steps), gold = PIPELINE (automated), green = OUTPUT.

Install

mkdir -p ~/.claude/commands && \
curl -sf https://raw.githubusercontent.com/mitchelfletcher11/html-plan/main/SKILL.md \
     -o ~/.claude/commands/html-plan.md

Restart Claude Code, then run /html-plan to verify.

Usage

/html-plan

Asks for your system name, colors, pipeline nodes, and KPI stats, then builds the brief.

If you paste in an existing architecture description or plan document, it extracts everything it needs directly.

What it produces

• Single .html file, fully self-contained
• Option A: single-screen (pipeline only — no scroll)
• Option B: two scroll-snapped screens (resource discovery results + pipeline architecture)
• Animated S-curve pipeline SVG with traveling dot
• Data panels: Hardware, Workflow steps, API Cost, or custom
• Header KPI chips with animated count-up numbers

Semantic color system

Color	Meaning
Red #E8351A	YOU — manual steps requiring your action
Gold #D4A017	PIPELINE — automated, system runs without you
Green #4CAF50	OUTPUT — final deliverable

Technical stack

• Anime.js 3.2.1 — all animations
• Syne (headings) + DM Mono (labels/data) — typography
• Inline SVG — pipeline diagram
• CSS Grid — data panels
• Dark theme: #0A0A0A background