plan-canvaslisted

Present a plan for a visual/UX feature as an annotatable HTML canvas rendered in the project's own design tokens, instead of a markdown wall of text. MUST USE when the user says "use plan canvas" or "plan canvas". Also use when planning a UI feature, redesign, layout change, or component where competing options are easier to judge by seeing them than by reading them - and BEFORE building a new page or a decorative element the user describes by style rather than by spec ("add a sketch-style underline", "add a podcast page with their bios and logo"), or before porting a section from another site ("bring these testimonials over from my other site"). Skip for pure backend/logic/data plans, which stay as a text checklist.
brewed-ops/canvas-skills · ★ 0 · Web & Frontend · score 72

Install: claude install-skill brewed-ops/canvas-skills

# Plan Canvas Created by Kenneth Villar ([BrewedOps](https://brewedops.com)). Adapted from Kun Chen's "lavish" workflow: for anything visual, a wall of markdown is the wrong medium. The user cannot easily tell what each option will actually look like, or point at the specific part they dislike. Render the plan as **an HTML page in the project's real design system** so options are seen, not imagined, and feedback is precise. The plan is the cheapest place to be wrong; this puts it in a medium that fits UI work. `<skill>` below means this skill's own folder (`~/.claude/skills/plan-canvas`, or the plugin's install path). ## When to use vs skip - **Use** for: a new UI feature, a redesign, a layout/nav change, a component with 2+ viable directions, anything where "which of these looks right?" is the real question. - **Skip** (stay a text plan) for: backend logic, data pipelines, API wiring, refactors, bug fixes - nothing visual to compare. - **Adjusting what already exists** ("make the hero text bigger, move the button right") is not a direction pick. Use the `bo-canvas` skill: the user drags and resizes the real components on a screenshot and pastes back a prompt with the exact target boxes. - **Canvas FIRST, not after a rejection.** An ask that names a style ("sketch-style", "like X") or a whole new page is a choice between directions, not a spec, even when phrased as "add X". Building first and getting "it looks weird" costs a round trip and some trust; the can