§ Corrective
/refine
Component discipline — coherence, state completeness, shape system.
What it does
The default state is the one AI-generated components ship. Hover, active, focus, and disabled — usually undefined or rendering identically to default. Add inconsistent radii across variants and stripped focus rings on top, and you have the component layer most products never finish. /refine catches and corrects these patterns: missing states, drift across variants, the small system-level decisions that get skipped in favor of one-off choices.
Like the other correctives, it uses a smart-default autonomy model. Small consolidations and state additions get applied directly. Larger structural shifts — replacing the button system, rebuilding component primitives — are surfaced for your approval before executing.
Interactive
Morning Grounding
Begin the day with a few mindful minutes.
Mid-day Reset
A short pause to reset between meetings.
Evening Wind-down
Let the day settle before sleep.
When to use it
- Components feel inconsistent — radii, padding, weights drift across variants without an articulated reason.
- Interactive elements only show their default state; hover, active, focus, and disabled treatments are missing or render identically.
- Focus rings are stripped via outline:none with no replacement, breaking keyboard navigation.
- Disabled states are signalled only by cursor-not-allowed, with no visual treatment indicating the button can’t be used.
- Custom one-off components proliferate where shared primitives could carry the work.
- A /survey has flagged component issues and you want them addressed systematically.
How to use it
By default /refine runs a full pass — component coherence, state coverage, shape system, focus indicators, disabled treatment. Pass a scope to focus on one area, or describe the components you want refined in plain language. Component-level structural decisions (collapsing variants, restructuring a component’s anatomy) are surfaced for approval rather than applied silently.
- /refine states
- /refine buttons
Anti-patterns it addresses
- Buttons with inconsistent radii — one variant uses rounded-sm, another rounded-md, a third pill-shaped — without an articulated reason.
- Interactive components defined only in their default state, with hover, active, focus, and disabled rendering identically.
- Focus rings stripped via `outline: none` with no replacement, leaving keyboard users without an indicator.
- Disabled states signalled only by `cursor: not-allowed`, with no visual treatment distinguishing them from default.
- Custom one-off components proliferating where shared primitives could carry the work.