html-studio

name	html-studio
description	Author single-file, self-contained interactive HTML artifacts — reports, dashboards, roadmaps, plans, decision docs, and their variants (diff-reviews, quizzes, wargames, buy-in packets, boards, decks, explainers, atlases) — as typed deliverable compositions under one design system, then validated headless (`gate`, `render`) and optionally served with a return channel (`serve`, `receipts`) that brings the reader's judgment back as data. Use when a plan, roadmap, comparison, decision, dataset, or architecture reads better as an interactive page than markdown, when a page should return the user's adjustments as data, or when the user says HTML plan, roadmap, dashboard, deck, wargame, quiz, or report. Distinct from the Artifact tool's hosted fragments; mermaid fences belong to mermaid-diagramming.
allowed-tools	["Bash(uv run ${CLAUDE_SKILL_DIR}/scripts/studio.py *)"]

[HTML_STUDIO]

Every artifact is one self-contained file: a deliverable type fixes its composition — layout class, structural spine, element set, capture contract — and the references rule the code, style, figures, and interaction it composes from.

[01]-[ROUTING]

[REFERENCES]:

• [01]-DELIVERABLES: registers each type — spine, layout class, element set, capture contract, variant-to-core table
• [02]-HTML: advanced HTML — semantic structure, density, and the coding patterns every artifact composes from.
• [03]-SVG: advanced inline SVG for HTML — the element vocabulary, construction patterns, and figure and diagram craft.
• [04]-STYLE: rules the design language — token system, layout, theming, and the legibility law every artifact inherits
• [05]-INTERACTION: rules the return channel — data-to-presentation mapping, the drawer, adjustments returned as data