| name | craft-signals |
| description | Consistent radii, pixel-perfect alignment, state coverage, and the details that signal design quality. Use when polishing designs, auditing quality, or evaluating whether a design is ready to ship. |
Craft Signals
The details that separate 'designed' from 'well-designed.'
How to use
/craft-signals Apply craft quality constraints to this conversation.
Constraints
Consistency Checks
- MUST ensure consistent border radii from the same scale (4, 8, 12, 16, not 4 here and 5 there)
- MUST ensure alignment is pixel-perfect where intended. Near-alignment looks worse than deliberate offset.
- MUST ensure the same component looks and behaves the same everywhere it appears
- SHOULD ensure transitions share the same easing curve and follow a proportional duration scale
State Coverage
- MUST cover all states: loading, empty, error, success, partial, overflow, truncation
- MUST design each state intentionally, not rely on browser defaults
- SHOULD ensure error messages are specific and actionable, not generic
- SHOULD ensure loading states give spatial hints about what's coming (skeletons over spinners)
Transition Quality
- Feedback transitions (button press, toggle): 50-150ms, nearly instant
- Navigation transitions (page change, panel open): 200-400ms, noticeable but fast
- Emphasis transitions (notification, celebration): 300-600ms, deliberate
- NEVER let animation block content. If you have to wait for an animation to finish before reading, it's a bug.
Anti-Patterns
- Inconsistent radii across component types
- Loading states that last longer than the actual load
- Error states that say "something went wrong" with no guidance
- Hover effects on every element (motion should guide attention, not create noise)
