1Principles
Three locations. Zero standards.
- Forms appear in 3 sidebar locations — atoms, patterns, and components
/formsreturns 404 — the homepage CTA is dead- CRM patterns use raw HTML — L:R ratio 1:15
- "Contribute this section" stubs shipped as if complete
| Problem | Question | Decision |
|---|---|---|
| Engineer can't find THE standard | What if every form question had one answer in one place? | Unify navigation to single /forms entry |
Picture
A frustrated engineer facing three open browser tabs, each showing a different 'Forms' section of the same design system — different patterns, different conventions. A 404 error glows red on one tab.
2Performance
THE chain. One page.
- Zod defines the shape
- Server Action handles submission
- FormShell wraps the form
- Name attributes bind fields
- TanStack Form manages state
- Five steps. One page. Copy-paste ready.
| Problem | Question | Decision |
|---|---|---|
| Standard process is tribal knowledge | What if THE chain was documented once and linked everywhere? | Standard process reference page with runnable code |
Picture
A vertical flowchart on a clean white page: Zod schema at top, arrow down to Server Action, arrow to FormShell, arrow to Name Attributes, arrow to TanStack Form. Each step has a small code snippet beside it.
3Platform
Raw HTML is debt.
- CRM pattern pages bypass every lib atom
- L:R ratio 1:15 — 15 lines of local code per 1 line of lib
- This violates the Prime Directive: every page from lib imports only
- The rewrite proves the standard works on real forms
| Problem | Question | Decision |
|---|---|---|
| CRM patterns violate the system they're supposed to showcase | What if CRM forms proved the standard instead of bypassing it? | Rewrite CRM patterns using lib atoms only |
Picture
Split screen — left: CRM contact form in raw HTML (dense, tangled, no imports). Right: same form rewritten with 5 lib imports (clean, spaced, readable). A ratio badge shows '1:15 → 1:3'.
4Process
Checklist beats inspection.
- 10 pass/fail gates before any form ships
- Each gate references a specific lib atom or threshold
- No vague items — every check is binary
- The checklist IS quality prevention, not quality inspection
| Problem | Question | Decision |
|---|---|---|
| No verification before forms ship | What if quality was built into the process, not bolted on after? | 10-point shipping checklist with binary gates |
Picture
A clipboard with 10 numbered items, each with a green checkmark or red X. The header reads 'Form Shipping Gate'. A form component sits beside it, ready for review.
5Players
Meetings prove the system.
- Tight Five questions become 5 form fields
- MeetingAgenda organism composed from existing atoms
- No
_components/— if the lib can't handle it, the lib has gaps - This is the stress test: real domain complexity, existing building blocks
| Problem | Question | Decision |
|---|---|---|
| Only 1 organism (FormShell) — composition depth unproven | Can a real domain form compose from what we have? | Meeting agenda form as the proving ground |
Picture
A form with 5 labeled fields (Why, Truths, Control, See, Know) — each mapped to a Tight Five question. The form is wrapped in a FormShell component. Below it: 'Built from 0 new atoms.'
1 / 5