菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/astronomer/spectra --skill spectra-component-authoring命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
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.
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.
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.
基于 SOC 职业分类
正在显示 SKILL.md
| name | spectra-component-authoring |
| description | 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. |
A Spectra component is defined once as a framework-neutral spec and implemented per framework. Start from the spec; don't invent the contract.
foundations/specs/<Component>/ — variants, sizes, states, interaction/keyboard behavior, a11y requirements, and the embedded components: token-mapping (its visual half).apps/ui/libs/spectra) — extend it, don't duplicate. Ground truth for behavior is the monorepo.spectra-tokens — semantic tokens, never hardcoded values. Every variant/size/state maps to tokens from the spec's mapping block.spectra-design-review.spectra-accessibility — correct element (button vs link), keyboard operability, focus visibility, labels.spectra-design-review before done.--spectra-* CSS vars; satisfy the same contract. Component code does not port from React — the spec is what's shared.Specs track the monorepo. If a component's real behavior lives in runtime theme functions (e.g. astro-theme/.../Button.ts), that file is ground truth; note the divergence so the spec can be updated (a checksum flag on those files triggers spec review).