| name | component-composer |
| description | Production-grade single-file HTML data graphics through a generator-critic loop. Drafts via theme, renders in Claude Preview, validates with hybrid mechanical + LLM-as-judge checks at three viewports, iterates until every active-theme criterion passes. Use for recurring dashboards, multi-theme reports, or design-system-enforced artifacts. Do NOT use for casual, throwaway, or interactive HTML — just ask Claude directly for those. Activates on "compose with <theme>", "render this chart with the design system", "/compose", or any composition request that names a theme.
|
component-composer
Purpose
Build single-file HTML data graphics through a generator-critic loop. The
drafter writes HTML; the validator critiques the rendered output; the
composer feeds failures back to the drafter and iterates until clean.
Themes own the quality criteria. The composer is theme-agnostic.
When to use
This skill is for production-grade data graphics where consistency
matters across artifacts, themes, viewports, and time:
- Recurring dashboards or reports that must look uniform
- Artifacts that will be shared, archived, or revisited
- Multi-theme work where the same data renders under different aesthetics
- Cases where validator-enforced token discipline (color, type, spacing)
is worth the loop overhead
When NOT to use
This skill is the wrong tool for casual or one-off HTML. Thariq Shihipar's
post — The Unreasonable Effectiveness of HTML
— is the canonical guidance for the broader case. He explicitly warned:
"I'm a little bit afraid that people will read this article and turn it
into a /html skill or something. While there might be some value in
that, I want to emphasize that you don't need to do much to get Claude
to do this. You can just ask it to 'make a HTML file' or 'make a HTML
artifact'."
For the following cases, do not invoke /compose; just ask Claude
directly:
- Throwaway editors purpose-built for one piece of data (Linear ticket
triage, prompt tuner, feature-flag editor)
- Specs, code-review explainers, PR walkthroughs, design mockups,
research reports
- One-off explorations: "show me 6 different onboarding layouts side by
side"
- Anything where the artifact's value is in being made and used once,
not in conforming to a recurring quality bar
- Interactive prototypes with sliders, knobs, copy-as-prompt buttons
The composer's industrial QA loop is overkill for these and gets in the
way of Thariq's "just make a HTML file" simplicity.
Dependency
This skill is a consumer of the generator-critic skill. The
abstract loop pattern (cycle, HUD, stuck detection, audit-summary format,
drafter+validator contracts) lives there. Install both:
/plugin install generator-critic@spraypixel
/plugin install component-composer@spraypixel
component-composer provides the HTML-specific implementation:
output-style.md, theme-spec.md, mechanical-checks.js, the HTML
drafter rules, and the HTML validator dispatch.
Operating mode
When invoked with a job + theme name:
- Resolve theme — read
skills/<theme>/themespec.json and load the
theme's tokens.md, criteria.md, patterns.md, palette.md.
- Draft — invoke the drafter per
references/drafter-protocol.md
(HTML-specific; extends generator-critic/references/drafter-contract.md).
- Render — write artifact to session dir; render via Claude Preview.
- Inject HUD — overlay
generator-critic/scripts/hud.js per
generator-critic/references/hud-protocol.md.
- Validate — run mechanical checks via
preview_eval, then LLM-as-judge
for the rest, per references/validator-protocol.md (HTML-specific;
extends generator-critic/references/validator-contract.md).
Repeat at three viewports (mobile 375 / tablet 768 / desktop 1280).
- Aggregate failures — per
generator-critic/references/loop-protocol.md.
- Loop — if any failure, feed back to drafter and goto step 2.
If stuck, surface to user via HUD + chat (stuck-detection rules in
loop-protocol).
- Emit — final HTML + PNG (via
scripts/export-png.js) + PDF (via
scripts/export-pdf.js) + audit summary (per
generator-critic/references/audit-summary-format.md) + iteration
history.
References
This skill (HTML-specific):
references/drafter-protocol.md — HTML drafter rules + required artifact structurereferences/validator-protocol.md — HTML validator dispatch + criteria registryreferences/theme-spec.md — theme interface contract (HTML-flavored)references/output-style.md — Atomic Foundation: tokens, base CSS, theme switch
Inherited from generator-critic:
generator-critic/references/loop-protocol.md — loop steps, stuck detectiongenerator-critic/references/drafter-contract.md — abstract drafter interfacegenerator-critic/references/validator-contract.md — abstract dispatch + output shapegenerator-critic/references/hud-protocol.md — HUD injection + state pollinggenerator-critic/references/audit-summary-format.md — final-emit shape
Scripts
This skill (HTML-specific):
scripts/mechanical-checks.js — 9 pure DOM check functions + browser adapterscripts/export-png.js — PNG export contractscripts/export-pdf.js — PDF export contract
Inherited from generator-critic:
generator-critic/scripts/hud.js — in-loop HUD overlay (vanilla JS)
Template
template/base.html — HTML skeleton with :root token slots
