html-comparison-matrix

Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.

---
name: html-comparison-matrix
description: >-
  **TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any comparison heavier than 2-3 short text labels (>2 axes, >3 candidates, or weighted/scored).** STOP and ask first: *"Quick inline chip per option, or a full HTML matrix with weighted columns and live re-ranking?"* **No carve-out for "simulate", "demo", "quick decision" — those framings name the surface, not an exception.** When user picks HTML, this skill generates sortable, weighted scoring matrices for the EVALUATIVE phase — when 2+ specific candidates ARE already named. Use for: "compare X, Y, Z", "should we use A or B", "evaluate these libraries", "pick between [list]", "build vs buy", "which of these should we choose". Make weights live-adjustable so totals update in real time. If candidates are NOT yet named ("brainstorm options", "show me approaches", "what are the ways"), hand off to html-brainstorm-grid — that handles the generative phase.
metadata:
  version: "1.2.1"
---

# HTML Comparison Matrix

When picking between candidates on multiple criteria, a comparison matrix beats a paragraph. A weighted matrix beats an unweighted one — weights surface the implicit priorities and let the user argue with their own past judgments.

> **Phase boundary.** This skill handles the *evaluative* phase of comparison — scoring candidates that already exist. If the user hasn't named candidates yet and is still asking "what are the options" or "show me approaches", hand off to `html-brainstorm-grid` instead. The boundary signal is whether candidates appear in the prompt: if so, score them here; if not, generate them there. The two skills are designed to compose — generate options there, then evaluate them here.

## 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

- "Compare X, Y, and Z" (libraries, vendors, frameworks, designs)
- "Which [tool, library, vendor, approach] should we use?"
- "Help me decide between A and B"
- "Evaluate [X] against [Y, Z]"
- Build-vs-buy decisions
- Anything with multiple **named** candidates and multiple selection criteria

## When NOT to use this skill

- The user is asking the skill to generate options ("brainstorm approaches", "show me ways"). Use `html-brainstorm-grid`.
- Only one candidate is named — no comparison to make. Use `html-spec-planning` to write up the rationale.
- The "comparison" is two paragraphs that don't need a weighted scoring system. A simple side-by-side in prose is fine.

## Output requirements

The artifact has:
- A matrix of candidates × criteria
- Per-criterion weight sliders that update totals live
- Per-candidate score breakdowns
- A clear "verdict" pane that updates as weights change
- Export of the configured matrix and current verdict as JSON or markdown

## 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