mcpField
D
design-frontend

design-frontend

github.com/ravnhqデザイン・UI1657 回インストール21 週間前に更新
リポジトリ

design-frontend について

Web UIの実装者向けに、レスポンシブレイアウト、デザイントークン、ダークモードのパターンを案内するガイドです。Tailwind CSS v4とCSS変数を中心に、実装ルールやトラブルシューティングも扱います。

主な機能

  1. 01デザイントークンとCSS変数
  2. 02モバイルファーストのレイアウト
  3. 03コンテナクエリのパターン
  4. 04ダークモードとコントラスト
  5. 05アクセシブルなコンポーネント指針

活用シーン

  1. 01コンポーネントライブラリのテーマトークン設定
  2. 02モバイル対応レイアウトの実装
  3. 03ダークモードの可読性確認

インストール

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

$npx skills add https://github.com/ravnhq/ai-toolkit --skill design-frontend

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

同梱ファイル

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

rules/
_sections.md
layout-avoid-important.md
layout-max-width-containers.md
layout-use-spacing-scale.md
responsive-container-queries.md
responsive-mobile-first.md
responsive-touch-targets.md
token-dark-mode-colors.md
token-never-hardcode-colors.md
token-use-cn-utility.md

詳細

Web UI 向けビジュアルデザインシステム

一貫性があり、アクセシブルで、レスポンシブなインターフェースを実現するためのデザインシステムのパターンです。Tailwind CSS v4 では、実行時のテーマ設定に CSS 変数を使用できるようになり、状況が大きく変わりました。主なパターンは、デザイントークン（色、スペーシング、タイポグラフィ）、レスポンシブブレークポイントとコンテナークエリ、適切なコントラストを備えたダークモード、コンポーネントの構成、スペーシングスケールです。

主な課題：トークンの代わりに値をハードコードする（保守が困難）、モバイルファーストの考え方を取り入れずにレスポンシブデザインを実装する、ダークモードを後付けで実装する（アクセシビリティに問題がある）、ビューポートだけでなくコンポーネント単位のレスポンシブ対応にコンテナークエリを使用することです。

ワークフロー

ビジュアルデザインを実装する際は、次の手順に従います。

  1. トークンを定義する — 色、スペーシング、タイポグラフィ、シャドウを @theme 内の CSS 変数として定義します
  2. コンテナーを選ぶ — コンテナークエリを使用するため、コンポーネントを @container で囲みます
  3. モバイルファーストで構築する — モバイルレイアウトから始め、ブレークポイントを段階的に追加します
  4. ダークモードをテストする — dark: バリアントを使用し、コントラスト比を確認します
  5. タッチターゲットを検証する — インタラクティブ要素は最小 44x44px にします
  6. パフォーマンスを測定する — CSS-in-JS ライブラリは描画時間に影響します。Tailwind はランタイムを使用しません

ルール

パターンは関心事ごとに整理されています。

  • レイアウト — 最大幅のコンテナー、一貫したスペーシング、視覚的階層
  • レスポンシブデザイン — モバイルファーストのアプローチ、ブレークポイント、コンテナークエリ
  • デザイントークン — カラースケール、スペーシングスケール、タイポグラフィのファミリー
  • ダークモード — 適切なコントラスト、色の組み合わせ、テーマ設定用の CSS 変数
  • コンポーネント — タッチターゲット、アフォーダンス、アクセシビリティ

実装パターンと例については、rules/ を参照してください。

例

トリガーとなる例

ユーザー：「コンポーネントライブラリ向けに、ダークモードをサポートする Tailwind のデザイントークンシステムをセットアップしてください。」

期待される動作：design-frontend のガイダンスを使用し、CSS 変数と色の組み合わせを使ったトークンパターンを適用します。

トリガーとならない例

ユーザー：「ユーザー認証用の Node.js REST API を作成してください。」

期待される動作：design-frontend を優先せず、より関連性の高いスキルを選ぶか、そのスキルを使わずに進めます。

  • エラー：クラス内に色の値をハードコードする。テーマの変更にリファクタリングが必要になる

  • 原因：デザイントークンを使わず、コードベース内に色が散在している

  • 解決策：@theme を使って色を CSS 変数として定義し、var(--color-*) で参照します

  • エラー：ダークモードが色あせて見える。暗い背景でコントラストが低い

  • 原因：色の組み合わせが個別に設計されており、色を反転すればよいと思い込んでいる

  • 解決策：ダークモード用のバリアントをテストし、適切なコントラスト比を備えたカラースケールを使用します

トラブルシューティング

  • エラー：コンテナークエリが機能しない。要素がコンテナーのサイズに応じて変化しない

  • 原因：親要素に @container クラスが指定されていない

  • 解決策：親要素に @container を追加し、子要素に @sm:、@md:、@lg: バリアントを使用します

  • エラー：ダークモードのスタイルが適用されない。dark: バリアントが無視される

  • 原因：ダークモードが設定されていない。設定で darkMode: "class" または "media" を使用します

  • 解決策：tailwind.config.js または CSS の @custom-variant でダークモードを設定します

  • エラー：タッチターゲットが小さすぎて、ユーザーがボタンをタップしにくい

  • 原因：デスクトップ向けに最適化しすぎて、モバイルでもマウスのような精密さを前提としている

  • 解決策：タッチターゲットには最低でも h-11 / w-11（44px）を使用します

コメント

Markdown 対応