mcpField
M
material-3-skill

material-3-skill

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

material-3-skill について

material-3-skill は、Android インターフェースを構築するエージェント向けに Material Design 3 を解説します。Jetpack Compose を中心に、Flutter も扱います。

主な機能

  1. 01ダイナミックカラーとトーンパレット
  2. 0230 種類以上の Jetpack Compose コンポーネント
  3. 03色・タイポグラフィ・形状・標高のトークン
  4. 04レスポンシブなナビゲーションとレイアウト
  5. 05モーションパターンと準拠監査
  6. 06Flutter の補足ガイダンス

活用シーン

  1. 01Jetpack Compose で Android インターフェースを構築
  2. 02Material 3 の色とタイポグラフィのトークンを適用
  3. 03ウィンドウサイズクラスに応じたナビゲーションの選択
  4. 04Material 3 準拠状況の確認

インストール

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

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

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

同梱ファイルstub.yaml

詳細

material-3-skill

カタログの概要 — スキルの全容：hamen/material-3-skill

スキルの全容をインストールする

スキルをエージェントのディレクトリにクローンするか、コピーしてください。

グローバル：

mkdir -p ~/.agents/skills/material-3-skill
curl -fsSL https://raw.githubusercontent.com/hamen/material-3-skill/master/skills/material-3/SKILL.md \
  -o ~/.agents/skills/material-3-skill/SKILL.md

プロジェクト：

mkdir -p .agents/skills/material-3-skill
curl -fsSL https://raw.githubusercontent.com/hamen/material-3-skill/master/skills/material-3/SKILL.md \
  -o .agents/skills/material-3-skill/SKILL.md

機能

Google の Material Design 3 システムに関する深い専門知識を提供します。以下をカバーします。

  • ダイナミックカラー — ColorScheme.fromSeed、トーンパレットの生成、ライト／ダークスキームの導出
  • コンポーネントライブラリ — Jetpack Compose の 30 以上の MD3 コンポーネントと、正しいトークンのバインディング
  • トークンシステム — 色の役割、タイポグラフィのスケール、形状のスケール、エレベーション／トーンエレベーション
  • レイアウト — ウィンドウサイズクラスに応じた Scaffold、NavigationBar、NavigationRail、NavigationDrawer の使い分け
  • モーション — スプリングベースのアニメーション、共有要素トランジション、コンテナ変換
  • 準拠性監査 — MD3 への準拠度を評価する 10 カテゴリのチェックリスト
  • Flutter — ThemeData と useMaterial3: true による補助的なカバー範囲

使用しない場合

  • iOS／SwiftUI — apple-hig-skills または liquid-glass-skill を使用してください
  • クロスプラットフォームの HIG パターン — platform-design-skills を使用してください
  • Compose を使わない Android デザイン（XML Views）— このスキルは Compose を優先しています

コメント

Markdown 対応