HTML Brainstorm Comparison Grid

When the user is undecided between approaches, the strongest move is a grid of distinctly different options laid out side-by-side, each labeled with the tradeoff it makes. The grid forces contrast — if two options are too similar, one of them isn't pulling its weight.

Phase boundary. This skill handles the generative phase of comparison — generating candidates the user hasn't named yet. Once specific candidates exist and the question shifts to "which one wins on these criteria", hand off to html-comparison-matrix. The boundary signal is whether candidates appear in the prompt: if not, generate them here; if so, score them there. The two skills are designed to compose — explore here, then evaluate there.

Pre-flight — run BEFORE writing the artifact

Invoke html-skills:html-skills-listen (Skill tool) first; it is idempotent. If it returns a URL, inject it verbatim as window.__CLAUDE_SUBMIT_URL__ in the HTML you are about to write, ?t= query string included (a local, single-session loopback handshake — not a credential). If it reported web/sandbox mode, leave that line out; submitToClaude then falls back to clipboard mode.

When to use this skill