ethanplusai

Visualplanner — Testing skill for Claude Code

Testing community

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

How to install Visualplanner

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ethanplusai/visualplanner and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Visualplanner does

A Claude Code skill that turns any planning document into a beautiful, visual HTML breakdown. Point it at a spec — get a scrollable, interactive walkthrough with flow diagrams, expandable cards, and a built-in review system.

Alternatives in Testing

Web Design — A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second 686 ★
PR Visual Diff — Post before/after stills + GIFs on a visual PR, captured headlessly with Playwright + ffmpeg 324 ★
Design QA — Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token co 309 ★

README

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