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の詳細な実装が必要な場合は、以下の公式リソースを参照:

• Material Design 3
• Color Roles
• Components

カラーロールシステム（簡略）

const colorRoles = {
  primary: '#6750A4',
  onPrimary: '#FFFFFF',
  secondary: '#625B71',
  surface: '#FEF7FF',
  error: '#B3261E',
};

主要原則

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

AI Assistant Instructions

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

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風デザインと混在させない（どちらかに統一）