---
name: build-atom
description: Build an atom component (Button, Input, Typography, etc.)
argument-hint: "[ComponentName]"
---

Build an atom component for the FA Design System.

Use the component-builder agent to handle this task. The user wants to build the following atom component:

**Component:** $ARGUMENTS

**Instructions for the agent:**
1. Read all memory files and conventions before starting
2. Check `docs/memory/component-registry.md` to confirm the component is planned
3. Create the component in `src/components/atoms/{ComponentName}/`
4. Include: `{ComponentName}.tsx`, `{ComponentName}.stories.tsx`, `index.ts`
5. Follow all rules in `docs/conventions/component-conventions.md`
6. ALL visual values MUST come from the MUI theme — never hardcode
7. Write comprehensive Storybook stories covering all states
8. Verify the component renders in Storybook
9. **Run internal QA** (stages 3-5 from `docs/reference/component-lifecycle.md`):
   - Run `/audit` — fix all P0/P1 issues
   - Run `/critique` (skip for simple utility atoms like Divider)
   - Run `/harden` (skip for display-only atoms like Typography, Badge)
   - Run `/polish` — final alignment, spacing, transitions
10. Present to user with summary and scores
11. Update all memory files when done
