メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/astronomer/spectra --skill spectra-tokensコマンドは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.
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.
SOC 職業分類に基づく
SKILL.md を表示中
| name | spectra-tokens |
| description | 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. |
Spectra tokens have one origin (foundations/tokens/tokens.json) and three generated outputs. Always consume a generated output; never copy values out of the origin.
foundations/tokens/dist/css-vars.css. Use var(--spectra-*). Core tier only.bg="bodyBg").foundations/tokens/dist/DESIGN.md.bodyBg, bodyText, bodyTextMuted, linesDefault, focusOutlineColor over gray.*/moon.*. Primitive scales are raw material.default/_dark. Don't hand-write a dark variant.orange/lilac are deprecated.--spectra-color-<scale>-<step> (e.g. --spectra-color-moon-950), --spectra-color-<semantic> (e.g. --spectra-color-body-text-muted), --spectra-space-<n>, --spectra-radius-<name>, --spectra-z-<name>, --spectra-shadow-<name>, --spectra-duration-<name>, --spectra-easing-<name>.
Edit tokens.json, then pnpm generate:tokens and pnpm drift-check. Commit the regenerated dist/ with the change. Details: foundations/tokens/AGENTS.md.