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