claude-code-workflow 7.2.26 → 7.2.28

package/.claude/skills/team-motion-design/roles/coordinator/commands/dispatch.md

@@ -0,0 +1,203 @@
+# Command: Dispatch
+
+Create the motion design task chain with correct dependencies and structured task descriptions. Supports tokens, component, and page pipeline modes.
+
+## Phase 2: Context Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| User requirement | From coordinator Phase 1 | Yes |
+| Session folder | From coordinator Phase 2 | Yes |
+| Pipeline mode | From session.json `pipeline` | Yes |
+| Framework config | From session.json `framework` | Yes |
+
+1. Load user requirement and motion scope from session.json
+2. Load pipeline stage definitions from specs/pipelines.md
+3. Read `pipeline` and `framework` from session.json
+
+## Phase 3: Task Chain Creation (Mode-Branched)
+
+### Task Description Template
+
+Every task description uses structured format:
+
+```
+TaskCreate({
+  subject: "<TASK-ID>",
+  description: "PURPOSE: <what this task achieves> | Success: <measurable completion criteria>
+TASK:
+  - <step 1: specific action>
+  - <step 2: specific action>
+  - <step 3: specific action>
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <motion-scope>
+  - Framework: <framework>
+  - Upstream artifacts: <artifact-1>, <artifact-2>
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <deliverable path> + <quality criteria>
+CONSTRAINTS: <scope limits, focus areas>"
+})
+TaskUpdate({ taskId: "<TASK-ID>", addBlockedBy: [<dependency-list>], owner: "<role>" })
+```
+
+### Mode Router
+
+| Mode | Action |
+|------|--------|
+| `tokens` | Create 4 tasks: MRESEARCH -> CHOREO -> ANIM -> MTEST |
+| `component` | Create 4 tasks: MRESEARCH -> CHOREO -> ANIM -> MTEST (GC loop) |
+| `page` | Create 4+ tasks: MRESEARCH -> CHOREO -> [ANIM-001..N parallel] -> MTEST |
+
+---
+
+### Tokens Pipeline Task Chain
+
+**MRESEARCH-001** (motion-researcher):
+```
+TaskCreate({
+  subject: "MRESEARCH-001",
+  description: "PURPOSE: Audit existing animations, measure performance baseline, catalog easing patterns | Success: 3 research artifacts produced with valid data
+TASK:
+  - Scan codebase for existing CSS @keyframes, transitions, JS animation code
+  - Measure paint/composite costs via Chrome DevTools performance traces (if available)
+  - Catalog existing easing functions and timing patterns
+  - Identify properties being animated (safe vs unsafe for compositor)
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <motion-scope>
+  - Framework: <framework>
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/research/*.json | All 3 research files with valid JSON
+CONSTRAINTS: Read-only analysis | Focus on existing animation patterns"
+})
+TaskUpdate({ taskId: "MRESEARCH-001", owner: "motion-researcher" })
+```
+
+**CHOREO-001** (choreographer):
+```
+TaskCreate({
+  subject: "CHOREO-001",
+  description: "PURPOSE: Design animation token system with easing functions, duration scale, stagger formulas | Success: Complete motion-tokens.json with all token categories
+TASK:
+  - Define easing functions (ease-out, ease-in-out, ease-spring) as cubic-bezier values
+  - Define duration scale (fast, base, slow, slower, slowest)
+  - Define stagger formula with base delay and increment
+  - Define reduced-motion fallback tokens
+  - Reference specs/motion-tokens.md for token schema
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <motion-scope>
+  - Framework: <framework>
+  - Upstream artifacts: research/*.json
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/choreography/motion-tokens.json | Complete token system
+CONSTRAINTS: Follow motion-tokens.md schema | All tokens must have reduced-motion fallback"
+})
+TaskUpdate({ taskId: "CHOREO-001", addBlockedBy: ["MRESEARCH-001"], owner: "choreographer" })
+```
+
+**ANIM-001** (animator):
+```
+TaskCreate({
+  subject: "ANIM-001",
+  description: "PURPOSE: Implement CSS custom properties and utility classes from motion tokens | Success: Production-ready CSS with token consumption and reduced-motion overrides
+TASK:
+  - Generate CSS custom properties from motion-tokens.json
+  - Create utility animation classes consuming tokens
+  - Add prefers-reduced-motion media query overrides
+  - Ensure compositor-only properties (transform, opacity) per specs/gpu-constraints.md
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <motion-scope>
+  - Framework: <framework>
+  - Upstream artifacts: choreography/motion-tokens.json
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/animations/keyframes/*.css | Token CSS + utility classes + reduced-motion
+CONSTRAINTS: Compositor-only animations | No layout-triggering properties | will-change budget"
+})
+TaskUpdate({ taskId: "ANIM-001", addBlockedBy: ["CHOREO-001"], owner: "animator" })
+```
+
+**MTEST-001** (motion-tester):
+```
+TaskCreate({
+  subject: "MTEST-001",
+  description: "PURPOSE: Verify animation performance and accessibility compliance | Success: 60fps confirmed, no layout thrashing, reduced-motion present
+TASK:
+  - Start Chrome DevTools performance trace (if available)
+  - Verify compositor-only animations (no paint/layout triggers)
+  - Check will-change usage (not excessive, max 3-4 elements)
+  - Validate prefers-reduced-motion @media query presence
+  - Static code analysis as fallback if Chrome DevTools unavailable
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <motion-scope>
+  - Framework: <framework>
+  - Upstream artifacts: animations/keyframes/*.css, choreography/motion-tokens.json
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/testing/reports/perf-report-001.md | Performance validation report
+CONSTRAINTS: Target 60fps | Flag any layout-triggering properties"
+})
+TaskUpdate({ taskId: "MTEST-001", addBlockedBy: ["ANIM-001"], owner: "motion-tester" })
+```
+
+---
+
+### Component Pipeline Task Chain
+
+Same as Tokens pipeline with enhanced task descriptions:
+
+- **MRESEARCH-001**: Same as tokens, plus focus on target component(s) existing animation
+- **CHOREO-001**: Same token design, plus transition state diagrams (entry/exit/hover/focus/loading) and scroll-triggered reveal sequences for the component(s)
+- **ANIM-001**: Implement component-specific animations: @keyframes, IntersectionObserver triggers, rAF coordination, staggered orchestration
+- **MTEST-001**: Same as tokens, plus GC loop -- if FPS < 60 or layout thrashing, send `fix_required` signal
+
+GC loop between animator and motion-tester (max 2 rounds).
+
+---
+
+### Page Pipeline Task Chain
+
+**MRESEARCH-001** and **CHOREO-001**: Same as component, but scope is full page with multiple scroll sections.
+
+**CHOREO-001** additionally defines scroll section boundaries, parallax depths, and staggered entry sequences per section.
+
+**ANIM-001..N** (parallel): One ANIM task per scroll section or page area:
+```
+TaskCreate({
+  subject: "ANIM-<NNN>",
+  description: "PURPOSE: Implement animations for <section-name> | Success: Scroll-triggered reveals with 60fps performance
+TASK:
+  - Implement IntersectionObserver-based scroll triggers for <section-name>
+  - Apply staggered entry animations with calculated delays
+  - Add scroll-linked parallax (if specified in choreography)
+  - Ensure prefers-reduced-motion fallback
+CONTEXT:
+  - Session: <session-folder>
+  - Section: <section-name>
+  - Upstream artifacts: choreography/sequences/<section>.md, choreography/motion-tokens.json
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/animations/keyframes/<section>.css + orchestrators/<section>.js
+CONSTRAINTS: Compositor-only | will-change budget | Follow motion-tokens"
+})
+TaskUpdate({ taskId: "ANIM-<NNN>", addBlockedBy: ["CHOREO-001"], owner: "animator" })
+```
+
+**MTEST-001**: Blocked by all ANIM tasks. Full page performance validation.
+
+---
+
+## Phase 4: Validation
+
+Verify task chain integrity:
+
+| Check | Method | Expected |
+|-------|--------|----------|
+| Task count correct | TaskList count | tokens: 4, component: 4, page: 4+N |
+| Dependencies correct | Trace dependency graph | Acyclic, correct blockedBy |
+| No circular dependencies | Trace dependency graph | Acyclic |
+| Task IDs use correct prefixes | Pattern check | MRESEARCH/CHOREO/ANIM/MTEST |
+| Structured descriptions complete | Each has PURPOSE/TASK/CONTEXT/EXPECTED/CONSTRAINTS | All present |
+
+If validation fails, fix the specific task and re-validate.

package/.claude/skills/team-motion-design/roles/coordinator/commands/monitor.md

@@ -0,0 +1,184 @@
+# Monitor Pipeline
+
+Event-driven pipeline coordination. Beat model: coordinator wake -> process -> spawn -> STOP.
+
+## Constants
+
+- SPAWN_MODE: background
+- ONE_STEP_PER_INVOCATION: true
+- FAST_ADVANCE_AWARE: true
+- WORKER_AGENT: team-worker
+- MAX_GC_ROUNDS: 2
+
+## Handler Router
+
+| Source | Handler |
+|--------|---------|
+| Message contains [motion-researcher], [choreographer], [animator], [motion-tester] | handleCallback |
+| "capability_gap" | handleAdapt |
+| "check" or "status" | handleCheck |
+| "resume" or "continue" | handleResume |
+| All tasks completed | handleComplete |
+| Default | handleSpawnNext |
+
+## handleCallback
+
+Worker completed. Process and advance.
+
+1. Parse message to identify role and task ID:
+
+| Message Pattern | Role |
+|----------------|------|
+| `[motion-researcher]` or `MRESEARCH-*` | motion-researcher |
+| `[choreographer]` or `CHOREO-*` | choreographer |
+| `[animator]` or `ANIM-*` | animator |
+| `[motion-tester]` or `MTEST-*` | motion-tester |
+
+2. Mark task completed: `TaskUpdate({ taskId: "<task-id>", status: "completed" })`
+3. Record completion in session state
+
+4. Check checkpoint for completed task:
+
+| Completed Task | Checkpoint | Action |
+|---------------|------------|--------|
+| MRESEARCH-001 | - | Notify user: research complete |
+| CHOREO-001 | - | Proceed to ANIM task(s) |
+| ANIM-* (single) | - | Proceed to MTEST-001 |
+| ANIM-* (page mode) | - | Check if all ANIM tasks complete, then unblock MTEST-001 |
+| MTEST-001 | PERF-001: Performance Gate | Check perf signal -> GC loop or complete |
+
+5. **Performance Gate handling** (MTEST task completed):
+   Read performance signal from message: `perf_passed`, `perf_warning`, or `fix_required`
+
+   | Signal | Condition | Action |
+   |--------|-----------|--------|
+   | `perf_passed` | FPS >= 60, no layout thrashing, reduced-motion present | Performance gate passed -> pipeline complete |
+   | `perf_warning` | Minor issues (will-change count high, near 60fps) | gc_rounds < max -> create ANIM-fix task |
+   | `fix_required` | FPS < 60 or layout thrashing detected | gc_rounds < max -> create ANIM-fix task (CRITICAL) |
+   | Any | gc_rounds >= max | Escalate to user |
+
+   **GC Fix Task Creation**:
+   ```
+   TaskCreate({ subject: "ANIM-fix-<round>",
+     description: "PURPOSE: Address performance issues from motion-tester report | Success: All critical perf issues resolved
+   TASK:
+     - Parse performance report for specific issues (layout thrashing, unsafe properties, excessive will-change)
+     - Replace layout-triggering properties with compositor-only alternatives
+     - Optimize will-change usage
+     - Verify reduced-motion fallback completeness
+   CONTEXT:
+     - Session: <session-folder>
+     - Upstream artifacts: testing/reports/perf-report-<NNN>.md" })
+   TaskUpdate({ taskId: "ANIM-fix-<round>", owner: "animator" })
+   ```
+   Then create new MTEST task blocked by fix. Increment gc_state.round.
+
+   **GC Escalation Options** (when max rounds exceeded):
+   1. Accept current animations - skip performance review, continue
+   2. Try one more round
+   3. Terminate
+
+6. -> handleSpawnNext
+
+## handleCheck
+
+Read-only status report, then STOP.
+
+```
+Pipeline Status (<pipeline-mode>):
+  [DONE]  MRESEARCH-001 (motion-researcher)  -> research/*.json
+  [DONE]  CHOREO-001    (choreographer)       -> motion-tokens.json + sequences/
+  [RUN]   ANIM-001      (animator)            -> implementing animations...
+  [WAIT]  MTEST-001     (motion-tester)       -> blocked by ANIM-001
+
+GC Rounds: 0/2
+Performance Gate: pending
+Session: <session-id>
+Commands: 'resume' to advance | 'check' to refresh
+```
+
+Output status -- do NOT advance pipeline.
+
+## handleResume
+
+1. Audit task list for inconsistencies:
+   - Tasks stuck in "in_progress" -> reset to "pending"
+   - Tasks with completed blockers but still "pending" -> include in spawn list
+2. -> handleSpawnNext
+
+## handleSpawnNext
+
+Find ready tasks, spawn workers, STOP.
+
+1. Collect: completedSubjects, inProgressSubjects, readySubjects (pending + all blockedBy completed)
+2. No ready + work in progress -> report waiting, STOP
+3. No ready + nothing in progress -> handleComplete
+4. Has ready -> for each:
+   a. Check inner loop role with active worker -> skip (worker picks up)
+   b. TaskUpdate -> in_progress
+   c. team_msg log -> task_unblocked
+   d. Spawn team-worker:
+
+```
+Agent({
+  subagent_type: "team-worker",
+  description: "Spawn <role> worker for <task-id>",
+  team_name: "motion-design",
+  name: "<role>",
+  run_in_background: true,
+  prompt: `## Role Assignment
+role: <role>
+role_spec: ~  or <project>/.claude/skills/team-motion-design/roles/<role>/role.md
+session: <session-folder>
+session_id: <session-id>
+team_name: motion-design
+requirement: <task-description>
+inner_loop: <true|false>
+
+Read role_spec file to load Phase 2-4 domain instructions.
+Execute built-in Phase 1 (task discovery) -> role Phase 2-4 -> built-in Phase 5 (report).`
+})
+```
+
+**Parallel spawn rules by mode**:
+
+| Mode | Scenario | Spawn Behavior |
+|------|----------|---------------|
+| tokens | Sequential | One task at a time |
+| component | Sequential | One task at a time, GC loop on MTEST |
+| page | After CHOREO-001 | Spawn ANIM-001..N in parallel (CP-3 Fan-out) |
+| page | After all ANIM complete | Spawn MTEST-001 |
+
+5. Add to active_workers, update session, output summary, STOP
+
+## handleComplete
+
+Pipeline done. Generate report and completion action.
+
+**Completion check by mode**:
+
+| Mode | Completion Condition |
+|------|---------------------|
+| tokens | All 4 tasks (+ fix tasks) completed |
+| component | All 4 tasks (+ fix tasks) completed |
+| page | All 4+N tasks (+ fix tasks) completed |
+
+1. If any tasks not completed -> handleSpawnNext
+2. If all completed -> transition to coordinator Phase 5
+
+## handleAdapt
+
+Capability gap reported mid-pipeline.
+
+1. Parse gap description
+2. Check if existing role covers it -> redirect
+3. Role count < 5 -> generate dynamic role spec
+4. Create new task, spawn worker
+5. Role count >= 5 -> merge or pause
+
+## Fast-Advance Reconciliation
+
+On every coordinator wake:
+1. Read team_msg entries with type="fast_advance"
+2. Sync active_workers with spawned successors
+3. No duplicate spawns

package/.claude/skills/team-motion-design/roles/coordinator/role.md

@@ -0,0 +1,167 @@
+# Coordinator Role
+
+Motion Design Team coordinator. Orchestrate pipeline: analyze -> dispatch -> spawn -> monitor -> report. Manages animation task chains with GC loops for performance validation.
+
+## Identity
+- **Name**: coordinator | **Tag**: [coordinator]
+- **Responsibility**: Analyze task -> Create team -> Dispatch tasks -> Monitor progress -> Report results
+
+## Boundaries
+
+### MUST
+- All output (SendMessage, team_msg, logs) must carry `[coordinator]` identifier
+- Use `team-worker` agent type for all worker spawns (NOT `general-purpose`)
+- Dispatch tasks with proper dependency chains and blockedBy
+- Monitor worker progress via message bus and route messages
+- Handle Generator-Critic loops with max 2 iterations
+- Maintain session state persistence
+
+### MUST NOT
+- Implement domain logic (researching, choreographing, animating, testing) -- workers handle this
+- Spawn workers without creating tasks first
+- Skip sync points when configured
+- Force-advance pipeline past failed performance test
+- Modify source code or animation artifacts directly -- delegate to workers
+- Omit `[coordinator]` identifier in any output
+
+## Command Execution Protocol
+
+When coordinator needs to execute a command (analyze, dispatch, monitor):
+
+1. Read `commands/<command>.md`
+2. Follow the workflow defined in the command
+3. Commands are inline execution guides, NOT separate agents
+4. Execute synchronously, complete before proceeding
+
+## Entry Router
+
+| Detection | Condition | Handler |
+|-----------|-----------|---------|
+| Worker callback | Message contains [motion-researcher], [choreographer], [animator], [motion-tester] | -> handleCallback (monitor.md) |
+| Status check | Args contain "check" or "status" | -> handleCheck (monitor.md) |
+| Manual resume | Args contain "resume" or "continue" | -> handleResume (monitor.md) |
+| Capability gap | Message contains "capability_gap" | -> handleAdapt (monitor.md) |
+| Pipeline complete | All tasks have status "completed" | -> handleComplete (monitor.md) |
+| Interrupted session | Active/paused session exists in .workflow/.team/MD-* | -> Phase 0 |
+| New session | None of above | -> Phase 1 |
+
+For callback/check/resume/adapt/complete: load `@commands/monitor.md`, execute matched handler, STOP.
+
+## Phase 0: Session Resume Check
+
+1. Scan `.workflow/.team/MD-*/.msg/meta.json` for active/paused sessions
+2. No sessions -> Phase 1
+3. Single session -> reconcile (audit TaskList, reset in_progress->pending, rebuild team, kick first ready task)
+4. Multiple -> AskUserQuestion for selection
+
+## Phase 1: Requirement Clarification
+
+TEXT-LEVEL ONLY. No source code reading.
+
+1. Parse task description from arguments
+2. Detect motion scope:
+
+| Signal | Pipeline Mode |
+|--------|---------------|
+| Token, easing, duration system, motion tokens | tokens |
+| Animate specific component(s), single element | component |
+| Full page scroll choreography, page transitions | page |
+| Unclear | ask user |
+
+3. Ask for missing parameters if scope unclear:
+   ```
+   AskUserQuestion({
+     questions: [
+       { question: "Motion design scope?", header: "Scope", options: [
+         { label: "Animation token system", description: "Easing functions, duration scale, stagger formulas" },
+         { label: "Component animation", description: "Animate specific component(s) with transitions" },
+         { label: "Page scroll choreography", description: "Full page scroll-triggered reveals and transitions" }
+       ]},
+       { question: "Target framework?", header: "Framework", options: [
+         { label: "CSS-only" }, { label: "React" },
+         { label: "Vue" }, { label: "Vanilla JS" }, { label: "Other" }
+       ]}
+     ]
+   })
+   ```
+4. Delegate to `@commands/analyze.md` -> output scope context
+5. Record: pipeline_mode, framework, complexity
+
+## Phase 2: Create Team + Initialize Session
+
+1. Resolve workspace paths (MUST do first):
+   - `project_root` = result of `Bash({ command: "pwd" })`
+   - `skill_root` = `<project_root>/.claude/skills/team-motion-design`
+2. Generate session ID: `MD-<slug>-<YYYY-MM-DD>`
+3. Create session folder structure:
+   ```
+   .workflow/.team/MD-<slug>-<date>/research/perf-traces/
+   .workflow/.team/MD-<slug>-<date>/choreography/sequences/
+   .workflow/.team/MD-<slug>-<date>/animations/keyframes/
+   .workflow/.team/MD-<slug>-<date>/animations/orchestrators/
+   .workflow/.team/MD-<slug>-<date>/testing/traces/
+   .workflow/.team/MD-<slug>-<date>/testing/reports/
+   .workflow/.team/MD-<slug>-<date>/wisdom/
+   .workflow/.team/MD-<slug>-<date>/.msg/
+   ```
+4. Initialize `.msg/meta.json` via team_msg state_update with pipeline metadata
+5. TeamCreate(team_name="motion-design")
+6. Do NOT spawn workers yet - deferred to Phase 4
+
+## Phase 3: Create Task Chain
+
+Delegate to `@commands/dispatch.md`. Task chains by mode:
+
+| Mode | Task Chain |
+|------|------------|
+| tokens | MRESEARCH-001 -> CHOREO-001 -> ANIM-001 -> MTEST-001 |
+| component | MRESEARCH-001 -> CHOREO-001 -> ANIM-001 -> MTEST-001 (GC loop) |
+| page | MRESEARCH-001 -> CHOREO-001 -> [ANIM-001..N parallel] -> MTEST-001 |
+
+## Phase 4: Spawn-and-Stop
+
+Delegate to `@commands/monitor.md#handleSpawnNext`:
+1. Find ready tasks (pending + blockedBy resolved)
+2. Spawn team-worker agents (see SKILL.md Spawn Template)
+3. Output status summary
+4. STOP
+
+## Phase 5: Report + Completion Action
+
+1. Read session state -> collect all results
+2. List deliverables:
+
+| Deliverable | Path |
+|-------------|------|
+| Animation Inventory | <session>/research/animation-inventory.json |
+| Performance Baseline | <session>/research/performance-baseline.json |
+| Easing Catalog | <session>/research/easing-catalog.json |
+| Motion Tokens | <session>/choreography/motion-tokens.json |
+| Choreography Sequences | <session>/choreography/sequences/*.md |
+| CSS Keyframes | <session>/animations/keyframes/*.css |
+| JS Orchestrators | <session>/animations/orchestrators/*.js |
+| Performance Reports | <session>/testing/reports/perf-report-*.md |
+
+3. Calculate: completed_tasks, gc_rounds, perf_score, final_fps
+4. Output pipeline summary with [coordinator] prefix
+5. Execute completion action:
+   ```
+   AskUserQuestion({
+     questions: [{ question: "Pipeline complete. What next?", header: "Completion", options: [
+       { label: "Archive & Clean", description: "Archive session and clean up team resources" },
+       { label: "Keep Active", description: "Keep session for follow-up work" },
+       { label: "Export Results", description: "Export deliverables to specified location" }
+     ]}]
+   })
+   ```
+
+## Error Handling
+
+| Error | Resolution |
+|-------|------------|
+| Task timeout | Log, mark failed, ask user to retry or skip |
+| Worker crash | Reset task to pending, respawn worker |
+| Dependency cycle | Detect, report to user, halt |
+| Invalid scope | Reject with error, ask to clarify |
+| Session corruption | Attempt recovery, fallback to manual reconciliation |
+| GC loop stuck > 2 rounds | Escalate to user: accept / try one more / terminate |

package/.claude/skills/team-motion-design/roles/motion-researcher/role.md

@@ -0,0 +1,115 @@
+---
+role: motion-researcher
+prefix: MRESEARCH
+inner_loop: false
+message_types: [state_update]
+---
+
+# Motion & Animation Researcher
+
+Audit existing animations in the codebase, measure paint/composite costs via Chrome DevTools performance traces, and catalog easing patterns. Produce foundation data for downstream choreographer, animator, and motion-tester roles.
+
+## Phase 2: Context & Environment Detection
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| .msg/meta.json | <session>/wisdom/.msg/meta.json | No |
+
+1. Extract session path and target scope from task description
+2. Detect project type and tech stack from package.json or equivalent:
+
+| Package | Detected Stack |
+|---------|---------------|
+| next | nextjs |
+| react | react |
+| vue | vue |
+| svelte | svelte |
+| gsap | gsap |
+| framer-motion | framer-motion |
+| @react-spring/web | react-spring |
+| (default) | css-vanilla |
+
+3. Use CLI tools (e.g., `ccw cli -p "..." --tool gemini --mode analysis`) or direct tools (Glob, Grep) to scan for existing animations, transitions, keyframes
+4. Read framework context from session config
+
+## Phase 3: Research Execution
+
+Execute 3 analysis streams:
+
+**Stream 1 -- Animation Inventory**:
+- Search for CSS @keyframes declarations (pattern: `@keyframes`)
+- Search for CSS transition properties (pattern: `transition:`, `transition-property:`)
+- Search for JS animation APIs (requestAnimationFrame, Web Animations API, GSAP, Framer Motion)
+- Search for IntersectionObserver usage (scroll-triggered animations)
+- Catalog each animation: name, properties animated, duration, easing, trigger mechanism
+- Flag unsafe properties (width, height, top, left, margin, padding, color, background-color)
+- Output: `<session>/research/animation-inventory.json`
+  ```json
+  {
+    "css_keyframes": [{ "name": "", "file": "", "properties": [], "safe": true }],
+    "css_transitions": [{ "file": "", "line": 0, "properties": [], "duration": "", "easing": "" }],
+    "js_animations": [{ "file": "", "type": "rAF|WAAPI|gsap|framer", "properties": [] }],
+    "scroll_triggers": [{ "file": "", "type": "IntersectionObserver|scroll-event", "threshold": 0 }],
+    "unsafe_animations": [{ "file": "", "line": 0, "property": "", "suggestion": "" }],
+    "summary": { "total": 0, "safe_count": 0, "unsafe_count": 0 }
+  }
+  ```
+
+**Stream 2 -- Performance Baseline**:
+- If Chrome DevTools MCP available:
+  - Start performance trace: `mcp__chrome-devtools__performance_start_trace()`
+  - Trigger page load or scroll interaction
+  - Stop trace: `mcp__chrome-devtools__performance_stop_trace()`
+  - Analyze: `mcp__chrome-devtools__performance_analyze_insight()`
+  - Extract: FPS data, paint/composite times, layout thrashing events, layer count
+- If Chrome DevTools unavailable:
+  - Static analysis: count layout-triggering properties, estimate performance from code patterns
+  - Mark `_source: "static-analysis"`
+- Output: `<session>/research/performance-baseline.json`
+  ```json
+  {
+    "_source": "chrome-devtools|static-analysis",
+    "fps": { "average": 0, "minimum": 0, "drops": [] },
+    "paint_time_ms": 0,
+    "composite_time_ms": 0,
+    "layout_thrashing": [],
+    "layer_count": 0,
+    "will_change_count": 0
+  }
+  ```
+
+**Stream 3 -- Easing Catalog**:
+- Search for cubic-bezier declarations in CSS
+- Search for named easing functions (ease, ease-in, ease-out, ease-in-out, linear)
+- Search for JS easing implementations (spring physics, custom curves)
+- Catalog each: name/value, usage count, context (hover, scroll, entry)
+- Recommend additions based on gaps (missing ease-spring, missing stagger patterns)
+- Reference specs/motion-tokens.md for recommended token schema
+- Output: `<session>/research/easing-catalog.json`
+  ```json
+  {
+    "existing": [{ "value": "", "usage_count": 0, "contexts": [] }],
+    "recommended_additions": [{ "name": "", "value": "", "reason": "" }],
+    "duration_patterns": [{ "value": "", "usage_count": 0, "contexts": [] }],
+    "stagger_patterns": [{ "found": false, "details": "" }]
+  }
+  ```
+
+Compile research summary metrics: animation_count, safe_percentage, fps_baseline, easing_count, has_reduced_motion.
+
+## Phase 4: Validation & Output
+
+1. Verify all 3 output files exist and contain valid JSON with required fields:
+
+| File | Required Fields |
+|------|----------------|
+| animation-inventory.json | css_keyframes array, summary |
+| performance-baseline.json | _source |
+| easing-catalog.json | existing array |
+
+2. If any file missing or invalid, re-run corresponding stream
+
+3. Update `<session>/wisdom/.msg/meta.json` under `motion-researcher` namespace:
+   - Read existing -> merge `{ "motion-researcher": { detected_stack, animation_count, safe_percentage, fps_baseline, easing_count, has_reduced_motion } }` -> write back