claude-code-workflow 7.2.27 → 7.2.29

package/.claude/skills/team-interactive-craft/roles/builder/role.md

@@ -0,0 +1,216 @@
+---
+role: builder
+prefix: BUILD
+inner_loop: true
+message_types: [state_update]
+---
+
+# Interactive Component Builder
+
+Implement vanilla JS + CSS interactive components from interaction blueprints. Zero dependencies, ES modules, progressive enhancement, GPU-only animations, touch-aware. Act as Generator in the builder<->a11y-tester Generator-Critic loop.
+
+## Phase 2: Context & Artifact Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Interaction blueprints | <session>/interaction/blueprints/*.md | Yes |
+| Research artifacts | <session>/research/*.json | Yes |
+| .msg/meta.json | <session>/wisdom/.msg/meta.json | Yes |
+| A11y audit feedback | <session>/a11y/a11y-audit-*.md | Only for GC fix tasks |
+
+1. Extract session path from task description
+2. Read interaction blueprint for target component
+3. Read research artifacts: browser-api-audit.json (API availability), pattern-reference.json (reference patterns)
+4. Detect task type from subject: numbered -> New component, "fix" -> GC fix
+5. If GC fix task: read latest a11y audit feedback
+
+## Phase 3: Implementation Execution
+
+**Component Implementation (BUILD-001, BUILD-002, etc.)**:
+
+### JavaScript (ES Module)
+Implement component class in `<session>/build/components/{name}.js`:
+
+```javascript
+// Structure template (adapt to component type)
+export class ComponentName {
+  // --- Configuration ---
+  static defaults = { /* configurable params from blueprint */ };
+
+  // --- Lifecycle ---
+  constructor(element, options = {}) { /* merge options, query DOM, bind events */ }
+  init() { /* setup observers, initial state */ }
+  destroy() { /* cleanup: remove listeners, disconnect observers */ }
+
+  // --- State Machine ---
+  #state = 'idle';
+  #setState(next) { /* validate transition, update, trigger side effects */ }
+
+  // --- Event Handlers (from blueprint event flow map) ---
+  #onPointerDown(e) { /* setPointerCapture, transition state */ }
+  #onPointerMove(e) { /* lerp interpolation, update transform */ }
+  #onPointerUp(e) { /* releasePointerCapture, settle animation */ }
+  #onKeyDown(e) { /* keyboard mapping from blueprint */ }
+
+  // --- Animation ---
+  #lerp(current, target, speed) { return current + (target - current) * speed; }
+  #animate() { /* requestAnimationFrame loop, GPU-only transforms */ }
+
+  // --- Observers ---
+  #resizeObserver = null;  // responsive behavior
+  #intersectionObserver = null;  // scroll triggers
+
+  // --- Accessibility ---
+  #announceToScreenReader(message) { /* aria-live region update */ }
+}
+
+// Auto-init: progressive enhancement
+document.querySelectorAll('[data-component-name]').forEach(el => {
+  new ComponentName(el);
+});
+```
+
+Requirements:
+- Pure ES module with `export` (no CommonJS, no bundler)
+- Class-based with private fields (#)
+- Constructor accepts DOM element + options object
+- State machine from blueprint with validated transitions
+- Event handlers from blueprint event flow map
+- Lerp interpolation for smooth drag/follow (speed from blueprint)
+- requestAnimationFrame for frame-synced updates
+- setPointerCapture for reliable drag tracking
+- ResizeObserver for responsive layout adjustments
+- IntersectionObserver for scroll-triggered behavior (when applicable)
+- Proper cleanup in destroy() method
+- Auto-init via data attribute for progressive enhancement
+
+### CSS (Custom Properties)
+Implement styles in `<session>/build/components/{name}.css`:
+
+```css
+/* Structure template */
+/* --- Custom Properties (configurable) --- */
+.component-name {
+  --component-duration: 400ms;
+  --component-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --component-color-primary: #1a1a2e;
+  /* ... from blueprint animation choreography */
+}
+
+/* --- Base Layout (works without JS) --- */
+.component-name { /* progressive enhancement base */ }
+
+/* --- States (from blueprint state machine) --- */
+.component-name[data-state="idle"] { }
+.component-name[data-state="hover"] { }
+.component-name[data-state="active"] { }
+.component-name[data-state="dragging"] { }
+
+/* --- Animations (GPU-only: transform + opacity) --- */
+.component-name__element {
+  transform: translateX(0);
+  opacity: 1;
+  transition: transform var(--component-duration) var(--component-easing),
+              opacity var(--component-duration) var(--component-easing);
+  will-change: transform, opacity;
+}
+
+/* --- Focus Styles --- */
+.component-name:focus-visible {
+  outline: 2px solid var(--component-focus-color, #4a9eff);
+  outline-offset: 2px;
+}
+
+/* --- Reduced Motion --- */
+@media (prefers-reduced-motion: reduce) {
+  .component-name,
+  .component-name * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* --- Responsive --- */
+@media (max-width: 768px) { /* touch-optimized sizes */ }
+```
+
+Requirements:
+- CSS custom properties for all configurable values (no preprocessor)
+- Base layout works without JavaScript (progressive enhancement)
+- State-driven via data attributes (`data-state`, `data-active`)
+- GPU-only animations: transform + opacity ONLY (no width/height/top/left)
+- `will-change` on animated elements
+- `prefers-reduced-motion` media query with instant transitions
+- `focus-visible` for keyboard-only focus ring
+- Responsive breakpoints for touch targets (min 44x44px)
+- No inline styles from JS -- use CSS classes and custom properties
+
+### Native Platform APIs (prefer over custom implementations)
+
+**Dialog API** (`<dialog>`):
+- Use `<dialog>` for modals — provides built-in focus trap and backdrop
+- `dialog.showModal()` for modal (with backdrop, escape-to-close, focus trap)
+- `dialog.show()` for non-modal
+- `dialog.close()` to dismiss
+- Style `::backdrop` pseudo-element for overlay
+- Returns focus to trigger element on close
+- Add `inert` attribute to siblings when modal is open (prevents background interaction)
+
+**Popover API** (native tooltips/dropdowns):
+- `<div popover>` for light-dismiss popovers (click-outside-to-close)
+- `<button popovertarget="id">` for trigger
+- Auto-stacking (no z-index management needed)
+- Built-in accessibility (focus management, escape-to-close)
+- Use for: tooltips, dropdown menus, date pickers, color pickers
+
+**CSS Anchor Positioning** (Chrome 125+, progressive enhancement):
+- `anchor-name: --trigger` on trigger element
+- `position-anchor: --trigger` on positioned element
+- `@position-try` for fallback positioning
+- Fallback: `position: fixed` with JS-calculated coordinates
+
+**GC Fix Mode (BUILD-fix-N)**:
+- Parse a11y audit feedback for specific issues
+- Re-read affected component files
+- Apply targeted fixes: missing ARIA attributes, keyboard handlers, focus management, contrast adjustments
+- Re-write affected files
+- Signal `build_revision` instead of `build_ready`
+
+## Phase 4: Self-Validation & Output
+
+1. Zero-dependency check:
+
+| Check | Pass Criteria |
+|-------|---------------|
+| No imports from npm | No `import` from node_modules paths |
+| No require() | No CommonJS require statements |
+| ES module exports | Uses `export class` or `export function` |
+| No build tools needed | Runs directly in browser with `<script type="module">` |
+
+2. State machine completeness:
+
+| Check | Pass Criteria |
+|-------|---------------|
+| All states from blueprint | Every blueprint state has corresponding code path |
+| All transitions | Every transition has handler code |
+| Error recovery | All states can reach idle via reset |
+
+3. Accessibility baseline:
+
+| Check | Pass Criteria |
+|-------|---------------|
+| Keyboard handlers | onKeyDown handles Enter, Space, Escape, Arrows |
+| ARIA attributes | role, aria-label, aria-expanded (as needed) set |
+| Focus management | tabindex, focus-visible styles present |
+| Reduced motion | prefers-reduced-motion media query in CSS |
+
+4. Performance baseline:
+
+| Check | Pass Criteria |
+|-------|---------------|
+| GPU-only transforms | No width/height/top/left in transitions |
+| No forced reflow | No offsetWidth/getBoundingClientRect in animation loop |
+| Cleanup | destroy() disconnects all observers and listeners |
+
+5. Update `<session>/wisdom/.msg/meta.json` under `builder` namespace:
+   - Read existing -> merge `{ "builder": { task_type, component_name, file_count, output_dir, states_implemented, events_bound } }` -> write back

package/.claude/skills/team-interactive-craft/roles/coordinator/commands/analyze.md

@@ -0,0 +1,71 @@
+# Analyze Task
+
+Parse user task -> detect interactive component scope -> identify browser APIs -> determine pipeline mode.
+
+**CONSTRAINT**: Text-level analysis only. NO source code reading, NO codebase exploration.
+
+## Signal Detection
+
+| Keywords | Capability | Pipeline Hint |
+|----------|------------|---------------|
+| split, compare, before/after, slider, divider | split-compare | single |
+| gallery, carousel, scroll-snap, horizontal scroll | scroll-snap-gallery | gallery |
+| lightbox, modal, overlay, fullscreen view | lightbox | single |
+| scroll reveal, appear on scroll, fade in, stagger | scroll-reveal | single or gallery |
+| glass, terminal, frosted, blur, backdrop | glass-terminal | single |
+| lens, magnify, zoom, loupe | lens-effect | single |
+| drag, resize, pointer, touch | pointer-interaction | single |
+| page, landing, sections, multi-section | interactive-page | page |
+| multiple components, collection, set | multi-component | gallery or page |
+
+## Scope Determination
+
+| Signal | Pipeline Mode |
+|--------|---------------|
+| Single component mentioned | single |
+| Gallery or scroll-based multi-component | gallery |
+| Full interactive page or multi-section | page |
+| Unclear | ask user |
+
+## Complexity Scoring
+
+| Factor | Points |
+|--------|--------|
+| Single component | +1 |
+| Gallery / scroll collection | +2 |
+| Full interactive page | +3 |
+| Pointer/drag interactions | +1 |
+| Scroll-based triggers (IntersectionObserver) | +1 |
+| Touch gestures (pinch, swipe) | +1 |
+| Overlay/modal with focus trap | +1 |
+| Animation choreography (stagger, sequence) | +1 |
+
+Results: 1-2 Low (single), 3-4 Medium (gallery), 5+ High (page)
+
+## Browser API Detection
+
+| Keywords | Browser API |
+|----------|-------------|
+| scroll, appear, visibility, threshold | IntersectionObserver |
+| resize, container, responsive, layout | ResizeObserver |
+| drag, pointer, mouse, click | Pointer Events |
+| touch, swipe, pinch, gesture | Touch Events |
+| scroll snap, snap point, mandatory | CSS scroll-snap |
+| clip, mask, reveal, wipe | CSS clip-path |
+| blur, frosted, glass | CSS backdrop-filter |
+| animate, transition, keyframe | Web Animations API |
+| focus, trap, tab, keyboard | Focus Management |
+
+## Output
+
+Write scope context to coordinator memory:
+```json
+{
+  "pipeline_mode": "<single|gallery|page>",
+  "scope": "<description>",
+  "interaction_type": "<pointer|scroll|overlay|mixed>",
+  "components": ["<detected-component-types>"],
+  "browser_apis": ["<detected-apis>"],
+  "complexity": { "score": 0, "level": "Low|Medium|High" }
+}
+```

package/.claude/skills/team-interactive-craft/roles/coordinator/commands/dispatch.md

@@ -0,0 +1,192 @@
+# Command: Dispatch
+
+Create the interactive craft task chain with correct dependencies and structured task descriptions. Supports single, gallery, 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 meta.json `pipeline` | Yes |
+| Interaction type | From session meta.json `interaction_type` | Yes |
+
+1. Load user requirement and scope from session meta.json
+2. Load pipeline stage definitions from specs/pipelines.md
+3. Read `pipeline` and `interaction_type` from session meta.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: <interaction-scope>
+  - Components: <component-list>
+  - 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 |
+|------|--------|
+| `single` | Create 4 tasks: RESEARCH -> INTERACT -> BUILD -> A11Y |
+| `gallery` | Create 6 tasks: RESEARCH -> INTERACT-001 -> BUILD-001 -> INTERACT-002 -> BUILD-002 -> A11Y |
+| `page` | Create 4+ tasks: RESEARCH -> INTERACT -> [BUILD-001..N parallel] -> A11Y |
+
+---
+
+### Single Pipeline Task Chain
+
+**RESEARCH-001** (researcher):
+```
+TaskCreate({
+  subject: "RESEARCH-001",
+  description: "PURPOSE: Analyze interaction patterns, browser API availability, and reference implementations | Success: 3 research artifacts with valid data
+TASK:
+  - Catalog existing interactive components in project
+  - Audit browser API usage (IntersectionObserver, ResizeObserver, Pointer Events, Touch Events)
+  - Collect reference patterns for target component type
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <interaction-scope>
+  - Components: <component-list>
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/research/*.json | All 3 research files with valid JSON
+CONSTRAINTS: Read-only analysis | Focus on <interaction-scope>"
+})
+TaskUpdate({ taskId: "RESEARCH-001", owner: "researcher" })
+```
+
+**INTERACT-001** (interaction-designer):
+```
+TaskCreate({
+  subject: "INTERACT-001",
+  description: "PURPOSE: Design complete interaction blueprint with state machine and event flows | Success: Blueprint with all states, events, and keyboard mappings defined
+TASK:
+  - Define state machine (idle -> hover -> active -> animating -> complete)
+  - Map event flows (pointer/touch/keyboard -> handlers -> state transitions)
+  - Specify gesture parameters (lerp speed, thresholds, easing)
+  - Design animation choreography (entry/exit/idle transitions)
+  - Create touch/keyboard/mouse mapping table
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <interaction-scope>
+  - Upstream artifacts: research/*.json
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/interaction/blueprints/<component-name>.md | Complete state machine + event map + keyboard coverage
+CONSTRAINTS: Vanilla JS only | GPU-only animations | Progressive enhancement"
+})
+TaskUpdate({ taskId: "INTERACT-001", addBlockedBy: ["RESEARCH-001"], owner: "interaction-designer" })
+```
+
+**BUILD-001** (builder):
+```
+TaskCreate({
+  subject: "BUILD-001",
+  description: "PURPOSE: Implement interactive component as vanilla JS + CSS | Success: Working ES module + CSS with all states, touch-aware, keyboard accessible
+TASK:
+  - Implement ES module component class from interaction blueprint
+  - Write CSS with custom properties (no preprocessor)
+  - Add progressive enhancement (content works without JS)
+  - Use GPU-only animations (transform + opacity)
+  - Implement pointer events with touch fallback
+  - Add ResizeObserver for responsive behavior
+  - Add IntersectionObserver for scroll triggers (if applicable)
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <interaction-scope>
+  - Upstream artifacts: interaction/blueprints/*.md, research/*.json
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/build/components/<name>.js + <name>.css | Zero dependencies, all states implemented
+CONSTRAINTS: No npm packages | ES modules only | No inline styles | < 5ms per frame"
+})
+TaskUpdate({ taskId: "BUILD-001", addBlockedBy: ["INTERACT-001"], owner: "builder" })
+```
+
+**A11Y-001** (a11y-tester):
+```
+TaskCreate({
+  subject: "A11Y-001",
+  description: "PURPOSE: Audit accessibility of built component | Success: Audit report with pass/fail per check, 0 critical issues
+TASK:
+  - Test keyboard navigation (tab order, arrow keys, escape, enter/space)
+  - Check screen reader compatibility (ARIA roles, states, live regions)
+  - Verify reduced motion fallback (prefers-reduced-motion)
+  - Test focus management (visible indicator, focus trap for overlays)
+  - Check color contrast (foreground/background ratio)
+CONTEXT:
+  - Session: <session-folder>
+  - Scope: <interaction-scope>
+  - Upstream artifacts: build/components/*.js, build/components/*.css, interaction/blueprints/*.md
+  - Shared memory: <session>/wisdom/.msg/meta.json
+EXPECTED: <session>/a11y/a11y-audit-001.md | Per-check pass/fail with remediation suggestions
+CONSTRAINTS: Read-only analysis | GC convergence: 0 critical issues"
+})
+TaskUpdate({ taskId: "A11Y-001", addBlockedBy: ["BUILD-001"], owner: "a11y-tester" })
+```
+
+---
+
+### Gallery Pipeline Task Chain
+
+Create tasks in dependency order:
+
+| Task | Role | blockedBy | Description |
+|------|------|-----------|-------------|
+| RESEARCH-001 | researcher | (none) | Interaction patterns + browser API audit |
+| INTERACT-001 | interaction-designer | RESEARCH-001 | Base component interaction blueprint |
+| BUILD-001 | builder | INTERACT-001 | Base component implementation |
+| INTERACT-002 | interaction-designer | BUILD-001 | Gallery/scroll-snap interaction blueprint |
+| BUILD-002 | builder | INTERACT-002 | Gallery container + navigation implementation |
+| A11Y-001 | a11y-tester | BUILD-002 | Full gallery accessibility audit |
+
+Task descriptions follow same template as single pipeline, with subject-specific content:
+- INTERACT-002 focuses on scroll-snap container, navigation dots, active item detection
+- BUILD-002 focuses on gallery container with CSS scroll-snap, IntersectionObserver for active item, navigation controls
+
+---
+
+### Page Pipeline Task Chain
+
+| Task | Role | blockedBy | Description |
+|------|------|-----------|-------------|
+| RESEARCH-001 | researcher | (none) | Interaction patterns for all page sections |
+| INTERACT-001 | interaction-designer | RESEARCH-001 | Blueprints for all interactive sections |
+| BUILD-001..N | builder | INTERACT-001 | One task per section (parallel fan-out) |
+| A11Y-001 | a11y-tester | BUILD-001..N (all) | Full page accessibility audit |
+
+**Parallel fan-out**: Create one BUILD task per distinct interactive section detected in the interaction blueprint. Each BUILD task is blocked only by INTERACT-001. A11Y-001 is blocked by ALL BUILD tasks.
+
+Task descriptions for each BUILD-00N specify which section to implement, referencing the corresponding section in the interaction blueprint.
+
+---
+
+## Phase 4: Validation
+
+Verify task chain integrity:
+
+| Check | Method | Expected |
+|-------|--------|----------|
+| Task count correct | TaskList count | single: 4, gallery: 6, page: 3+N |
+| Dependencies correct | Trace dependency graph | Acyclic, correct blockedBy |
+| No circular dependencies | Trace dependency graph | Acyclic |
+| Task IDs use correct prefixes | Pattern check | RESEARCH/INTERACT/BUILD/A11Y |
+| 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-interactive-craft/roles/coordinator/commands/monitor.md

@@ -0,0 +1,183 @@
+# 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 [researcher], [interaction-designer], [builder], [a11y-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 |
+|----------------|------|
+| `[researcher]` or `RESEARCH-*` | researcher |
+| `[interaction-designer]` or `INTERACT-*` | interaction-designer |
+| `[builder]` or `BUILD-*` | builder |
+| `[a11y-tester]` or `A11Y-*` | a11y-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 |
+|---------------|------------|--------|
+| RESEARCH-001 | - | Notify user: research complete |
+| INTERACT-001 | - | Proceed to BUILD-001 (single/gallery) or BUILD-001..N (page parallel) |
+| INTERACT-002 | - | Proceed to BUILD-002 (gallery) |
+| BUILD-001 | - | Check mode: single -> A11Y-001; gallery -> INTERACT-002; page -> check if all BUILD done |
+| BUILD-001..N | - | Page mode: check if all BUILD tasks done -> A11Y-001 |
+| BUILD-002 | - | Gallery: proceed to A11Y-001 |
+| A11Y-001 | QUALITY: A11y Gate | Check a11y signal -> GC loop or complete |
+
+5. **A11y Gate handling** (A11Y task completed):
+   Read a11y signal from message: `a11y_passed`, `a11y_result`, or `fix_required`
+
+   | Signal | Condition | Action |
+   |--------|-----------|--------|
+   | `a11y_passed` | 0 critical issues | GC converged -> record gate -> handleComplete |
+   | `a11y_result` | Minor issues only | gc_rounds < max -> create BUILD-fix task |
+   | `fix_required` | Critical issues found | gc_rounds < max -> create BUILD-fix task (CRITICAL) |
+   | Any | gc_rounds >= max | Escalate to user |
+
+   **GC Fix Task Creation**:
+   ```
+   TaskCreate({ subject: "BUILD-fix-<round>",
+     description: "PURPOSE: Address a11y audit feedback | Success: All critical/high issues resolved
+   TASK:
+     - Parse a11y audit feedback for specific issues
+     - Apply targeted fixes to component JS/CSS
+   CONTEXT:
+     - Session: <session-folder>
+     - Upstream artifacts: a11y/a11y-audit-<NNN>.md" })
+   TaskUpdate({ taskId: "BUILD-fix-<round>", owner: "builder" })
+   ```
+   Then create new A11Y task blocked by fix. Increment gc_state.round.
+
+   **GC Escalation Options** (when max rounds exceeded):
+   1. Accept current implementation - skip remaining a11y fixes
+   2. Try one more round
+   3. Terminate
+
+6. -> handleSpawnNext
+
+## handleCheck
+
+Read-only status report, then STOP.
+
+```
+Pipeline Status (<pipeline-mode>):
+  [DONE]  RESEARCH-001      (researcher)            -> research/*.json
+  [DONE]  INTERACT-001      (interaction-designer)  -> blueprints/*.md
+  [RUN]   BUILD-001         (builder)               -> building component...
+  [WAIT]  A11Y-001          (a11y-tester)            -> blocked by BUILD-001
+
+GC Rounds: 0/2
+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: "interactive-craft",
+  name: "<role>",
+  run_in_background: true,
+  prompt: `## Role Assignment
+role: <role>
+role_spec: <project>/.claude/skills/team-interactive-craft/roles/<role>/role.md
+session: <session-folder>
+session_id: <session-id>
+team_name: interactive-craft
+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 |
+|------|----------|---------------|
+| single | Sequential | One task at a time |
+| gallery | Sequential | One task at a time |
+| page | After INTERACT-001 | Spawn BUILD-001..N in parallel (CP-3 fan-out) |
+| page | After all BUILD done | Spawn A11Y-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 |
+|------|---------------------|
+| single | All 4 tasks (+ fix tasks) completed |
+| gallery | All 6 tasks (+ fix tasks) completed |
+| page | All 3+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