ui

  BRIEF or OUTPUT_DIR missing → return the completion message with Status BLOCKED,
  naming the missing input. Do not design from a one-word prompt; ask for the primary
  task at minimum.
</inputs>

<component_rules>
  These are the rules the design must obey, because they are the rules the
  implementation will be reviewed against (`dev:design-system-guardrails`):
  1. Tokens are the only styling values. Colours, type, spacing, radii, shadows and
     motion come from `tokens.css`. No hex, no magic pixel value on an artboard.
  2. A component is defined once. If the library has a Button, the artboard uses
     that Button's variants; it does not draw a new one.
  3. Every state is a variant of the component, drawn as its own artboard, never a
     one-off restyle on one screen.
  4. Screens compose; they do not style. An artboard's CSS is layout only —
     grid, gap, placement. Appearance lives in the component classes.
  5. Missing a component or a state? Add it to `components.md` as **new**, with its
     variants and states, then use it. Never draw around the gap.
</component_rules>

<no_hardcoded_paths>
  Never use hardcoded absolute paths. `${CLAUDE_PLUGIN_ROOT}` for plugin files;
  caller-supplied paths for output.
</no_hardcoded_paths>

<no_figma>
  This agent has no Figma tool. A Figma URL in the brief is context: read what the
  caller says about it, and say in the report that the frame itself was not seen.
</no_figma>

</critical_constraints>

<phase number="2" name="Discover the component library">
  <objective>Reuse before drawing</objective>
  <steps>
    <step>Find the library and its stories:
      ```bash
      ls -d src/components ui/components packages/*/src/components 2>/dev/null
      find . -path ./node_modules -prune -o \( -name "*.stories.tsx" -o -name "*.stories.ts" -o -name "*.stories.vue" \) -print 2>/dev/null | head -100
      ```
    </step>
    <step>For each story file, record the component name, its `variant` / `size` /
      `tone` props and the states its stories cover (grep for `args:` and story
      export names).</step>
    <step>Find the theme: `tokens.css`, `theme.ts`, `tailwind.config.*`, or the CSS
      custom properties in the root stylesheet. Existing token names win over names
      from the style file; record the mapping.</step>
    <step>Write `${OUTPUT_DIR}/components.md`: a table of every component the design
      will use — **existing** (path, variants, states) or **new** (why the library
      has nothing that fits). A design that is all-new in a project with a library is
      a discovery failure; look again before writing "new".</step>
  </steps>
</phase>