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.

跳到安装

仓库: astronomer/spectra
最近来源活动: 2026年7月27日 14:29
检测到的 SKILL.md 语言: 英语
星标: 4
分支: 0

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

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

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

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.