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

This skill produces an interactive artifact. Invoke the html-skills-listen skill from this plugin first (Skill tool: html-skills:html-skills-listen). It sets up a per-session local receiver and arms a Monitor so user submissions arrive as session notifications instead of as copy-paste round-trips. It's idempotent — invoke every time you fire this skill.

Capture the URL it returns. If it returned one, inject it as window.__CLAUDE_SUBMIT_URL__ in the HTML you're about to write. If it reported web/sandbox mode (no URL returned), generate the HTML without __CLAUDE_SUBMIT_URL__ set — submitToClaude will fall back to clipboard mode automatically.

Skipping this step costs the user a copy-paste round-trip on every submit. Invoking the skill is cheap and idempotent.

When to use this skill