Design rules
The rules every UI Polish component is built on, as a skill your agent keeps and follows for the UI it writes itself. Each rule gives concrete values: durations, easings, spacing steps and shadow recipes.
Installation
Run this in your project:
A skill: Claude reads it when the work touches UI.
Already connected over MCP? You have them: the server hands your agent the rules as it works. Read the whole file at /rules.md.
What’s in it
- FoundationsThe few decisions everything else rests on
- TypographySizes, weights, line heights and tracking that hold up
- SpacingOne scale, and where each step goes
- SurfacesEdges, fills, shadows and how things sit on the page
- StatesLoading, empty, error, disabled and busy, done right
- MotionDurations, curves and springs for every kind of movement
- AntipatternsThe things that pass code review and still look wrong
- Tokens and checklistThe --ui-* roles every rule names, and the yes/no checks to run before calling UI done