| name | material-design |
| description | Google Material Design 3 (Material You) に基づいたUIデザイン。動的カラーシステム、アダプティブデザイン、アクセシビリティ重視。UIコンポーネント作成時に使用。Use when "Material You", "Material Design", "Google style", "マテリアルデザイン" と言われた時。 |
| allowed-tools | Read, Grep, Glob, Edit, Write |
| user-invocable | true |
Material Design 3 (Material You)
このプロジェクトでは Apple風ダークモード を基本採用していますが、Material Design 3スタイルが必要な場合はこのスキルを使用してください。
When to Use This Skill
- Material Design 3スタイルのUIコンポーネントを作成する時
- 動的カラーシステム（Material You）を実装する時
- Google風のデザインが明示的に要求された時
- アクセシビリティ重視のコンポーネントを作成する時
- State Layersやリップルエフェクトを実装する時
詳細なガイドライン
UIコンポーネント編集時は .claude/rules/ui-design.md が自動適用されます。
Material Design 3の詳細な実装が必要な場合は、以下の公式リソースを参照:
カラーロールシステム（簡略）
const colorRoles = {
primary: '#6750A4',
onPrimary: '#FFFFFF',
secondary: '#625B71',
surface: '#FEF7FF',
error: '#B3261E',
};
主要原則
- カラーロールシステム を使用（直接色指定しない）
- アクセシビリティファースト - コントラスト4.5:1以上
- State Layers でインタラクティブ状態を表現
- タッチターゲット 最小48x48dp
AI Assistant Instructions
このスキルが有効化された時:
- デフォルト確認: このプロジェクトはApple風が基本。Material Designが明示的に要求されているか確認
- カラーロール使用: 直接色指定ではなくsemantic tokensを使用
- アクセシビリティ検証: コントラスト比を確認
Always:
- カラーロールシステム（primary, secondary, surface等）を使用する
- タッチターゲットは最小48x48dpを確保する
- State Layers（hover: 8%, pressed: 12%等）を実装する
- コントラスト比4.5:1以上を確保する
Never:
- 直接色コード（#RRGGBB）をハードコードしない
- アクセシビリティ要件を無視しない
- Apple風デザインと混在させない（どちらかに統一）