mcpField
P
platform-design-skills

platform-design-skills

github.com/podoデザイン・UI29165 回インストール1 日前に更新
リポジトリ

platform-design-skills について

platform-design-skillsは、クロスプラットフォームのUI設計向けガイド集です。Apple Human Interface Guidelines、Material Design 3、WCAG 2.2のルールを、iOS、Android、macOS、Web向けにまとめています。

主な機能

  1. 01300以上のデザインルール
  2. 02Apple HIGのガイド
  3. 03Material Design 3のガイド
  4. 04WCAG 2.2のアクセシビリティルール
  5. 054プラットフォームの設計慣例

活用シーン

  1. 01プラットフォームに適したタッチ領域の確認
  2. 02慣例に沿ったナビゲーションの選択
  3. 03タイポグラフィとコンポーネント慣例の適用
  4. 04アクセシビリティ要件の確認

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill platform-design-skills

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

同梱ファイルstub.yaml

詳細

platform-design-skills

カタログのスタブ — パッケージ全体はこちら：ehmo/platform-design-skills

判断ツリー

クロスプラットフォームの UI 設計作業を始める前に、以下を実行してください。

  1. platform-design スキルはすでにインストールされていますか？ 確認方法：~/.design-agent-skills/skills/platform-design/SKILL.md が存在するか確認します（代表例）。

    • はい → 該当するプラットフォームスキルを呼び出して、作業を進めます
    • いいえ → ステップ 2 に進みます

  2. シェルにアクセスできますか？

    • はい → 以下のインストールコマンドを実行してから、スキルを呼び出します
    • いいえ → インストールコマンドを表示します。Claude Code では、! で始まるチャットメッセージとして送信します。グローバルにインストールする場合は -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

npx skills add ehmo/platform-design-skills

インストール後の呼び出し

  • インストール済みのスキル名を確認します：ls ~/.design-agent-skills/skills/ | grep platform
  • トリガーフレーズ：「プラットフォームデザイン」、「HIG のルール」、「Material Design 3」、「クロスプラットフォーム」

機能

Apple の Human Interface Guidelines、Google の Material Design 3、WCAG 2.2 に基づく 300 以上のデザインルールを、ひとつのパッケージにまとめています。iOS、Android、macOS、Web の各プラットフォームの慣習にアプリが準拠できるよう、適切なタッチターゲット、ナビゲーションパターン、タイポグラフィのスケール、コンポーネントの動作、プラットフォームごとのアクセシビリティ要件を定めています。

コメント

Markdown 対応