spectra-design-review

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.

Jump to install

Repository: astronomer/spectra
Last source activity: July 27, 2026 at 14:29
Detected SKILL.md language: English
Stars: 4
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/astronomer/spectra --skill spectra-design-review

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

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.