Add Input, Checkbox, Radio, and Switch form components with semantic token layer
Build four form primitives from Figma references with brand-aligned creative decisions: restrained press states (scale-95 instead of highlight splashes), clean iconless Switch, and consistent error states with inline warning icons. Introduce form-control semantic tokens (--color-control-*) in tokens.css so all form components share a single source for borders, checked states, focus rings, labels, and errors. Retrofit Input to use these tokens instead of direct palette references. Update CLAUDE.md and ARCHITECTURE.md with token layer documentation, token discipline rule (no palette references in components), and component tier decision criteria. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,45 +6,27 @@ We have three tools — Figma (design), code (React/Tailwind/TypeScript), and St
|
||||
|
||||
---
|
||||
|
||||
## Two Entry Points, One Loop
|
||||
## Workflow: Code-First with Figma Reference
|
||||
|
||||
Components can start from either direction — the key is that both converge on the same verification and linking steps.
|
||||
Components are built in code and verified in Storybook. Figma serves as a **visual reference** — Richie may provide Figma links or screenshots to guide design intent, but we don't create or maintain Figma representations of each component as part of the build process. Figma design can be added later if needed.
|
||||
|
||||
### Entry A: Design-First (Figma → React)
|
||||
### Build Steps
|
||||
|
||||
Richie has designed a component in Figma. We implement it in code.
|
||||
|
||||
1. **Inspect** — `get_design_context` on the Figma node returns reference code, a screenshot, and metadata.
|
||||
2. **Extract tokens** — `get_variable_defs` pulls colours, spacing, typography values. Cross-check against `tokens.css` to confirm tokens exist or flag gaps.
|
||||
1. **Reference** — Richie provides design intent: a Figma link, screenshot, description, or existing component to match. Use `get_design_context` / `get_screenshot` to inspect Figma references when provided.
|
||||
2. **Check tokens** — Cross-check the reference against `tokens.css`. Flag any gaps (missing colours, spacing, etc.) before building.
|
||||
3. **Check existing components** — Storybook MCP `get-documentation` lists what we've already built. Reuse before rebuilding.
|
||||
4. **Build** — React component with TypeScript props, Tailwind utilities via `cn()`, tokens from `tokens.css`.
|
||||
5. **Story** — Write stories using Storybook MCP `get-storybook-story-instructions` to match current conventions. Cover default, variants, edge cases.
|
||||
5. **Story** — Write stories covering default, variants, and edge cases. Use `tags: ['autodocs']`.
|
||||
6. **Test** — Storybook MCP `run-story-tests` for rendering + a11y. Fix violations before moving on.
|
||||
7. **Visual verify** — `get_screenshot` from Figma vs Storybook preview. Compare side-by-side.
|
||||
8. **Link** — `add_code_connect_map` to link the Figma component to the React component.
|
||||
9. **Embed** — Add `addon-designs` parameter to the story pointing back to the Figma source.
|
||||
7. **Visual verify** — Playwright screenshots of Storybook stories to confirm rendering.
|
||||
8. **Embed** — If a Figma reference exists, add `addon-designs` parameter to the story for side-by-side comparison.
|
||||
|
||||
### Entry B: Code-First (React → Figma)
|
||||
### The Finished State
|
||||
|
||||
Claude builds a component from a description or reference. We push it to Figma for Richie to review.
|
||||
|
||||
1. **Build** — React component in code, using design tokens from `tokens.css`.
|
||||
2. **Story** — Write stories, verify in Storybook (same as steps 5-6 above).
|
||||
3. **Push to Figma** — `use_figma` to create the component/frame/variants. The claude2figma skills enforce token binding here — no hardcoded values.
|
||||
4. **Verify** — `get_screenshot` to confirm it landed correctly.
|
||||
5. **Link** — `add_code_connect_map` to bridge it back.
|
||||
6. **Embed** — Add `addon-designs` parameter to the story.
|
||||
|
||||
We used this flow when creating the typography specimen frame.
|
||||
|
||||
### The Shared End State
|
||||
|
||||
Regardless of entry point, every finished component has:
|
||||
Every completed component has:
|
||||
- A React implementation with typed props and Tailwind styling
|
||||
- Storybook stories with autodocs, variants, and a11y coverage
|
||||
- A Figma representation using bound tokens/variables
|
||||
- A Code Connect link bridging the two
|
||||
- An `addon-designs` embed in its story for side-by-side comparison
|
||||
- An `addon-designs` embed in its story if a Figma reference exists
|
||||
|
||||
---
|
||||
|
||||
@@ -79,22 +61,7 @@ Both addons are installed and registered in `.storybook/main.ts`.
|
||||
|
||||
---
|
||||
|
||||
## Code Connect — The Bridge Layer
|
||||
|
||||
Code Connect is the most important piece we haven't set up yet. It links Figma components to their React implementations, so:
|
||||
|
||||
- `get_design_context` returns our actual component code instead of generic markup
|
||||
- Designers see real implementation details in Figma's Dev Mode
|
||||
- The mapping grows as we build — each new component strengthens the bridge
|
||||
|
||||
**Setup:**
|
||||
1. As we build each component, call `add_code_connect_map` with label "React"
|
||||
2. For existing components, use `get_code_connect_suggestions` to get AI-suggested mappings
|
||||
3. Periodically run `get_code_connect_map` to audit coverage
|
||||
|
||||
---
|
||||
|
||||
## Skills and Tooling to Add
|
||||
## Skills and Tooling
|
||||
|
||||
### Adopt now
|
||||
|
||||
@@ -127,24 +94,22 @@ Code Connect is the most important piece we haven't set up yet. It links Figma c
|
||||
Regardless of entry point, every component should pass through these gates:
|
||||
|
||||
```
|
||||
[ ] Design reference exists (Figma frame OR code-first build)
|
||||
[ ] Tokens checked (get_variable_defs vs tokens.css — flag gaps)
|
||||
[ ] Design reference provided (Figma link, screenshot, or description)
|
||||
[ ] Tokens checked (reference vs tokens.css — flag gaps)
|
||||
[ ] Existing components checked (Storybook MCP list-all-documentation)
|
||||
[ ] React component built (TypeScript, Tailwind, cn(), forwardRef)
|
||||
[ ] Stories written (default + variants + edge cases + autodocs)
|
||||
[ ] Tests pass (Storybook MCP run-story-tests, including a11y)
|
||||
[ ] Visual verified (Figma screenshot vs Storybook side-by-side)
|
||||
[ ] Figma representation exists (designed by Richie OR pushed via use_figma)
|
||||
[ ] Code Connect linked (add_code_connect_map, label: React)
|
||||
[ ] Figma embed in story (addon-designs parameter)
|
||||
[ ] /simplify run
|
||||
[ ] Visual verified (Playwright screenshots of Storybook)
|
||||
[ ] Figma embed in story (addon-designs parameter, if reference exists)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Decisions Made
|
||||
|
||||
- **claude2figma skills** — Installed (4 skills in `.claude/skills/`)
|
||||
- **Code-first workflow** — Build in React + Storybook, use Figma as visual reference only (not as a build target)
|
||||
- **claude2figma skills** — Installed but deferred; will use when/if pushing designs to Figma later
|
||||
- **Storybook addons** — `addon-designs` + `addon-mcp` installed and registered
|
||||
- **Code Connect** — Link as we build, regardless of entry point
|
||||
- **Code Connect** — Deferred (requires Org/Enterprise Figma plan)
|
||||
- **Build order** — Start with primitives, work up to composites then layouts
|
||||
|
||||
Reference in New Issue
Block a user