html-skills

Set up server mode for html-skills interactive artifacts — starts a per-session receiver in the background on an ephemeral port and arms Monitor on its log so submits become notifications. Idempotent. Skips itself in cloud / web environments where server mode can't work.

Tear down server mode for html-skills — stops the receiver and Monitor started by /html-skills:listen for THIS session, and cleans up its temp files. No-op when nothing is active.

Create HTML system architecture diagrams — microservice maps, dependency graphs, deployment topologies, data ownership maps, integration diagrams. Useful during incidents, design reviews, onboarding, and capacity planning. Use whenever the user wants to visualize, document, or explain how a system fits together — across services, regions, queues, caches, databases, or organizational boundaries. Reach for this whenever the explanation would otherwise involve sentences like "service A talks to service B which writes to queue C".

**TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any visual / UX / layout / screen / component / mockup comparison.** STOP and ask the user one short question first: *"Would you like a quick inline chip comparison, or a full HTML grid you can open in the browser?"* The chip is one tool call but flattens color, type, density, motion, and interaction into monospace text; the HTML grid is a real file + Submit round-trip but preserves all of that. The asymmetry is 1:N — asking costs one question, skipping costs a full redo if they wanted HTML. **This rule has no carve-out for "simulate", "demo", "mock up", "quick decision", "just for now", or any other framing the user uses — the framing names the surface (a UI/UX comparison), not an exception.** When the user picks HTML, this skill generates side-by-side HTML grids of N distinctly-different approaches — for the GENERATIVE phase of comparison, when candidates are NOT yet named in the prompt. Use when the user signals exploration rather than evaluation: "brainstorm", "explore options", "show me variations", "what are some ways", "different approaches to X", "I'm not sure how to…", "try a few directions". The job is to GENERATE candidates, not score known ones. If specific candidates ARE named in the prompt ("compare X, Y, Z" / "should we use A or B" / "evaluate these libraries"), hand off to html-comparison-matrix instead — that skill handles the evaluative phase.

Generate HTML artifacts for code review, PR explanation, and codebase understanding — rendered diffs with inline annotations, severity-coded findings, refactor risk maps, before/after migration views, and subsystem walkthroughs. Use whenever the user wants to review, explain, or understand a PR, refactor, codebase area, or subsystem — especially before merging, when onboarding others to a change, or when the GitHub diff view doesn't show enough context. Default to attaching an HTML explainer to every non-trivial PR.

**TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any comparison heavier than 2-3 short text labels (>2 axes or >3 candidates, or weighted/scored).** STOP and ask the user one short question first: *"Would you like a quick inline chip per option, or a full HTML matrix with weighted columns and live re-ranking?"* The chip is one tool call but loses all structure (no table, no weights, no sorting, no live recompute); the matrix is heavier but preserves the structure the comparison needs. Asking costs one question; skipping costs a full redo. **No carve-out for "simulate", "demo", "quick decision" — the framing names the surface, not an exception.** When the user picks HTML, this skill generates sortable, weighted HTML scoring matrices for evaluating named candidates — for the EVALUATIVE phase of comparison, when 2+ specific candidates ARE named in the prompt. Use when the user names options and asks to compare, evaluate, score, or pick between them: "compare X, Y, Z", "should we use A or B", "evaluate these libraries", "pick between [list]", "build vs buy", "which of these X should we choose". Make weights live-adjustable so totals update in real time. If the user is still GENERATING candidates rather than choosing among named ones ("brainstorm options", "show me approaches", "what are the ways"), hand off to html-brainstorm-grid instead — that skill handles the generative phase.

Build HTML data explorers for CSV, JSON, log, and event data — filterable tables, faceted search, inline charts, timeline scrubbing, A/B test result dashboards. Use whenever the user has a dataset to explore, browse, filter, chart, facet, or analyze — especially for ad-hoc analysis where opening a heavy BI tool is overkill. Reach for this when the user pastes data, mentions a CSV/JSON/log file, or asks to "look at" or "analyze" a dataset.