ui-tokens

デザイントークンマネージャー

使用するタイミング

StyleSeed デザインシステムのデザイントークンを表示、追加、または変更する必要がある場合に、このスキルを使用します。

使用しないタイミング

• コンポーネントにトークンを適用する場合 → /ss-component または /ss-pattern を使用します
• 既存コード内のトークン違反を見つける場合 → /ss-lint を使用します
• まだ存在しないブランド全体の色やフォントを選ぶ場合 — まずスキンを定義し、その後トークンを追加します
• CSS 以外のトークンシステム（Figma、ネイティブ iOS／Android）の場合 — Tailwind v4／CSS 変数のみが対象です

アクション：$0 | トークンの種類：$1 引数：$ARGUMENTS

トークンファイルの場所

種類	JSON ソース	CSS の実装
色	tokens/colors.json	css/theme.css :root + @theme inline
タイポグラフィ	tokens/typography.json	css/fonts.css + css/base.css
余白	tokens/spacing.json	Tailwind ユーティリティ（カスタム CSS は不要）
角丸	tokens/radii.json	css/theme.css @theme inline
影	tokens/shadows.json	css/theme.css :root

手順

list — 現在のトークンを表示

指定されたトークンファイルを読み込み、書式設定した表で表示します。

add — 新しいトークンを追加

1. トークンを JSON ソースファイル（tokens/*.json）に追加します
2. CSS カスタムプロパティを css/theme.css の :root の下に追加します
3. Tailwind ユーティリティが必要な場合は、@theme inline ブロックに追加します
4. ダークモード用のバリエーションがある場合は、.dark ブロックに追加します

update — 既存のトークンを変更

1. JSON ソースファイル内の値を更新します
2. theme.css 内の CSS カスタムプロパティを更新します
3. 直接使用していて更新が必要な可能性がある箇所を、すべてのコンポーネントで確認します

ルール

• JSON と CSS は常に同期させます
• 説明的な名前ではなく、意味を表す名前を使用します（--green-500 ではなく --success）
• 色はライトモードとダークモードの両方に対応させます
• 新しいトークンは JSON ソースと CSS 実装の両方に追加する必要があります

例

ユーザーのリクエスト：

@ui-tokens を使ってこのインターフェースを確認し、影響の大きいデザイン上の問題を特定して、実装可能な改善案を提案してください。

制限事項

• タスクが上流のソースとローカルプロジェクトのコンテキストに明確に合致する場合にのみ、このスキルを使用します。
• 変更を適用する前に、コマンド、生成コード、依存関係、認証情報、外部サービスの動作を確認します。
• 例を、環境固有のテスト、セキュリティレビュー、破壊的または高コストな操作に対するユーザー承認の代わりとして扱わないでください。

実行上の境界

このガイドは、既存の StyleSeed プロジェクトを対象としています。記載されているプロジェクトパス、コンポーネント、トークン、/ss-* コマンドは、この単一ファイルのエントリーポイントには含まれていません。編集する前に、実際のプロジェクトルートを特定し、前提条件を確認してください。リソースが見つからない場合は、作り上げずにその旨を報告してください。ホストがサポートする呼び出し方法と、既存のプロジェクト規約を使用してください。レイアウトの数値はデザインシステム上の選択であり、普遍的なユーザビリティの保証ではありません。実際のインターフェースで、キーボード操作、レスポンシブ時のはみ出し、動きの軽減をテストしてください。