メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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).