Added Claude Skills

.claude/skills/material-thinking/SKILL.md

@@ -0,0 +1,327 @@
+---
+name: material-thinking
+description: Comprehensive Material Design 3 (M3) and M3 Expressive guidance for building modern, accessible, and engaging user interfaces. Use when designing or implementing Material Design interfaces, reviewing component designs for M3 compliance, generating design tokens (color schemes, typography, shapes), applying M3 Expressive motion and interactions, or migrating existing UIs to Material 3. Covers all 38 M3 components, foundations (accessibility, layout, interaction), styles (color, typography, elevation, shape, icons, motion), and M3 Expressive tactics for more engaging experiences.
+---
+
+# Material Thinking
+
+Apply Material Design 3 and M3 Expressive principles to create accessible, consistent, and engaging user interfaces.
+
+## Overview
+
+This skill provides comprehensive guidance for implementing Material Design 3 (M3) and M3 Expressive across all platforms. Material Design 3 is Google's open-source design system that provides UX guidance, reusable components, and design tools for creating beautiful, accessible interfaces.
+
+**Key capabilities:**
+- Design new products with M3 principles
+- Review existing designs for M3 compliance
+- Generate design tokens (colors, typography, shapes)
+- Apply M3 Expressive for engaging, emotionally resonant UIs
+- Select appropriate components for specific use cases
+- Ensure accessibility and responsive design
+
+## Core Resources
+
+This skill includes four comprehensive reference documents. Read these as needed during your work:
+
+### 1. Foundations (`references/foundations.md`)
+Read when working with:
+- Accessibility requirements
+- Layout and responsive design (window size classes, canonical layouts)
+- Interaction patterns (states, gestures, selection)
+- Content design and UX writing
+- Design tokens and adaptive design
+
+### 2. Styles (`references/styles.md`)
+Read when working with:
+- Color systems (dynamic color, color roles, tonal palettes)
+- Typography (type scale, fonts)
+- Elevation and depth
+- Shapes and corner radius
+- Icons (Material Symbols)
+- Motion and transitions
+
+### 3. Components (`references/components.md`)
+Read when selecting or implementing:
+- Action components (buttons, FAB, segmented buttons)
+- Selection and input (checkbox, radio, switch, text fields, chips)
+- Navigation (nav bar, drawer, rail, app bars, tabs)
+- Containment and layout (cards, lists, carousel, sheets)
+- Communication (dialogs, snackbar, badges, progress, tooltips, menus)
+
+### 4. M3 Expressive (`references/m3-expressive.md`)
+Read when creating more engaging experiences:
+- Expressive motion tactics
+- Shape morphing
+- Dynamic animations
+- Brand expression
+- Balancing expressiveness with usability
+
+## Workflows
+
+### Workflow 1: Designing a New Interface
+
+When designing a new product or feature with Material 3:
+
+1. **Define layout structure**
+   - Read `references/foundations.md` → Layout section
+   - Determine window size classes (compact/medium/expanded)
+   - Choose canonical layout if applicable (list-detail, feed, supporting pane)
+
+2. **Select components**
+   - Read `references/components.md`
+   - Use Component Selection Guide to choose appropriate components
+   - Review specific component guidelines for usage and specs
+
+3. **Establish visual style**
+   - Read `references/styles.md`
+   - Define color scheme (dynamic or static)
+   - Set typography scale
+   - Choose shape scale (corner radius values)
+   - Plan motion and transitions
+
+4. **Apply M3 Expressive (optional)**
+   - Read `references/m3-expressive.md`
+   - Identify key moments for expressive design
+   - Apply emphasized easing and extended durations
+   - Consider shape morphing for transitions
+   - Follow 80/20 rule (80% standard, 20% expressive)
+
+5. **Validate accessibility**
+   - Read `references/foundations.md` → Accessibility section
+   - Check color contrast (WCAG compliance)
+   - Verify touch targets (minimum 48×48dp)
+   - Ensure keyboard navigation and screen reader support
+
+### Workflow 2: Reviewing Existing Designs
+
+When reviewing designs for Material 3 compliance:
+
+1. **Component compliance**
+   - Read `references/components.md` for relevant components
+   - Check if components follow M3 specifications
+   - Verify proper component usage (e.g., not using filled buttons excessively)
+   - Validate component states (enabled, hover, focus, pressed, disabled)
+
+2. **Visual consistency**
+   - Read `references/styles.md`
+   - Verify color roles are used correctly
+   - Check typography matches type scale
+   - Validate elevation levels
+   - Review shape consistency (corner radius)
+
+3. **Accessibility audit**
+   - Read `references/foundations.md` → Accessibility section
+   - Test color contrast ratios
+   - Check touch target sizes
+   - Verify text resizing support
+   - Review focus indicators
+
+4. **Interaction patterns**
+   - Read `references/foundations.md` → Interaction section
+   - Verify state layers are present
+   - Check gesture support for mobile
+   - Validate selection patterns
+
+### Workflow 3: Generating Design Tokens
+
+When creating design tokens for a new theme:
+
+1. **Color tokens**
+   - Read `references/styles.md` → Color section
+   - Choose color scheme type (dynamic or static)
+   - Define source color(s)
+   - Generate tonal palette (13 tones per key color)
+   - Map color roles (primary, secondary, tertiary, surface, error)
+   - Create light and dark theme variants
+
+2. **Typography tokens**
+   - Read `references/styles.md` → Typography section
+   - Select font family
+   - Define type scale (display, headline, title, body, label × small/medium/large)
+   - Set letter spacing and line height
+
+3. **Shape tokens**
+   - Read `references/styles.md` → Shape section
+   - Define corner radius scale (none, extra-small, small, medium, large, extra-large)
+   - Map shapes to component categories
+
+4. **Motion tokens**
+   - Read `references/styles.md` → Motion section
+   - Define duration values (short, medium, long)
+   - Set easing curves (emphasized, standard)
+   - For M3 Expressive, read `references/m3-expressive.md` → Expressive Motion
+
+### Workflow 4: Implementing M3 Expressive
+
+When adding expressive elements to enhance engagement:
+
+1. **Identify key moments**
+   - Onboarding flows
+   - Primary user actions (FAB, main CTAs)
+   - Screen transitions
+   - Success/completion states
+
+2. **Apply expressive tactics**
+   - Read `references/m3-expressive.md` → Design Tactics
+   - Use emphasized easing for important transitions
+   - Extend animation durations (400-700ms)
+   - Add exaggerated scale changes
+   - Implement layered/staggered animations
+   - Consider shape morphing
+
+3. **Balance with usability**
+   - Follow 80/20 rule (most interactions remain standard)
+   - Respect `prefers-reduced-motion`
+   - Avoid excessive motion in productivity contexts
+   - Test on lower-end devices
+
+## Quick Reference
+
+### When to Read Each Reference
+
+| Your Question                                  | Read This                                                  |
+| ---------------------------------------------- | ---------------------------------------------------------- |
+| "What components should I use for navigation?" | `references/components.md` → Navigation Components         |
+| "How do I create a color scheme?"              | `references/styles.md` → Color                             |
+| "What are the responsive breakpoints?"         | `references/foundations.md` → Layout → Window Size Classes |
+| "How do I make my design more engaging?"       | `references/m3-expressive.md`                              |
+| "What's the correct button hierarchy?"         | `references/components.md` → Action Components → Buttons   |
+| "How do I ensure accessibility?"               | `references/foundations.md` → Accessibility                |
+| "What motion timing should I use?"             | `references/styles.md` → Motion                            |
+| "How do I implement shape morphing?"           | `references/m3-expressive.md` → Shape and Form             |
+
+### Component Quick Selector
+
+**Actions:**
+- Primary screen action → FAB or Filled Button
+- Secondary action → Tonal/Outlined Button
+- Tertiary action → Text Button
+- Compact action → Icon Button
+- Toggle options (2-5) → Segmented Button
+
+**Input:**
+- Single choice → Radio Button
+- Multiple choices → Checkbox
+- On/Off toggle → Switch
+- Text input → Text Field
+- Date/time → Date/Time Picker
+- Range value → Slider
+- Tags → Input Chips
+
+**Navigation:**
+- Compact screens (<600dp) → Navigation Bar
+- Medium screens (600-840dp) → Navigation Rail
+- Large screens (>840dp) → Navigation Drawer
+- Secondary nav → Tabs or Top App Bar
+
+**Communication:**
+- Important decision → Dialog
+- Quick feedback → Snackbar
+- Notification count → Badge
+- Loading status → Progress Indicator
+- Contextual help → Tooltip
+- Action list → Menu
+
+### Design Token Defaults
+
+**Color (Light Theme):**
+- Primary: tone 40
+- On-primary: tone 100 (white)
+- Primary container: tone 90
+- Surface: tone 98
+
+**Typography:**
+- Display Large: 57sp
+- Headline Large: 32sp
+- Title Large: 22sp
+- Body Large: 16sp
+- Label Large: 14sp
+
+**Shape:**
+- Extra Small: 4dp (chips, checkboxes)
+- Small: 8dp (small buttons)
+- Medium: 12dp (cards, standard buttons)
+- Large: 16dp (FAB)
+- Extra Large: 28dp (dialogs, sheets)
+
+**Elevation:**
+- Level 0: 0dp (standard surface)
+- Level 1: 1dp (cards)
+- Level 2: 3dp (search bars)
+- Level 3: 6dp (FAB)
+- Level 5: 12dp (modals, dialogs)
+
+## Best Practices
+
+### General Principles
+
+1. **Consistency**: Use design tokens consistently across the product
+2. **Hierarchy**: Establish clear visual hierarchy through size, color, and spacing
+3. **Accessibility**: Always meet WCAG 2.1 Level AA standards (minimum)
+4. **Responsiveness**: Design for all window size classes
+5. **Platform conventions**: Respect platform-specific patterns when appropriate
+
+### Common Mistakes to Avoid
+
+- **Too many filled buttons**: Use only one filled button per screen for primary action
+- **Ignoring window size classes**: Design must adapt to different screen sizes
+- **Poor color contrast**: Always validate contrast ratios
+- **Inconsistent spacing**: Use 4dp grid system throughout
+- **Overusing M3 Expressive**: Keep 80% standard, 20% expressive
+- **Small touch targets**: Minimum 48×48dp for all interactive elements
+- **Unclear component states**: All components must show hover, focus, pressed states
+
+### Platform-Specific Notes
+
+**Flutter:**
+- Use Material 3 theme in `ThemeData(useMaterial3: true)`
+- Access design tokens via `Theme.of(context)`
+- Official documentation: https://m3.material.io/develop/flutter
+
+**Android (Jetpack Compose):**
+- Use Material3 package
+- MaterialTheme provides M3 components and tokens
+- Official documentation: https://m3.material.io/develop/android/jetpack-compose
+
+**Web:**
+- Use Material Web Components library
+- CSS custom properties for design tokens
+- Official documentation: https://m3.material.io/develop/web
+
+**Platform-agnostic:**
+- Export design tokens from Material Theme Builder
+- Apply M3 principles manually to any framework
+
+## Tools and Resources
+
+### Material Theme Builder
+Web-based tool for creating M3 color schemes and design tokens:
+- Generate color schemes from source colors
+- Create light and dark themes
+- Export tokens for various platforms
+- URL: https://material-foundation.github.io/material-theme-builder/
+
+### Material Symbols
+Variable icon font with 2,500+ icons:
+- Styles: Outlined, Filled, Rounded, Sharp
+- Variable features: weight, grade, optical size, fill
+- URL: https://fonts.google.com/icons
+
+### Official Documentation
+- Material Design 3: https://m3.material.io/
+- Get Started: https://m3.material.io/get-started
+- Blog (updates and announcements): https://m3.material.io/blog
+
+## Summary
+
+This skill enables comprehensive Material Design 3 implementation:
+
+1. **Read references as needed**: Don't try to memorize everything—reference files exist to be consulted during work
+2. **Follow workflows**: Use structured workflows for common tasks (designing, reviewing, generating tokens)
+3. **Start with foundations**: Layout, accessibility, and interaction patterns form the base
+4. **Build with components**: Use the 38 documented M3 components appropriately
+5. **Apply styles consistently**: Color, typography, shape, elevation, icons, motion
+6. **Enhance with M3 Expressive**: Add engaging, emotionally resonant elements where appropriate
+7. **Validate accessibility**: Always check contrast, touch targets, and keyboard navigation
+
+Material Design 3 is a complete design system—this skill helps you apply it effectively across all contexts.

.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