1---
 2tagline: "Pull drifted UI back into the design system."
 3---
 4
 5## When to use it
 6
 7`/normalize` is for the page that looks almost right but is not. Hard-coded colors where tokens should be, one-off spacing, a custom button that should have been the shared button, component markup that drifted during a rushed feature. Use it when consistency has decayed and you want to pull the feature back in line with the design system.
 8
 9Good triggers: "this page uses a different button", "the spacing feels wrong compared to the rest of the app", "why is this blue different from the other blue".
10
11## How it works
12
13The skill audits the target against the design system, then fixes the drift:
14
151. **Tokens**: find every hard-coded color, spacing, radius, or shadow. Replace with the right token. Flag cases where no token fits (usually a sign the token system needs extending).
162. **Components**: find custom implementations of things the library already provides. Replace with the shared component, preserving functionality.
173. **Patterns**: find layouts that deviate from the standard patterns (form layouts, card grids, page headers). Align with the convention.
184. **Spacing and rhythm**: align to the spacing scale, fix any random pixel values.
195. **Typography**: make sure type styles come from the system, not one-off font-size/weight combinations.
20
21Normalize is conservative. It does not redesign. It makes the feature match what the rest of the app already does.
22
23## Try it
24
25```
26/normalize the billing page
27```
28
29Typical diff:
30
31- 14 hard-coded hex values replaced with `var(--color-*)` tokens
32- 6 one-off spacing values (13px, 27px, 11px) aligned to 8 / 16 / 24 / 32
33- Custom "Upgrade" button replaced with `<Button variant="primary">` from the shared library
34- Form layout restructured to use the shared `FormRow` component
35- Font weight for section headings unified (was mixing 500 and 600 across similar headings)
36
37## Pitfalls
38
39- **Using normalize to redesign.** If you find yourself wanting to change how things look, not just make them consistent, you want `/polish` or `/arrange`. Normalize enforces consistency with what exists.
40- **Skipping the token gap analysis.** When normalize flags "no token fits", that is signal. Extend the token system before shipping, or the drift will come back.
41- **Running normalize on a prototype.** If the feature is still exploring, consistency is premature optimization. Normalize ships-ready features.