Spectra Design Review

astronomer/spectra/skills/spectra-design-review

designOfficial

Official Provider SkillView repo

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.

Files1 files

SKILL.md1 lines

Loading editor…

Install

Recommended

One command — your agent picks it up automatically.

Select AI agent

Select an AI agent above to see the install command.

Manual Install

More steps

Download the file and paste it into your agent's system prompt.

Skill details

Versionv1.0.0

AuthorAstronomer

Categorydesign

Skill IDastronomer/spectra/skills/spectra-design-review

Related skills

Spectra AccessibilityCheck 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.Spectra Component AuthoringImplement 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.Spectra TokensConsume 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.Component FixturesUse when creating or updating component fixtures for screenshot testing or their shared infrastructure, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls.Design PhilosophyThe VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.Ux Css LayoutVS Code CSS conventions, file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns. Use when writing CSS, building layouts, or fixing text truncation issues.