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.

Ir a la instalación

Repositorio: astronomer/spectra
Última actividad en el origen: 27 de julio de 2026 a las 14:29
Idioma detectado de SKILL.md: inglés
Estrellas: 4
Forks: 0

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

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

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

spectra-accessibility

Check UI for accessibility. Use when building or reviewing any interactive UI — contrast, focus, keyboard operability, semantic elements, reduced motion — to meet Astronomer's WCAG 2.1 AA policy.

2026-07-27

spectra-component-authoring

Implement a component from its Spectra spec. Use when building a new component (or a framework port of an existing one) so it satisfies the shared contract — variants, sizes, states, a11y — in React/Chakra or Svelte.

2026-07-27

spectra-tokens

Consume Spectra design tokens correctly. Use when styling any UI — picking a color, spacing, radius, shadow, z-index, or duration — to reference tokens instead of hardcoding values, in React/Chakra or Svelte or plain CSS.

2026-07-27

Ver todos los de este repositorio

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.