Material Design 3 (Material You)

注意: このプロジェクトのデフォルトは ppt-trans-design スキル（翻訳xPPT編集SaaS専用デザインシステム）です。 別のデザインシステム（純粋なMD3）が明示的に要求された場合のみ本スキルを使用してください。

このプロジェクトでは ppt-trans独自デザインシステム（MD3トークン基盤）を基本採用していますが、純粋な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

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

MD3のカラーロールはCSS変数で参照する。hex直書き禁止。

// CSS変数経由で使用
className="bg-md-primary text-md-on-primary"    // hsl(var(--md-primary))
className="bg-md-secondary text-md-on-secondary" // hsl(var(--md-secondary))
className="bg-md-surface text-md-on-surface"     // hsl(var(--md-surface))
className="bg-md-error text-md-on-error"          // hsl(var(--md-error))

主要原則

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

AI Assistant Instructions

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

1. デフォルト確認: このプロジェクトは ppt-trans-design がデフォルト。純粋なMD3が明示的に要求されているか確認
2. カラーロール使用: 直接色指定ではなくCSS変数経由のsemantic tokensを使用
3. アクセシビリティ検証: コントラスト比を確認

Always:

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

Never:

• 直接色コード（#RRGGBB）をハードコードしない
• アクセシビリティ要件を無視しない
• ppt-trans-design の独自トークンと純粋MD3を混在させない（どちらかに統一）