| name | spectra-design-review |
| description | Review a UI change against Spectra's design language. Use when evaluating a component or screen for conformance — tokens, hierarchy, states, layout, accessibility — before it ships. |
spectra-design-review
Review against the principles in foundations/principles/. Report findings as conform / nit / blocker, citing the principle by section. Two layers: the design-language layer (below) and the code layer (the .cursor/rules/ adapter for the surface).
Draft note: this reflects Astronomer's UX direction and is pending a design-team review pass. Frame findings as questions where the code can't settle it.
Design-language pass
- Tokens — every color/space/radius/z/shadow/duration references a token? Semantic (not primitive) where one exists? No hardcoded values? (
01-colors, universal rules)
- Dual-mode — any hardcoded color that breaks dark mode? Borders/images that assume a light background?
- Hierarchy — one primary CTA? Secondary actions neutral? Section titles are headings, not bold text? (
02-typography, 07-components)
- States — empty, loading (skeleton), error (inline), and partial-data all handled? No spinner chains or refetch flashes? (
07-components)
- Layout — page owns vertical rhythm (no leaf top-margins, no negative-margin hacks)? Flex children can shrink/truncate? Concentric radii? (
03-layout, 05-shapes)
- Content —
— for empty, … character, curly quotes, tabular numbers, no abbreviations, specific button labels? (02-typography)
- Motion — reduced-motion honored, only
transform/opacity, no transition: all? (06-motion)
- Accessibility — see
spectra-accessibility (contrast, focus, keyboard, semantic elements).
Edge cases to render mentally
For each UI element, imagine: very long text, empty/missing optional fields, zero / one / hundreds of items, narrow/dense containers, dark mode. A layout that breaks under these is a blocker; suboptimal-but-functional is a nit.
Voice
Suggestive, not directive — "could drop this for consistency," "might be worth checking a multi-line value here." Cite the pattern you see nearby, not an abstract rule.
