ui-principles
UI Principles
A restrained product UI system. The aesthetic is calm confidence — good UI lasts and stays out of the way. If a piece feels like it's trying to impress, it has failed. Full source text and the "why" behind each rule: PRINCIPLES.md. Worked before/after patterns: EXAMPLES.md.
This skill enforces rules, not numbers. It does not ship a type scale, palette, spacing scale, or radius. Each project defines its own values — the skill makes sure those values are used with discipline. Where a project already has tokens (CSS variables, a Tailwind theme, a design system), bind to those; never hardcode a one-off.
Relationship to calm-ui
This skill is the framework-agnostic core; calm-ui is its React/Next.js/shadcn binding — the same aesthetic with the numbers filled in (type-scale ceilings, radius values, component recipes). On those stacks, use calm-ui; everywhere else, use this skill. The two state the same positions: hierarchy escalates space → color → weight → size with body plus one deliberate statement size, and hover transitions touch color/background only.
When a project runs the design-loop skill, these seventeen principles can seed /design.md — the loop turns them into per-project rules with the project's own numbers.
Order of attention
Fix in this sequence — earlier wins beat later polish. Alignment → padding → hierarchy → color → motion. Most "off" layouts are a spine break or padding asymmetry, not a missing color.