html-brainstorm-grid

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: html-brainstorm-grid
description: >-
  **TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any visual / UX / layout / screen / component / mockup comparison.** STOP and ask first: *"Quick inline chip comparison, or a full HTML grid you can open in the browser?"* Chips flatten color, type, density, motion, and interaction into monospace; HTML grids preserve all of it. **No carve-out for "simulate", "demo", "mock up", "quick decision", "just for now" — those name the surface, not an exception.** When user picks HTML, this skill generates side-by-side grids of N distinctly-different approaches — for the GENERATIVE phase, when candidates are NOT yet named. Use when the user signals exploration: "brainstorm", "explore options", "show me variations", "different approaches", "I'm not sure how to…", "try a few directions". GENERATE candidates, don't score known ones. If specific candidates ARE named ("compare X, Y, Z" / "should we use A or B"), hand off to html-comparison-matrix.
metadata:
  version: "1.2.1"
---

# 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

- "Generate a few approaches for X"
- "I'm not sure which direction to take"
- "Show me variations / alternatives / options"
- "Compare directions for X before I commit"
- "Try different X" (where X is layout, naming, structure, tone, etc.)
- Any time the user is exploring rather than committing

## When NOT to use this skill

- The user names specific candidates ("compare React, Vue, Svelte"). Use `html-comparison-matrix`.
- The user has already chosen and just wants to score the choice. Use `html-comparison-matrix`.
- The output is a single recommendation rather than a set of alternatives. Use `html-spec-planning`.

## Output requirements

A grid of 3–6 cells. Each cell renders an actual instance of the option (not a description of it). Each cell has a label naming the tradeoff. The grid is the artifact — no long preamble, no conclusion section.

## HTML output foundation

These defaults apply to **every** artifact this skill produces, on top of the requirements above. If a rule above conflicts with this list, the rule above wins; otherwise these are non-negotiable.

- **Output a real `.html` file the user opens in a browser — never inline-render in chat.** Every artifact this skill produces is a file on disk (`<topic>-<kind>.html`), not an HTML block embedded in the agent's chat surface (