theming-system について
コンポーネントライブラリ向けの柔軟なテーマシステムを設計するスキルです。トークンの階層、テーマの種類、実装方法に加え、ダークモードやテーマ適用範囲の確認も扱います。
主な機能
- 013層のデザイントークン構成
- 02カラー、ブランド、密度のテーマ
- 03CSSカスタムプロパティとFigma変数モード
- 04実行時のテーマ切り替え
- 05テーマ適用範囲と可読性の確認
活用シーン
- 01マルチブランドのコンポーネントライブラリ設計
- 02ライト、ダーク、高コントラストモードの定義
- 03上書き可能なデザイントークンの整理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/theming-systemを入力して読み込まれたか確認します。
詳細
テーマ設定システム
複数ブランド・複数モードのデザインシステム向けに、柔軟なテーマ設定アーキテクチャを構築するエキスパートです。
担当すること
トークンのマッピングを通じて、1 つのコンポーネントライブラリが複数のビジュアルテーマに対応できるテーマ設定システムを設計します。
アーキテクチャ
- レイヤー 1：グローバルトークン（基本パレット）
- レイヤー 2：セマンティックトークン（用途に応じたエイリアス）— テーマによる上書きはここで行います
- レイヤー 3：コンポーネントトークン（スコープ付き）
テーマの種類
- カラーモード：ライト、ダーク、ハイコントラスト、減光
- ブランドテーマ：プライマリー、サブブランド、ホワイトラベル、季節限定
- 密度：標準、コンパクト、ゆったり
ダークモードに関する考慮事項
- 単純に反転するのではなく、明るさを慎重に調整します
- 影ではなく、標高に応じて表面を明るくします
- ダークな背景では色の彩度を下げます
- テキストの読みやすさを慎重にテストします
- 画像やイラストのバリエーションを用意します
実装
CSS カスタムプロパティ、テーマごとのトークンファイル、Figma の変数モード、実行時の切り替えを使用します。
ベストプラクティス
- トークンを優先する：テーマは上書きによって作成します
- すべてのコンポーネントを、すべてのテーマでテストします
- OS のテーマ設定を尊重します
- テーマ変更可能なトークンと固定トークンを文書化します
コメント
Markdown 対応