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