mcpField
A
application

application

github.com/bergsideデザイン・UI3.4k335 回インストール17 週間前に更新
リポジトリ

application について

applicationは、デザイナーやエンジニアが実用的なアプリ画面の指針を作るためのデザインシステムスキルです。トップバー、カード型レイアウト、紫の配色を基盤とし、コンポーネントとアクセシビリティの要件を含みます。

主な機能

  1. 01モダンなアプリダッシュボードの基盤
  2. 02トップバーのナビゲーションと構造化グリッド
  3. 03カード型コンテンツレイアウト
  4. 04紫を基調としたデザイントークン
  5. 05WCAG 2.2 AAとキーボード操作の指針
  6. 06コンポーネント規則とQAチェックリスト

活用シーン

  1. 01アプリダッシュボードの画面指針の策定
  2. 02コンポーネント状態、余白、色の使い方の統一
  3. 03コードレビュー用アクセシビリティ項目の準備

インストール

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

$npx skills add https://github.com/bergside/awesome-design-skills --skill application

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

同梱ファイルDESIGN.md

詳細

アプリケーションデザインシステムのスキル（汎用）

ミッション

Application 向けのデザインシステムガイドラインを作成する専門家として、実践的で実装可能なガイダンスを作成します。エンジニアやデザイナーがそのまま活用できる内容にしてください。

ブランド

Vercel/GitHub に着想を得た、明快さ、スピード、開発者を優先したワークフローを重視するモダンなアプリケーションダッシュボードです。インターフェースはシンプルさと視覚的階層を重視し、チームが単一のコントロールセンターからアプリケーションを簡単に監視、デプロイ、管理できるようにします。ナビゲーションはトップバーのみ（サイドバーなし）で、すっきりとした紫を基調とするデザインです。

スタイルの基礎

  • ビジュアルスタイル：モダン、クリーン、高コントラスト、ガラスのようなパネル、柔らかなシャドウ、角丸のコンポーネント
  • タイポグラフィのスケール：12/14/16/20/24/32 | フォント：primary=Inter、display=Inter、mono=JetBrains Mono | ウェイト：100、200、300、400、500、600、700、800、900
  • カラーパレット：プライマリー（紫）、ニュートラル、成功、警告、危険 | トークン：primary=#9333ea、secondary=#a855f7、success=#10b981、warning=#f59e0b、danger=#ef4444、surface=#FFFFFF、text=#09090b
  • レイアウト：トップバーのみのナビゲーション、構造化されたグリッドレイアウト、カードベースのコンテンツ
  • 余白のスケール：4/8/12/16/24/32

アクセシビリティ

WCAG 2.2 AA、キーボード優先の操作、視認できるフォーカス状態

文体

簡潔で、自信があり、親切

ルール：実施すること

  • 生の値よりもセマンティックトークンを優先する
  • 視覚的階層を保つ
  • インタラクション状態を明示する

ルール：実施しないこと

  • コントラストの低いテキストを避ける
  • 余白のリズムに一貫性のない状態を避ける
  • 曖昧なラベルを避ける

期待される動作

  • まず基礎に従い、その後にコンポーネントの一貫性を確保します。
  • 判断に迷う場合は、目新しさよりもアクセシビリティと明快さを優先します。
  • 代替案がある場合は、具体的なデフォルトを示し、トレードオフを説明します。
  • ガイダンスは独自の見解を明確にし、簡潔で、実装に重点を置いたものにします。

ガイドライン作成ワークフロー

  1. ルールを提示する前に、デザインの意図を一文で言い換えます。
  2. コンポーネント単位のガイダンスより先に、トークンと基礎となる制約を定義します。
  3. コンポーネントの構造、状態、バリエーション、インタラクションの動作を明確にします。
  4. アクセシビリティの合格基準と、コンテンツ作成に関する期待事項を含めます。
  5. 既存の一貫性に欠ける UI に向けたアンチパターンと移行時の注意点を加えます。
  6. コードレビューで実施できる QA チェックリストで締めくくります。

必須の出力構成

デザインシステムのガイダンスを作成する際は、次の構成を使用します。

  • コンテキストと目標
  • デザイントークンと基礎
  • コンポーネント単位のルール（構造、バリエーション、状態、レスポンシブ動作）
  • アクセシビリティ要件とテスト可能な合格基準
  • 例を含むコンテンツと文体の基準
  • アンチパターンと禁止される実装
  • QA チェックリスト

コンポーネントルールの要件

  • 必須の状態を定義します：デフォルト、ホバー、フォーカス可視、アクティブ、無効、読み込み中、エラー（該当する場合）。
  • キーボード、ポインター、タッチでの操作動作を説明します。
  • 余白、タイポグラフィ、カラートークンの使い方を明示します。
  • レスポンシブ動作とエッジケース（長いラベル、空の状態、オーバーフロー）を含めます。

品質基準

  • 曖昧な形容詞だけに依存するルールは設けず、各ルールをトークン、しきい値、または例に結び付けます。
  • アクセシビリティに関するすべての記述は、実装でテストできるものにします。
  • 個別の局所最適化よりも、システム全体の一貫性を優先します。
  • 美観とアクセシビリティが衝突する場合は、その問題を明示し、アクセシビリティを優先します。

制約を表す文言の例

  • 譲れないルールには「必須」、推奨事項には「推奨」を使います。
  • 実施するルールごとに、具体的な禁止例を少なくとも1つ添えます。
  • 新しいパターンを導入する場合は、既存コンポーネントの移行ガイダンスを含めます。

コメント

Markdown 対応