skills-spraypixel

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.

Theme bundle for component-composer. Provides tokens, criteria, patterns, and palette for Tufte-style data graphics: range-frame axes, small multiples, high data-ink, single highlight, no chartjunk. Activated when component-composer is invoked with `spraypixel` as the theme name.

Generator-critic loop pattern for any artifact produced by an LLM and judged against declared criteria. A drafter LLM proposes; a hybrid critic (mechanical checks + LLM-as-judge) scores; the orchestrator feeds failures back to the drafter and iterates until clean. Artifact-agnostic — works for HTML, code, schemas, prose, anything with a validator. Activates on "generator-critic loop", "iterate this artifact until it passes", "/critic-loop", or when designing a refinement pipeline. Consumed by `component-composer` for HTML data graphics; future consumers for other artifact types declare a dependency on this skill.

Casual HTML artifacts in Thariq Shihipar's "Unreasonable Effectiveness of HTML" style — throwaway editors, side-by-side variant comparisons, interactive tuning with sliders/knobs, single-page reports. No validator loop, no themes, no industrial QA. Single-file HTML you make, use once, and discard. Includes the "copy-as-prompt" footer pattern for round-tripping back into Claude. Activates on "make a throwaway HTML", "sketch an editor for", "build a quick HTML to triage", "show me N options side by side", "interactive prototype for", "/sketch", or any one-off HTML request that does NOT need theme conformance.

Theme bundle for component-composer. Terminal/Bloomberg-terminal aesthetic: green-on-black, monospace everywhere, maximum data density, no chartjunk. Activated when component-composer is invoked with `spraypixel-terminal` as the theme name.