Added Claude Skills

.claude/skills/material-thinking/references/components.md

@@ -0,0 +1,515 @@
+# Material 3 Components
+
+Material 3は38のドキュメント化されたコンポーネントを提供します。各コンポーネントには、概要、ガイドライン、仕様、アクセシビリティのサブページがあります。
+
+## Table of Contents
+
+1. [Action Components](#action-components)
+2. [Selection and Input Components](#selection-and-input-components)
+3. [Navigation Components](#navigation-components)
+4. [Containment and Layout Components](#containment-and-layout-components)
+5. [Communication Components](#communication-components)
+
+---
+
+## Action Components
+
+ユーザーがアクションを実行するためのコンポーネント。
+
+### Buttons
+
+#### Common Buttons
+主要なアクションのための標準的なボタン。
+
+**Variants:**
+- **Filled**: 最も高い強調度、プライマリアクション
+- **Filled Tonal**: 中程度の強調度、セカンダリアクション
+- **Outlined**: 線のみ、中程度の強調度
+- **Elevated**: 影付き、強調が必要だがFilledほどではない
+- **Text**: 最も低い強調度、補助的なアクション
+
+**Usage Guidelines:**
+- 1つの画面にFilledボタンは1つまで推奨
+- ボタンの階層を明確に（Filled > Tonal > Outlined > Text）
+- 最小タッチターゲット: 48×48dp
+- ラベルは動詞で開始（例: "保存", "送信", "削除"）
+
+URL: https://m3.material.io/components/buttons/overview
+
+#### Icon Buttons
+コンパクトな補助的アクションボタン。
+
+**Variants:**
+- Standard
+- Filled
+- Filled Tonal
+- Outlined
+
+**Usage:**
+- 繰り返し使用されるアクション（お気に入り、共有、削除）
+- 限られたスペース
+- アイコンのみで意味が明確な場合
+
+URL: https://m3.material.io/components/icon-buttons/overview
+
+#### Floating Action Button (FAB)
+画面の主要アクションのための浮遊ボタン。
+
+**Types:**
+- **FAB**: 標準的なFAB
+- **Small FAB**: 小さいFAB
+- **Large FAB**: 大きいFAB
+- **Extended FAB**: テキストラベル付きFAB
+
+**Guidelines:**
+- 1画面に1つのFAB推奨
+- 最も重要なアクションのみ
+- 配置: 通常は右下
+- スクロール時の動作を考慮（隠す/縮小）
+
+URL: https://m3.material.io/components/floating-action-button/overview
+
+#### Segmented Buttons
+関連するオプションの単一選択または複数選択グループ。
+
+**Usage:**
+- ビューの切り替え（リスト/グリッド）
+- フィルタリング（カテゴリ選択）
+- 設定オプション
+
+**Guidelines:**
+- 2-5個のオプション推奨
+- 各オプションは簡潔に（1-2語）
+- アイコン+テキストまたはテキストのみ
+
+URL: https://m3.material.io/components/segmented-buttons/overview
+
+---
+
+## Selection and Input Components
+
+ユーザーが選択や入力を行うためのコンポーネント。
+
+### Checkbox
+リストから複数のアイテムを選択。
+
+**States:**
+- Unchecked
+- Checked
+- Indeterminate（部分選択）
+
+**Usage:**
+- 複数選択
+- オン/オフ設定（ただしSwitchの方が適切な場合も）
+- リスト項目の選択
+
+URL: https://m3.material.io/components/checkbox/guidelines
+
+### Radio Button
+セットから1つのオプションを選択。
+
+**Usage:**
+- 相互排他的なオプション（1つのみ選択可能）
+- すべてのオプションを表示する必要がある場合
+- 2-7個のオプション推奨
+
+**Guidelines:**
+- デフォルト選択肢を提供
+- オプションは垂直に配置推奨
+- ラベルはクリック可能に
+
+URL: https://m3.material.io/components/radio-button/overview
+
+### Switch
+バイナリのオン/オフ切り替え。
+
+**Usage:**
+- 即座に効果が反映される設定
+- 単一アイテムの有効/無効化
+- リスト内の個別項目の切り替え
+
+**vs Checkbox:**
+- Switch: 即座に効果、状態の切り替え
+- Checkbox: 保存が必要、複数選択
+
+URL: https://m3.material.io/components/switch/guidelines
+
+### Text Fields
+テキスト入力用のフォームフィールド。
+
+**Types:**
+- **Filled**: デフォルト、背景塗りつぶし
+- **Outlined**: 線のみ、フォーム内で推奨
+
+**Elements:**
+- Label: 入力内容の説明
+- Input text: ユーザー入力
+- Helper text: 補助的な説明
+- Error text: エラーメッセージ
+- Leading/Trailing icons: アイコン
+
+**Guidelines:**
+- ラベルは簡潔に
+- プレースホルダーは補助的な例として使用
+- エラーは具体的に（"無効な入力" ではなく "有効なメールアドレスを入力してください"）
+
+URL: https://m3.material.io/components/text-fields/overview
+
+### Chips
+コンパクトな情報要素。
+
+**Types:**
+- **Assist**: アクションやヘルプのサジェスト
+- **Filter**: コンテンツのフィルタリング
+- **Input**: ユーザー入力（タグ、連絡先）
+- **Suggestion**: 動的な提案
+
+**Usage:**
+- タグや属性の表示
+- フィルタリングオプション
+- 選択されたアイテムの表示
+
+URL: https://m3.material.io/components/chips/guidelines
+
+### Sliders
+範囲内の値を選択。
+
+**Types:**
+- Continuous: 連続的な値
+- Discrete: 離散的な値（ステップ付き）
+
+**Usage:**
+- 音量、明るさ調整
+- 価格範囲選択
+- 数値設定
+
+URL: https://m3.material.io/components/sliders/specs
+
+### Date Pickers / Time Pickers
+日付と時刻の選択。
+
+**Date Picker Modes:**
+- Modal: ダイアログ形式
+- Docked: インライン表示
+
+**Time Picker Types:**
+- Dial: ダイヤル形式
+- Input: テキスト入力形式
+
+URL: https://m3.material.io/components/date-pickers
+
+---
+
+## Navigation Components
+
+アプリ内のナビゲーションを提供するコンポーネント。
+
+### Navigation Bar
+モバイル向けボトムナビゲーション。
+
+**Guidelines:**
+- 3-5個の主要な目的地
+- アイコン+ラベル（アイコンのみは避ける）
+- 常に表示（スクロールしても固定）
+- Compact window size class向け
+
+URL: https://m3.material.io/components/navigation-bar/overview
+
+### Navigation Drawer
+サイドナビゲーション。
+
+**Types:**
+- **Standard**: 画面端から開閉
+- **Modal**: オーバーレイ形式
+
+**Usage:**
+- 5個以上の目的地
+- Medium/Expanded window size class
+- アプリの主要セクション
+
+URL: https://m3.material.io/components/navigation-drawer/overview
+
+### Navigation Rail
+垂直方向のナビゲーション（中型画面）。
+
+**Usage:**
+- Medium window size class（タブレット縦向き）
+- 3-7個の目的地
+- 画面左端に固定
+
+URL: https://m3.material.io/components/navigation-rail/overview
+
+### Top App Bar
+画面上部のタイトルとアクション。
+
+**Types:**
+- **Small**: 標準的なアプリバー
+- **Medium**: 中サイズ（スクロールで縮小）
+- **Large**: 大サイズ（スクロールで縮小）
+
+**Elements:**
+- Navigation icon: 戻る、メニュー
+- Title: 画面タイトル
+- Action icons: 主要なアクション（最大3つ推奨）
+
+URL: https://m3.material.io/components/app-bars/overview
+
+### Tabs
+コンテンツを複数のビューに整理。
+
+**Types:**
+- Primary tabs: メインコンテンツの切り替え
+- Secondary tabs: サブセクションの切り替え
+
+**Guidelines:**
+- 2-6個のタブ推奨
+- ラベルは簡潔に（1-2語）
+- スワイプジェスチャーでの切り替えをサポート
+
+URL: https://m3.material.io/components/tabs/guidelines
+
+---
+
+## Containment and Layout Components
+
+コンテンツを整理・表示するためのコンポーネント。
+
+### Cards
+関連情報をまとめたコンテナ。
+
+**Types:**
+- **Elevated**: 影付き
+- **Filled**: 背景塗りつぶし
+- **Outlined**: 線のみ
+
+**Usage:**
+- 異なるコンテンツのコレクション
+- アクション可能なコンテンツ
+- エントリーポイント
+
+**Guidelines:**
+- 過度に使用しない（リストで十分な場合も）
+- 明確なアクションを提供
+- 情報の階層を維持
+
+URL: https://m3.material.io/components/cards/guidelines
+
+### Lists
+垂直方向のテキストと画像のインデックス。
+
+**Types:**
+- Single-line
+- Two-line
+- Three-line
+
+**Elements:**
+- Leading element: アイコン、画像、チェックボックス
+- Primary text: メインテキスト
+- Secondary text: サブテキスト
+- Trailing element: メタ情報、アクション
+
+**Usage:**
+- 同質なコンテンツのコレクション
+- スキャン可能な情報
+- 詳細へのエントリーポイント
+
+URL: https://m3.material.io/components/lists/overview
+
+### Carousel
+スクロール可能なビジュアルアイテムのコレクション。
+
+**Types:**
+- Hero: 大きい、フォーカスされたアイテム
+- Multi-browse: 複数アイテム表示
+- Uncontained: フルブリード
+
+**Usage:**
+- 画像ギャラリー
+- プロダクトショーケース
+- オンボーディング
+
+URL: https://m3.material.io/components/carousel/overview
+
+### Bottom Sheets / Side Sheets
+追加コンテンツを表示するサーフェス。
+
+**Types:**
+- **Standard**: 永続的、画面の一部
+- **Modal**: 一時的、フォーカスが必要
+
+**Bottom Sheet Usage:**
+- コンテキストアクション
+- 追加オプション
+- Mobile向け
+
+**Side Sheet Usage:**
+- 詳細情報、フィルタ
+- Tablet/Desktop向け
+
+URL: https://m3.material.io/components/bottom-sheets/overview
+
+---
+
+## Communication Components
+
+ユーザーにフィードバックや情報を伝えるコンポーネント。
+
+### Dialogs
+ユーザーアクションが必要な重要なプロンプト。
+
+**Types:**
+- **Basic**: タイトル、本文、アクション
+- **Full-screen**: フルスクリーンダイアログ（モバイル）
+
+**Usage:**
+- 重要な決定（削除確認など）
+- 必須の情報入力
+- エラーや警告
+
+**Guidelines:**
+- タイトルは質問形式推奨
+- アクションは明確に（"削除"、"キャンセル"）
+- 破壊的なアクションは右側に配置しない
+
+URL: https://m3.material.io/components/dialogs/guidelines
+
+### Snackbar
+プロセスの簡潔な更新を画面下部に表示。
+
+**Usage:**
+- 操作完了の確認（"メッセージを送信しました"）
+- 軽微なエラー通知
+- オプショナルなアクション提供
+
+**Guidelines:**
+- 表示時間: 4-10秒
+- 1行のメッセージ推奨
+- 最大1つのアクション
+- 重要な情報には使用しない（Dialogを使用）
+
+URL: https://m3.material.io/components/snackbar/overview
+
+### Badges
+ナビゲーション項目上の通知とカウント。
+
+**Types:**
+- Numeric: 数値表示（1-999）
+- Dot: ドット表示（新着あり）
+
+**Usage:**
+- 未読通知の数
+- 新着コンテンツのインジケーター
+
+URL: https://m3.material.io/components/badges/overview
+
+### Progress Indicators
+進行中のプロセスのステータス表示。
+
+**Types:**
+- **Circular**: 円形、不定期または確定的
+- **Linear**: 線形、確定的な進捗
+
+**Usage:**
+- Circular: ローディング、処理中
+- Linear: ファイルアップロード、ダウンロード
+
+**Guidelines:**
+- 2秒以上かかる処理で表示
+- 可能な限り確定的な進捗を使用
+- 進捗率がわからない場合は不定期
+
+URL: https://m3.material.io/components/progress-indicators/overview
+
+### Tooltips
+コンテキストラベルとメッセージ。
+
+**Types:**
+- Plain: テキストのみ
+- Rich: テキスト+アイコン/画像
+
+**Usage:**
+- アイコンボタンの説明
+- 切り詰められたテキストの完全版
+- 補助的な情報
+
+**Guidelines:**
+- 簡潔に（1行推奨）
+- 重要な情報には使用しない
+- タッチデバイスではlong press
+
+URL: https://m3.material.io/components/tooltips/guidelines
+
+### Menus
+一時的なサーフェース上の選択肢リスト。
+
+**Types:**
+- Standard menu
+- Dropdown menu
+- Exposed dropdown menu（選択状態を表示）
+
+**Usage:**
+- コンテキストメニュー
+- 選択オプション
+- アクションのリスト
+
+**Guidelines:**
+- 2-7個のアイテム推奨
+- アイコンはオプション
+- 破壊的なアクションは分離
+
+URL: https://m3.material.io/components/menus/overview
+
+### Search
+検索バーとサジェスト。
+
+**Elements:**
+- Search bar: 検索入力フィールド
+- Search view: 全画面検索インターフェース
+
+**Usage:**
+- アプリ内検索
+- フィルタリング
+- サジェスト表示
+
+URL: https://m3.material.io/components/search/overview
+
+---
+
+## Component Selection Guide
+
+### Action Selection
+
+| Need | Component |
+|------|-----------|
+| Primary screen action | FAB or Filled Button |
+| Secondary action | Tonal/Outlined Button |
+| Tertiary action | Text Button |
+| Compact action | Icon Button |
+| Toggle between 2-5 options | Segmented Button |
+
+### Input Selection
+
+| Need | Component |
+|------|-----------|
+| Single choice from list | Radio Button |
+| Multiple choices | Checkbox |
+| On/Off toggle | Switch |
+| Text input | Text Field |
+| Date selection | Date Picker |
+| Value from range | Slider |
+| Tags or attributes | Input Chips |
+
+### Navigation Selection
+
+| Window Size | Primary Nav | Secondary Nav |
+|-------------|-------------|---------------|
+| Compact (<600dp) | Navigation Bar | Tabs |
+| Medium (600-840dp) | Navigation Rail | Tabs |
+| Expanded (>840dp) | Navigation Drawer | Tabs, Top App Bar |
+
+---
+
+## References
+
+- Material Design 3 Components: https://m3.material.io/components/
+- All Components List: https://m3.material.io/components/all-buttons

.claude/skills/material-thinking/references/foundations.md

@@ -0,0 +1,207 @@
+# Material 3 Foundations
+
+Material 3 Foundationsは、すべてのMaterialインターフェースの基盤となる設計原則とパターンを定義します。
+
+## Table of Contents
+
+1. [Accessibility](#accessibility)
+2. [Layout](#layout)
+3. [Interaction](#interaction)
+4. [Content Design](#content-design)
+5. [Design Tokens](#design-tokens)
+6. [Adaptive Design](#adaptive-design)
+
+---
+
+## Accessibility
+
+### Core Principles
+- 多様な能力を持つユーザーのための設計
+- スクリーンリーダーなどの支援技術との統合
+- WCAG準拠のコントラスト比
+
+### Key Areas
+
+#### Structure and Elements
+- 直感的なレイアウト階層
+- アクセシブルなUI要素の設計
+- フォーカス管理とナビゲーション
+
+URL: https://m3.material.io/foundations/designing/structure
+
+#### Color Contrast
+- WCAG準拠のカラーコントラスト
+- テキストとUIコントロールの視認性
+- 4.5:1（通常テキスト）、3:1（大きいテキスト、UIコンポーネント）
+
+URL: https://m3.material.io/foundations/designing/color-contrast
+
+#### Text Accessibility
+- テキストリサイズのサポート（200%まで）
+- アクセシブルなテキスト切り詰め
+- 明確で適応可能な文章
+
+URL: https://m3.material.io/foundations/writing/text-resizing
+
+---
+
+## Layout
+
+### Understanding Layout
+
+#### Core Components
+- **Regions**: 画面の主要エリア（ヘッダー、本文、ナビゲーション）
+- **Columns**: グリッドシステムの基本単位
+- **Gutters**: カラム間のスペース
+- **Spacing**: 4dpベースの一貫したスペーシングシステム
+
+URL: https://m3.material.io/foundations/layout/understanding-layout/overview
+
+### Window Size Classes
+
+画面サイズに応じたレスポンシブデザイン:
+
+| Size Class | Width | Typical Device | Key Patterns |
+|-----------|-------|---------------|--------------|
+| Compact | <600dp | Phone | Single pane, bottom nav |
+| Medium | 600-840dp | Tablet (portrait) | Dual pane optional, nav rail |
+| Expanded | >840dp | Tablet (landscape), Desktop | Dual/multi pane, nav drawer |
+| Large/XL | >1240dp | Large screens, TV | Multi-pane, extensive nav |
+
+URL: https://m3.material.io/foundations/layout/applying-layout/window-size-classes
+
+### Canonical Layouts
+
+よく使われるレイアウトパターン:
+
+1. **List-detail**: マスター・詳細ナビゲーション
+2. **Feed**: コンテンツフィード
+3. **Supporting pane**: 補助コンテンツパネル
+
+URL: https://m3.material.io/foundations/layout/canonical-layouts/overview
+
+---
+
+## Interaction
+
+### States
+
+#### Visual States
+- **Enabled**: デフォルト状態
+- **Hover**: ポインタがホバーしている状態（デスクトップ）
+- **Focused**: キーボードフォーカス
+- **Pressed**: アクティブに押されている状態
+- **Dragged**: ドラッグ中
+- **Disabled**: 無効化状態
+
+#### State Layers
+半透明なオーバーレイで状態を視覚的に示す:
+- Hover: 8% opacity
+- Focus: 12% opacity
+- Press: 12% opacity
+
+URL: https://m3.material.io/foundations/interaction/states/state-layers
+
+### Gestures
+
+モバイルインターフェース向けタッチジェスチャー:
+- Tap: 基本的な選択
+- Long press: コンテキストメニュー
+- Drag: 移動、並べ替え
+- Swipe: ナビゲーション、削除
+- Pinch: ズーム
+
+URL: https://m3.material.io/foundations/interaction/gestures
+
+### Selection
+
+選択インタラクションパターン:
+- **Single selection**: ラジオボタン、リスト項目
+- **Multi selection**: チェックボックス、選択可能なリスト
+
+URL: https://m3.material.io/foundations/interaction/selection
+
+---
+
+## Content Design
+
+### UX Writing Principles
+
+1. **Clear**: 明確で理解しやすい
+2. **Concise**: 簡潔で要点を押さえた
+3. **Useful**: ユーザーのニーズに応える
+4. **Consistent**: 用語とトーンの一貫性
+
+### Notifications
+
+効果的な通知コンテンツ:
+- アクション可能な情報
+- 明確な次のステップ
+- ユーザーコンテキストの理解
+
+URL: https://m3.material.io/foundations/content-design/notifications
+
+### Alt Text
+
+アクセシブルな画像説明:
+- 装飾的画像: 空のalt属性
+- 機能的画像: アクションを説明
+- 情報的画像: 内容を簡潔に説明
+
+URL: https://m3.material.io/foundations/content-design/alt-text
+
+### Global Writing
+
+国際的なオーディエンス向けの文章:
+- ローカライゼーションを考慮した単語選択
+- 文化的に中立な表現
+- 翻訳しやすい文法構造
+
+URL: https://m3.material.io/foundations/content-design/global-writing/overview
+
+---
+
+## Design Tokens
+
+### What are Design Tokens?
+
+デザイントークンは、デザイン、ツール、コード全体で使用される設計上の決定の最小単位:
+
+- **Color tokens**: primary, secondary, surface, error など
+- **Typography tokens**: displayLarge, bodyMedium など
+- **Shape tokens**: cornerRadius, roundedCorner など
+- **Motion tokens**: duration, easing curves
+
+### Benefits
+
+- デザインとコード間の一貫性
+- テーマのカスタマイズが容易
+- プラットフォーム間での統一
+
+URL: https://m3.material.io/foundations/design-tokens/overview
+
+---
+
+## Adaptive Design
+
+### Principles
+
+- **Responsive**: ウィンドウサイズに応じた調整
+- **Adaptive**: デバイス特性に応じた最適化
+- **Contextual**: 使用コンテキストを考慮
+
+### Key Strategies
+
+1. Window size classesに基づくレイアウト調整
+2. 入力方式（タッチ、マウス、キーボード）への対応
+3. デバイス機能（カメラ、位置情報等）の活用
+4. オフラインとオンラインシナリオの対応
+
+URL: https://m3.material.io/foundations/adaptive-design
+
+---
+
+## References
+
+- Material Design 3 Foundations: https://m3.material.io/foundations/
+- Glossary: https://m3.material.io/foundations/glossary

.claude/skills/material-thinking/references/m3-expressive.md

@@ -0,0 +1,470 @@
+# Material 3 Expressive
+
+M3 Expressiveは、Googleが2024-2025年に導入したMaterial 3の進化版で、より魅力的で感情的に共鳴するインターフェースを実現します。
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Usability Principles](#usability-principles)
+3. [Design Tactics](#design-tactics)
+4. [Expressive Motion](#expressive-motion)
+5. [Shape and Form](#shape-and-form)
+6. [Implementation Guidelines](#implementation-guidelines)
+
+---
+
+## Overview
+
+### What is M3 Expressive?
+
+M3 Expressiveは、標準のMaterial 3を拡張し、以下を実現します:
+
+- **Engaging**: ユーザーの注意を引き、関心を維持
+- **Emotionally resonant**: 感情的なつながりを生む
+- **User-friendly**: 使いやすさを犠牲にしない
+- **Brand expression**: ブランドの個性を表現
+
+### Key Differences from Standard M3
+
+| Aspect | Standard M3 | M3 Expressive |
+|--------|-------------|---------------|
+| Motion | 控えめ、機能的 | 大胆、表現豊か |
+| Shapes | 一貫した角丸 | 動的な形状変形 |
+| Emphasis | 明確、シンプル | ドラマチック、インパクト |
+| Timing | 速い（200-300ms） | やや長め（400-700ms） |
+
+URL: https://m3.material.io/blog/building-with-m3-expressive
+
+---
+
+## Usability Principles
+
+### Creating Engaging Products
+
+M3 Expressiveは、以下のusability原則に基づきます:
+
+#### 1. Guide Users
+ユーザーを適切に誘導する:
+- **Motion paths**: アニメーションでフローを示す
+- **Visual hierarchy**: 動きで注意を引く
+- **Staged reveal**: 段階的に情報を開示
+
+#### 2. Emphasize Actions
+重要なアクションを強調:
+- **Scale changes**: サイズ変化で重要性を示す
+- **Color dynamics**: 色の変化で状態を表現
+- **Focused attention**: 1つの要素に注意を集中
+
+#### 3. Provide Feedback
+ユーザーのアクションに対する明確なフィードバック:
+- **Immediate response**: 即座の視覚的反応
+- **State transitions**: 状態変化を明確に表現
+- **Completion signals**: アクション完了を示す
+
+URL: https://m3.material.io/foundations/usability/overview
+
+---
+
+## Design Tactics
+
+M3 Expressiveを実装するための具体的なデザイン戦術。
+
+URL: https://m3.material.io/foundations/usability/applying-m-3-expressive
+
+### 1. Emphasized Easing
+
+**Standard easing**よりも劇的な**Emphasized easing**を使用:
+
+```
+Emphasized Decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0)
+Emphasized Accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15)
+```
+
+**When to use:**
+- 重要なトランジション
+- ユーザーの注意を引く必要がある場合
+- ブランド表現を強化したい場合
+
+**Example:**
+```css
+.expressive-enter {
+  animation: enter 500ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+}
+```
+
+### 2. Extended Duration
+
+標準より長いアニメーション時間:
+
+| Element | Standard | Expressive |
+|---------|----------|------------|
+| Small changes | 100ms | 150-200ms |
+| Medium changes | 250ms | 400-500ms |
+| Large transitions | 300ms | 500-700ms |
+
+**Caution:** 1000msを超えないこと
+
+### 3. Exaggerated Scale
+
+スケール変化を誇張:
+
+**Standard:**
+- Scale: 1.0 → 1.05（+5%）
+
+**Expressive:**
+- Scale: 1.0 → 1.15（+15%）
+- Scale: 1.0 → 0.9 → 1.1（bounce effect）
+
+**Example use case:**
+- FABのタップアニメーション
+- カードの選択状態
+- アイコンのアクティブ状態
+
+### 4. Dynamic Color Transitions
+
+色の動的な変化:
+
+**Techniques:**
+- Gradient animations: グラデーションの動的変化
+- Color pulse: 色のパルス効果
+- Hue rotation: 色相の変化
+
+**Example:**
+```css
+.expressive-button:active {
+  background: linear-gradient(45deg, primary, tertiary);
+  transition: background 400ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+}
+```
+
+### 5. Layered Motion
+
+複数の要素が異なるタイミングで動く:
+
+**Stagger animations:**
+- 遅延: 50-100ms per item
+- リストアイテムの順次表示
+- カードグリッドの表示
+
+**Example timing:**
+```
+Item 1: 0ms
+Item 2: 80ms
+Item 3: 160ms
+Item 4: 240ms
+```
+
+### 6. Shape Morphing
+
+形状の動的な変形（後述）
+
+---
+
+## Expressive Motion
+
+M3 Expressiveの中核となるモーションシステム。
+
+URL: https://m3.material.io/blog/m3-expressive-motion-theming
+
+### Motion Theming System
+
+カスタマイズ可能な新しいモーションテーマシステム:
+
+#### Motion Tokens
+
+**Duration tokens:**
+```
+motion.duration.short: 150ms
+motion.duration.medium: 400ms
+motion.duration.long: 600ms
+motion.duration.extra-long: 1000ms
+```
+
+**Easing tokens:**
+```
+motion.easing.emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0)
+motion.easing.emphasizedDecelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0)
+motion.easing.emphasizedAccelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15)
+motion.easing.standard: cubic-bezier(0.2, 0.0, 0, 1.0)
+```
+
+### Expressive Transition Patterns
+
+#### 1. Container Transform (Enhanced)
+
+**Standard container transform:**
+- Duration: 300ms
+- Easing: standard
+
+**Expressive container transform:**
+- Duration: 500ms
+- Easing: emphasized
+- 追加効果: 軽いスケール変化、色の変化
+
+#### 2. Shared Axis (Enhanced)
+
+**Expressive enhancements:**
+- より大きいスライド距離（+20%）
+- フェード+スケール効果の組み合わせ
+- ステージングされた要素の動き
+
+#### 3. Morph Transition
+
+新しいトランジションタイプ:
+- 形状の滑らかな変形
+- 複数プロパティの同時変化（サイズ、色、形状）
+- 有機的な動き
+
+**Example:**
+```
+Circle → Rounded Rectangle → Full Screen
+(300ms) → (200ms)
+```
+
+### Micro-interactions
+
+小さいが印象的なインタラクション:
+
+#### Button Press
+```
+1. Scale down: 0.95 (50ms)
+2. Scale up: 1.0 (150ms, emphasized easing)
+3. Ripple effect: expanded, slower
+```
+
+#### Icon State Change
+```
+1. Scale out: 0.8 + rotate 15deg (100ms)
+2. Icon swap
+3. Scale in: 1.0 + rotate 0deg (200ms, emphasized)
+```
+
+#### Loading States
+```
+- Pulse animation: 1.0 → 1.1 → 1.0 (800ms, loop)
+- Color shift: primary → tertiary → primary
+```
+
+---
+
+## Shape and Form
+
+### Shape Morph
+
+動的な形状変形でブランド表現を強化。
+
+URL: https://m3.material.io/styles/shape/shape-morph
+
+#### Basic Shape Morph
+
+形状の滑らかな変化:
+
+**Example scenarios:**
+1. **FAB → Dialog**
+   - Circle (56dp) → Rounded rectangle (280×400dp)
+   - Duration: 500ms
+   - Easing: emphasized decelerate
+
+2. **Chip → Card**
+   - Small rounded (32dp) → Medium rounded (card size)
+   - Duration: 400ms
+
+3. **Button → Full Width**
+   - Fixed width → Full screen width
+   - Corner radius維持
+
+#### Advanced Techniques
+
+**Path morphing:**
+- SVGパスの変形
+- ベジェ曲線の補間
+- 複雑な形状間の遷移
+
+**Example SVG morph:**
+```svg
+<path d="M10,10 L90,10 L90,90 L10,90 Z">
+  <animate attributeName="d"
+           to="M50,10 L90,50 L50,90 L10,50 Z"
+           dur="500ms"
+           fill="freeze"/>
+</path>
+```
+
+### Organic Shapes
+
+より自然で有機的な形状:
+
+**Characteristics:**
+- 非対称な角丸
+- 流動的なライン
+- 自然界からのインスピレーション
+
+**Use cases:**
+- ブランド要素
+- ヒーローセクション
+- イラストレーション
+
+---
+
+## Implementation Guidelines
+
+### When to Use M3 Expressive
+
+#### Good Use Cases ✓
+- **Consumer apps**: エンターテイメント、ソーシャル、ゲーム
+- **Brand-forward products**: ブランド表現が重要
+- **Engagement-critical flows**: オンボーディング、チュートリアル
+- **Hero moments**: 重要なマイルストーン、達成
+
+#### Use with Caution ⚠
+- **Productivity apps**: 過度なアニメーションは避ける
+- **Frequent actions**: 繰り返し使用される操作
+- **Data-heavy interfaces**: 情報が優先される場合
+
+#### Avoid ✗
+- **Accessibility concerns**: 動きに敏感なユーザー
+- **Performance-constrained**: 低スペックデバイス
+- **Critical tasks**: エラーや警告の表示
+
+### Balancing Expressiveness and Usability
+
+#### The 80/20 Rule
+
+- **80%**: 標準のM3（速く、機能的）
+- **20%**: M3 Expressive（印象的、ブランド表現）
+
+**Example distribution:**
+- Standard M3: リスト項目タップ、フォーム入力、設定変更
+- M3 Expressive: 画面遷移、主要アクション（FAB）、初回体験
+
+### Respect User Preferences
+
+#### Reduced Motion
+
+`prefers-reduced-motion`メディアクエリを尊重:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+#### Accessibility
+
+- **Vestibular disorders**: 大きい動きを避ける
+- **Cognitive load**: 同時に動く要素を制限
+- **Focus management**: アニメーション中もフォーカス可能
+
+---
+
+## Practical Examples
+
+### Example 1: Expressive FAB Tap
+
+```css
+.fab {
+  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1.0),
+              box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+}
+
+.fab:active {
+  transform: scale(0.92);
+}
+
+.fab:not(:active) {
+  transform: scale(1.0);
+}
+
+/* Ripple with longer duration */
+.fab::after {
+  animation: ripple 600ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+}
+```
+
+### Example 2: Card to Detail Transition
+
+```javascript
+// Container transform with expressive timing
+const expandCard = (card) => {
+  card.animate([
+    {
+      transform: 'scale(1)',
+      borderRadius: '12px'
+    },
+    {
+      transform: 'scale(1.02)',
+      borderRadius: '28px',
+      offset: 0.3
+    },
+    {
+      transform: 'scale(1)',
+      borderRadius: '0px'
+    }
+  ], {
+    duration: 500,
+    easing: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
+    fill: 'forwards'
+  });
+};
+```
+
+### Example 3: Staggered List Animation
+
+```css
+.list-item {
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeInUp 400ms cubic-bezier(0.05, 0.7, 0.1, 1.0) forwards;
+}
+
+.list-item:nth-child(1) { animation-delay: 0ms; }
+.list-item:nth-child(2) { animation-delay: 80ms; }
+.list-item:nth-child(3) { animation-delay: 160ms; }
+.list-item:nth-child(4) { animation-delay: 240ms; }
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+```
+
+---
+
+## Resources and Tools
+
+### Design Tools
+- **Material Theme Builder**: M3 Expressiveモーションプリセット
+- **Figma Plugins**: Motion timing visualization
+- **After Effects**: プロトタイプアニメーション
+
+### Code Libraries
+- **Web**: Material Web Components (M3 support)
+- **Flutter**: Material 3 with custom motion
+- **Android**: Jetpack Compose Material3
+
+### References
+- M3 Expressive announcement: https://m3.material.io/blog/building-with-m3-expressive
+- Motion theming: https://m3.material.io/blog/m3-expressive-motion-theming
+- Usability tactics: https://m3.material.io/foundations/usability/applying-m-3-expressive
+
+---
+
+## Summary Checklist
+
+When implementing M3 Expressive, ensure:
+
+- [ ] Emphasized easing for key transitions
+- [ ] Extended durations (but <1000ms)
+- [ ] Exaggerated scale changes where appropriate
+- [ ] Layered/staggered animations for lists
+- [ ] Shape morphing for container transforms
+- [ ] Color dynamics for feedback
+- [ ] Respect `prefers-reduced-motion`
+- [ ] 80/20 balance (Standard M3 vs Expressive)
+- [ ] Test on lower-end devices
+- [ ] Validate accessibility

.claude/skills/material-thinking/references/styles.md

@@ -0,0 +1,318 @@
+# Material 3 Styles
+
+Material 3 Stylesは、カラー、タイポグラフィ、形状、エレベーション、アイコン、モーションを通じて視覚言語を定義します。
+
+## Table of Contents
+
+1. [Color](#color)
+2. [Typography](#typography)
+3. [Elevation](#elevation)
+4. [Shape](#shape)
+5. [Icons](#icons)
+6. [Motion](#motion)
+
+---
+
+## Color
+
+### Color System Overview
+
+Material 3のカラーシステムは、アクセシブルでパーソナライズ可能なカラースキームを作成します。
+
+URL: https://m3.material.io/styles/color/system/overview
+
+### Color Roles
+
+UIエレメントを特定の色に結びつける役割:
+
+#### Primary Colors
+- **primary**: アプリの主要色（メインボタン、アクティブ状態）
+- **onPrimary**: プライマリ色上のテキスト/アイコン
+- **primaryContainer**: プライマリ要素のコンテナ
+- **onPrimaryContainer**: コンテナ上のテキスト
+
+#### Secondary & Tertiary
+- **secondary**: アクセントカラー
+- **tertiary**: 強調やバランス調整
+
+#### Surface Colors
+- **surface**: カード、シート、メニューの背景
+- **surfaceVariant**: わずかに異なる背景
+- **surfaceTint**: エレベーション表現用
+
+#### Semantic Colors
+- **error**: エラー状態
+- **warning**: 警告（一部実装で利用可能）
+- **success**: 成功状態（一部実装で利用可能）
+
+URL: https://m3.material.io/styles/color/roles
+
+### Color Schemes
+
+#### Dynamic Color
+ユーザーの壁紙や選択から色を抽出:
+- **User-generated**: ユーザーの選択から
+- **Content-based**: 画像/コンテンツから抽出
+
+URL: https://m3.material.io/styles/color/dynamic-color/overview
+
+#### Static Color
+固定されたカラースキーム:
+- **Baseline**: デフォルトのMaterialベースライン
+- **Custom brand**: カスタムブランドカラー
+
+URL: https://m3.material.io/styles/color/static/baseline
+
+### Key Colors and Tones
+
+- **Source color**: スキーム生成の起点となる色
+- **Tonal palette**: 各キーカラーから生成される13段階のトーン（0, 10, 20, ..., 100）
+- Light theme: 通常トーン40をプライマリに使用
+- Dark theme: 通常トーン80をプライマリに使用
+
+URL: https://m3.material.io/styles/color/the-color-system/key-colors-tones
+
+### Tools
+
+**Material Theme Builder**: カラースキーム生成、カスタマイズ、エクスポートツール
+
+URL: https://m3.material.io/blog/material-theme-builder-2-color-match
+
+---
+
+## Typography
+
+### Type Scale
+
+Material 3は5つのロール×3つのサイズ = 15のタイプスタイルを定義:
+
+#### Roles
+1. **Display**: 大きく短いテキスト（ヒーロー、見出し）
+2. **Headline**: 中規模の見出し
+3. **Title**: 小さい見出し（アプリバー、リスト項目）
+4. **Body**: 本文テキスト
+5. **Label**: ボタン、タブ、小さいテキスト
+
+#### Sizes
+- **Large**: 最大サイズ
+- **Medium**: 標準サイズ
+- **Small**: 最小サイズ
+
+#### Example Styles
+```
+displayLarge: 57sp, -0.25 letter spacing
+headlineMedium: 28sp, 0 letter spacing
+bodyLarge: 16sp, 0.5 letter spacing
+labelSmall: 11sp, 0.5 letter spacing
+```
+
+URL: https://m3.material.io/styles/typography/overview
+
+### Fonts
+
+- デフォルト: **Roboto** (Android), **San Francisco** (iOS), **Roboto** (Web)
+- カスタムフォントのサポート
+- 変数フォントの活用
+
+URL: https://m3.material.io/styles/typography/fonts
+
+### Applying Typography
+
+- セマンティックな使用（見出しにはheadline、本文にはbody）
+- 一貫した階層
+- 行の高さと余白の適切な設定
+
+URL: https://m3.material.io/styles/typography/applying-type
+
+---
+
+## Elevation
+
+### Overview
+
+エレベーションはZ軸上のサーフェス間の距離を表現します。
+
+URL: https://m3.material.io/styles/elevation/overview
+
+### Elevation Levels
+
+Material 3は6つのエレベーションレベルを定義:
+
+| Level | DP | Use Case |
+|-------|-----|----------|
+| 0 | 0dp | 通常のサーフェス |
+| 1 | 1dp | カード、わずかに浮いた要素 |
+| 2 | 3dp | 検索バー |
+| 3 | 6dp | FAB（休止状態） |
+| 4 | 8dp | ナビゲーションドロワー |
+| 5 | 12dp | モーダルボトムシート、ダイアログ |
+
+### Elevation Representation
+
+Material 3では2つの方法でエレベーションを表現:
+
+1. **Shadow**: 影によるエレベーション（Light theme主体）
+2. **Surface tint**: サーフェスに色のティントを重ねる（Dark theme主体）
+
+URL: https://m3.material.io/styles/elevation/applying-elevation
+
+---
+
+## Shape
+
+### Overview
+
+形状は、注意の誘導、状態表現、ブランド表現に使用されます。
+
+URL: https://m3.material.io/styles/shape/overview-principles
+
+### Corner Radius Scale
+
+Material 3は5つの形状トークンを定義:
+
+| Token | Default Value | Use Case |
+|-------|---------------|----------|
+| None | 0dp | フルスクリーン、厳格なレイアウト |
+| Extra Small | 4dp | チェックボックス、小さい要素 |
+| Small | 8dp | チップ、小さいボタン |
+| Medium | 12dp | カード、標準ボタン |
+| Large | 16dp | FAB、大きいカード |
+| Extra Large | 28dp | ダイアログ、ボトムシート |
+| Full | 9999dp | 完全な円形 |
+
+### Shape Morph
+
+**M3 Expressiveの重要機能**: 形状が滑らかに変形するアニメーション
+
+- トランジション時の視覚的な流れ
+- ブランド表現の強化
+- ユーザーの注意を引く
+
+URL: https://m3.material.io/styles/shape/shape-morph
+
+---
+
+## Icons
+
+### Material Symbols
+
+Material Symbolsは可変アイコンフォント:
+
+#### Styles
+- **Outlined**: 線のみのスタイル（デフォルト）
+- **Filled**: 塗りつぶしスタイル
+- **Rounded**: 丸みを帯びたスタイル
+- **Sharp**: シャープなスタイル
+
+#### Variable Features
+- **Weight**: 線の太さ（100-700）
+- **Grade**: 視覚的な重み（-25 to 200）
+- **Optical size**: 表示サイズ最適化（20, 24, 40, 48dp）
+- **Fill**: 塗りつぶし状態（0-1）
+
+#### Sizes
+- 20dp: 密なレイアウト
+- 24dp: 標準サイズ
+- 40dp: タッチターゲット拡大
+- 48dp: 大きいタッチターゲット
+
+URL: https://m3.material.io/styles/icons/overview
+
+### Custom Icons
+
+カスタムアイコンのデザインガイドライン:
+- 24×24dpグリッド
+- 2dpストローク幅
+- 2dpの角丸
+- 一貫したメタファー
+
+URL: https://m3.material.io/styles/icons/designing-icons
+
+---
+
+## Motion
+
+**M3 Expressiveの中核要素**: モーションは、UIを表現豊かで使いやすくします。
+
+URL: https://m3.material.io/styles/motion/overview
+
+### Motion Principles
+
+1. **Informative**: ユーザーに情報を伝える
+2. **Focused**: 注意を適切に誘導
+3. **Expressive**: 感情的なエンゲージメントを高める
+
+URL: https://m3.material.io/styles/motion/overview/how-it-works
+
+### Easing and Duration
+
+#### Easing Types
+
+Material 3は4つのイージングカーブを定義:
+
+1. **Emphasized**: 劇的で表現豊かな動き
+   - Decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0)
+   - Accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15)
+   - Standard: cubic-bezier(0.2, 0.0, 0, 1.0)
+
+2. **Standard**: バランスの取れた標準的な動き
+   - cubic-bezier(0.2, 0.0, 0, 1.0)
+
+3. **Emphasized Decelerate**: 要素が画面に入る
+   - cubic-bezier(0.05, 0.7, 0.1, 1.0)
+
+4. **Emphasized Accelerate**: 要素が画面から出る
+   - cubic-bezier(0.3, 0.0, 0.8, 0.15)
+
+#### Duration Guidelines
+
+| Element Change | Duration |
+|----------------|----------|
+| Small (icon state) | 50-100ms |
+| Medium (component state) | 250-300ms |
+| Large (layout change) | 400-500ms |
+| Complex transition | 500-700ms |
+
+**重要**: 長すぎるアニメーション（>1000ms）は避ける
+
+URL: https://m3.material.io/styles/motion/easing-and-duration
+
+### Transitions
+
+ナビゲーション時のトランジションパターン:
+
+#### Transition Types
+
+1. **Container transform**: コンテナが変形して次の画面へ
+2. **Shared axis**: 共通軸に沿った移動（X, Y, Z軸）
+3. **Fade through**: フェードアウト→フェードイン
+4. **Fade**: シンプルなフェード
+
+#### When to Use Each
+
+- **Container transform**: リスト項目→詳細画面
+- **Shared axis X**: タブ切り替え、水平ナビゲーション
+- **Shared axis Y**: ステッパー、垂直ナビゲーション
+- **Shared axis Z**: 前後のナビゲーション（戻る/進む）
+- **Fade through**: コンテンツ更新（関連性が低い）
+- **Fade**: オーバーレイ、補助的な変更
+
+URL: https://m3.material.io/styles/motion/transitions/transition-patterns
+
+### M3 Expressive Motion
+
+**新しい表現豊かなモーションシステム**:
+
+- より大胆なアニメーション
+- カスタマイズ可能なモーションテーマ
+- ブランド表現の強化
+
+URL: https://m3.material.io/blog/m3-expressive-motion-theming
+
+---
+
+## References
+
+- Material Design 3 Styles: https://m3.material.io/styles/
+- Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
+- Material Symbols: https://fonts.google.com/icons