visualplanner

A Claude Code skill that turns any planning document into a beautiful, visual HTML breakdown.

Point it at a spec, PRD, design doc, or implementation plan. Get back a stunning single-page HTML file with scroll-based navigation, animated reveals, flow diagrams, and expandable detail cards. Works in any browser — no setup needed.

How to use

Install

Copy the visualplanner folder into your Claude Code skills directory:

cp -r visualplanner ~/.claude/skills/

Use

Open any project in Claude Code and say:

• "break down this plan"
• "visualize this spec"
• "make this plan visual"
• "turn this spec into HTML"

Point it at a file:

break down ./docs/my-design-spec.md

Output

A single self-contained HTML file that you can:

• Open in any browser
• Share with anyone (just send the file)
• Screen-record for content (TikTok, Twitter, etc.)
• Use offline after first load

What the output looks like

• Scroll-snap sections with progress bar and dot navigation
• Scroll-triggered animations — elements fade in as you scroll
• Flow diagrams showing how components and phases connect
• Expandable detail cards — summary visible, details one click away
• Pattern cards for tech stack, features, and components
• Step cards for sequential processes
• Callout boxes for key decisions and constraints
• Dark code blocks for technical snippets
• Stat badges for key numbers
• Keyboard navigation (arrow keys)
• Warm, distinctive design — Bricolage Grotesque, warm palette, not the generic AI look

Design philosophy

Visual first — Every section is at least 50% visual. Max 2-3 sentences per text block. Lists become cards. Sequences become flow diagrams. Dense details go in expandable cards.

Faithful to source — Simplifies the presentation, not the content. Uses the original document's language. Doesn't add or reinterpret.

Works every time — No complex JS that could break. No quiz logic, no drag-and-drop, no timed animations. Just reliable scroll-based visuals that render correctly on any document.

Skill structure

visualplanner/
├── SKILL.md                      # Main skill instructions
├── README.md                     # This file
└── references/
    ├── design-system.md          # CSS tokens, typography, colors, layout
    └── interactive-elements.md   # HTML/CSS/JS patterns for visual elements

Credits

Inspired by codebase-to-course by Zara. Adapted from codebases to planning documents.

Built by Ethan Rogers with Claude Code.