material-design

• Material Design 3スタイルのUIコンポーネントを作成する時
• 動的カラーシステム（Material You）を実装する時
• Google風のデザインが明示的に要求された時
• アクセシビリティ重視のコンポーネントを作成する時
• State Layersやリップルエフェクトを実装する時

UIコンポーネント編集時は .claude/rules/ui-design.md が自動適用されます。

Material Design 3の詳細な実装が必要な場合は、以下の公式リソースを参照:

• [Material Design 3](https://m3.material.io/)
• [Color Roles](https://m3.material.io/styles/color/roles)
• [Components](https://m3.material.io/components)

```typescript

const colorRoles = {

primary: '#6750A4',

onPrimary: '#FFFFFF',

secondary: '#625B71',

surface: '#FEF7FF',

error: '#B3261E',

};

```

1. カラーロールシステム を使用（直接色指定しない）
2. アクセシビリティファースト - コントラスト4.5:1以上
3. State Layers でインタラクティブ状態を表現
4. タッチターゲット 最小48x48dp

このスキルが有効化された時:

1. デフォルト確認: このプロジェクトはApple風が基本。Material Designが明示的に要求されているか確認
2. カラーロール使用: 直接色指定ではなくsemantic tokensを使用
3. アクセシビリティ検証: コントラスト比を確認

Always:

• カラーロールシステム（primary, secondary, surface等）を使用する
• タッチターゲットは最小48x48dpを確保する
• State Layers（hover: 8%, pressed: 12%等）を実装する
• コントラスト比4.5:1以上を確保する

Never:

• 直接色コード（#RRGGBB）をハードコードしない
• アクセシビリティ要件を無視しない
• Apple風デザインと混在させない（どちらかに統一）