HTML Brainstorm Grid

**TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any visual / UX / layout / screen / component / mockup comparison.** STOP and ask the user one short question first: *"Would you like a quick inline chip comparison, or a full HTML grid you can open in the browser?"* The chip is one tool call but flattens color, type, density, motion, and interaction into monospace text; the HTML grid is a real file + Submit round-trip but preserves all of that. The asymmetry is 1:N — asking costs one question, skipping costs a full redo if they wanted HTML. **This rule has no carve-out for "simulate", "demo", "mock up", "quick decision", "just for now", or any other framing the user uses — the framing names the surface (a UI/UX comparison), not an exception.** When the user picks HTML, this skill generates side-by-side HTML grids of N distinctly-different approaches — for the GENERATIVE phase of comparison, when candidates are NOT yet named in the prompt. Use when the user signals exploration rather than evaluation: "brainstorm", "explore options", "show me variations", "what are some ways", "different approaches to X", "I'm not sure how to…", "try a few directions". The job is to GENERATE candidates, not score known ones. If specific candidates ARE named in the prompt ("compare X, Y, Z" / "should we use A or B" / "evaluate these libraries"), hand off to html-comparison-matrix instead — that skill handles the evaluative phase.

mkdir -p ~/.claude/skills/html-brainstorm-grid
curl -L https://claudskills.com/skills/html-brainstorm-grid/SKILL.md \
  -o ~/.claude/skills/html-brainstorm-grid/SKILL.md