← ClaudeAtlas

visualizing-optionslisted

Use when a design discussion needs visual options shown in a browser: mockups, layout comparisons, wireframes, or architecture diagrams that the user can click to choose between. Spawns a local server and renders content fragments.
pgoell/pgoell-claude-tools · ★ 0 · Web & Frontend · score 70
Install: claude install-skill pgoell/pgoell-claude-tools
# Visualizing Design Options Browser-based visual companion for showing mockups, layouts, wireframes, and diagrams during a design discussion. The user opens a local URL; you write HTML content fragments to a session directory; clicks are recorded back as JSON events. ## When to Use Decide per question, not per session. The test: would the user understand this better by seeing it than reading it? Use the browser when the content itself is visual: - UI mockups: wireframes, layouts, navigation structures, component designs. - Architecture diagrams: system components, data flow, relationship maps. - Side-by-side visual comparisons: two layouts, two color schemes. - Design polish: look and feel, spacing, visual hierarchy. Use the terminal otherwise: requirements, scope, conceptual A/B/C choices, tradeoff lists, technical decisions. A question about a UI topic is not automatically a visual question. "What kind of wizard do you want?" is conceptual. "Which of these wizard layouts feels right?" is visual. ## Quick Start ```bash scripts/start-server.sh --project-dir /path/to/project ``` The script returns startup JSON with `url`, `screen_dir`, and `state_dir`. Save those values for the loop. If you launched the server in the background and did not capture stdout, read `$STATE_DIR/server-info` to recover them. Pass `--project-dir` so mockups persist in `.workbench/brainstorm/`. Without it, files go to `/tmp` and get cleaned up on stop. Add `.workbench/` to `.gitignore` if