Skill v1.0.2

version: "1.0.2" name: variant-component description: "Generate isolated UI components with all 8 states and variants — button systems, forms, cards, modals, nav. Design System-aware when a token set is confirmed. Load skills/shared/code-output.md for framework detection and output conventions. Triggers on: component, button system, form component, card component, modal, navigation component, design a button, input components, component library"

Before generating code, load skills/shared/code-output.md for framework detection and references/quality-baseline.md for verification.

Component Mode

When the user asks for a component rather than a full page, switch to Component Mode. Generates isolated, self-contained UI pieces — not full layouts.

Triggers

Component Mode Workflow

Step 1: Clarify scope — single component or a system of related components?

Step 2: Define states — for every component, design all 8 states before coding: default → hover → focus → active → disabled → loading → error → success

Step 3: Define variants — size scales, visual emphasis, semantic variants:

Step 4: Generate — produce a single HTML file (or TSX) showing all variants side by side on a neutral background, with clear labels. Component files go to variant-output/component-[name].html.

Step 5: State showcase — always include an interactive state showcase section: hover the component, click it, tab to it — all states visible and working.

Step 6: Verify — run node <skill-root>/scripts/quality-gate.mjs <component-file> --strict, inspect the result in the browser, and fix confirmed findings before presenting it.

Component Output Format

<!-- Component showcase layout -->
<section data-zone="showcase" style="background:#f5f5f5; padding:48px; font-family:...">
  <h2>Button System</h2>
 
  <!-- Row per variant group -->
  <div data-zone="primary-buttons">
    <!-- sm, md, lg sizes, all states inline -->
  </div>
 
  <div data-zone="secondary-buttons"> ... </div>
  <div data-zone="destructive-buttons"> ... </div>
 
  <!-- State showcase — interactive -->
  <div data-zone="states">
    <p>Hover, click, or tab through to see all states</p>
    <!-- live interactive demo -->
  </div>
</section>

Terminal output:

✦ Component: Button System
  Variants: primary · secondary · ghost · destructive
  Sizes: sm · md · lg
  States: default · hover · focus · active · disabled · loading
 
  variant-output/component-buttons.html ← opened in browser
 
  Next: vary strong · remix colors — [variant] · export tokens · react component

Component + Zone Bridge

Components can be injected into full-page variations using zone syntax:

A use new button component    → replace all buttons in Variation A with the new component system
B update card — card zone     → apply new card component to the card zone in Variation B

Quick Triggers for Component Mode