mcpField
D
design-system

design-system

github.com/oakossデザイン・UI20150 回インストール11 週間前に更新
リポジトリ

design-system について

製品間で一貫したビジュアル基盤を構築するチーム向けのデザインシステムスキルです。トークン、テーマ、コンポーネントパターン、アクセシビリティ、ガバナンスを扱います。

主な機能

  1. 01階層型デザイントークン構成
  2. 02ダークモードとマルチブランドテーマ
  3. 03コンポーネント API パターン
  4. 04アクセシビリティの実践
  5. 05トークンとコンポーネントのガバナンス
  6. 06デザインシステムのツール案内

活用シーン

  1. 01ハードコードされたスタイルのトークン化
  2. 02ダークモードやブランドテーマの計画
  3. 03コンポーネントのアクセシビリティ確認
  4. 04Storybook でのコンポーネント文書化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill design-system

インストール後、Claude Code で/design-systemを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
accessibility.md
color-and-typography.md
component-architecture.md
design-tokens.md
governance.md
motion-and-layout.md
theming.md
tooling.md
troubleshooting.md

詳細

デザインシステム

概要

規模が大きくなっても視覚的な一貫性を保つための唯一の信頼できる情報源であり、デザインとエンジニアリングの共通言語です。トークンのアーキテクチャ、テーマ設定のインフラストラクチャ、コンポーネント API のパターン、アクセシビリティへの準拠、ガバナンスのワークフローを網羅します。

デザインシステムは、単なるコンポーネントライブラリではありません。トークン、パターン、ドキュメント、コントリビューションのプロセスを統合することで、チームが一度構築すれば一度の保守で済むようにします。

クイックリファレンス

領域パターン主なポイント
トークンの階層構造プリミティブ > セマンティック > コンポーネントコンポーネント内でプリミティブを直接参照せず、テーマ設定可能なセマンティックレイヤーを使います
ダークモードdata-theme でセマンティックトークンを切り替える真っ白／真っ黒ではなく、オフホワイト／ダークグレーを使います
マルチブランドのテーマ設定ブランドごとにセマンティックトークンをオーバーライドする実行時に CSS カスタムプロパティで適用します
Tailwind v4CSS 内の @theme ブロック（設定ファイル不要）CSS ファーストの設定により tailwind.config.js を置き換えます
CVA バリアントバリアントとサイズの組み合わせに cva() を使うVariantProps で型安全にし、cn() ユーティリティと組み合わせます
複合コンポーネントModal.Header、Modal.Body のサブパーツ設定よりコンポジションを優先し、暗黙的な状態には共有コンテキストを使います
ヘッドレス UIRadix プリミティブ + Tailwind クラスアクセシビリティは組み込み済みで、スタイルは独自に用意します
フォーカス管理すべてのコントロールに focus-visible:ring-2 を設定2px のソリッドアウトラインにオフセットを付け、キーボード操作時のみ表示します
モーションの低減prefers-reduced-motion メディアクエリすべてのトランジションとアニメーションの時間をほぼゼロにします
Style DictionaryJSON トークンを CSS／iOS／Android に変換outputReferences: true でトークンの参照チェーンを維持します
Storybookストーリー + autodocs + a11y アドオンアクセシビリティ監査を組み込んだ視覚的なドキュメントを提供します
ガバナンストークンとコンポーネントにセマンティックバージョニングを適用破壊的変更 = props／トークンの削除、マイナー変更 = 新規追加

よくある間違い

間違い正しいパターン
コンポーネントでプリミティブトークンを使う（blue-500）プリミティブにマッピングされるセマンティックトークン（interactive-primary）を参照します
インタラクティブ要素のフォーカス状態を省略するすべてのボタン、リンク、入力欄に focus-visible:ring-2 を追加します
本文のテキストに gray-400 を設定するWCAG AA のコントラスト比 4.5:1 を満たすため、gray-600 以上の暗さを使います
レイヤー間でトークンを循環参照させるトークンはプリミティブ > セマンティック > コンポーネントの一方向に流します
prefers-reduced-motion を無視するすべてのアニメーションをモーション低減用メディアクエリで囲みます
ホバー時に scale() 変換を使うレイアウトシフトを避けるため、translateY(-1px) とシャドウの変更を使います
コンポーネントファイルに HEX／px 値をハードコードするすべての視覚的な値はセマンティックトークンまたはコンポーネントトークンから取得します
テーマのオーバーライドで CSS を深くネストするセマンティックレイヤーで CSS カスタムプロパティをオーバーライドします
ページ読み込み時にテーマがちらつく（FOUC）body のレンダリング前に、同期的なテーマスクリプトを <head> に挿入します
レイヤーのないフラットなトークン一覧を使うプリミティブ、セマンティック、コンポーネントの階層に整理します

委任

  • トークンにすべきハードコード値をコードベースで監査する：Explore エージェントを使用します
  • コンポーネントライブラリをトークンベースのデザインシステムに移行する：Task エージェントを使用します
  • マルチブランドのテーマアーキテクチャを計画する：Plan エージェントを使用します
  • コンポーネント全体のアクセシビリティ準拠状況をレビューする：Task エージェントを使用します

motion スキルが利用可能な場合は、アニメーショントークンの統合とモーションデザインパターンを委任してください。

参考資料

  • デザイントークン — 3 層の階層、CSS カスタムプロパティ、TypeScript 定義、命名規則
  • テーマ設定 — ダークモード、テーマプロバイダー、マルチブランド、Tailwind v4、SSR のちらつき防止
  • カラーとタイポグラフィ — 60-30-10 ルール、コントラスト要件、タイプスケール、流動的なタイポグラフィ
  • コンポーネントアーキテクチャ — CVA バリアント、複合コンポーネント、ヘッドレス UI、多態的なレンダリング
  • アクセシビリティ — WCAG 準拠、キーボードナビゲーション、ARIA パターン、スクリーンリーダーのテスト
  • モーションとレイアウト — アニメーショントークン、動きを抑える設定、スペーシンググリッド、エレベーションシステム
  • ツール — Style Dictionary、Storybook、コンポーネントテスト、ビジュアルリグレッション
  • ガバナンス — バージョン管理、非推奨化、貢献ワークフロー、コンポーネントのライフサイクル
  • トラブルシューティング — よくある問題、ダークモードの修正、トークンの乱立、納品前チェックリスト

コメント

Markdown 対応