claude-code-workflow 7.2.27 → 7.2.28

package/.codex/skills/team-interactive-craft/SKILL.md

@@ -0,0 +1,220 @@
+---
+name: team-interactive-craft
+description: Unified team skill for interactive component crafting. Vanilla JS + CSS interactive components with zero dependencies. Research -> interaction design -> build -> a11y test. Uses team-worker agent architecture with roles/ for domain logic. Coordinator orchestrates pipeline with GC loops and sync points. Triggers on "team interactive craft", "interactive component".
+allowed-tools: spawn_agent(*), wait_agent(*), send_message(*), assign_task(*), close_agent(*), list_agents(*), report_agent_job_result(*), request_user_input(*), Read(*), Write(*), Edit(*), Bash(*), Glob(*), Grep(*), mcp__ace-tool__search_context(*), mcp__ccw-tools__read_file(*), mcp__ccw-tools__write_file(*), mcp__ccw-tools__edit_file(*), mcp__ccw-tools__team_msg(*)
+---
+
+# Team Interactive Craft
+
+Systematic interactive component pipeline: research -> interaction design -> build -> a11y test. Built on **team-worker agent architecture** -- all worker roles share a single agent definition with role-specific Phase 2-4 loaded from `roles/<role>/role.md`.
+
+## Architecture
+
+```
+Skill(skill="team-interactive-craft", args="task description")
+                    |
+         SKILL.md (this file) = Router
+                    |
+     +--------------+--------------+
+     |                             |
+  no --role flag              --role <name>
+     |                             |
+  Coordinator                  Worker
+  roles/coordinator/role.md    roles/<name>/role.md
+     |
+     +-- analyze -> dispatch -> spawn workers -> STOP
+                                    |
+                    +-------+-------+-------+-------+
+                    v       v       v       v
+           [team-worker agents, each loads roles/<role>/role.md]
+        researcher  interaction-designer  builder  a11y-tester
+```
+
+## Role Registry
+
+| Role | Path | Prefix | Inner Loop |
+|------|------|--------|------------|
+| coordinator | [roles/coordinator/role.md](roles/coordinator/role.md) | -- | -- |
+| researcher | [roles/researcher/role.md](roles/researcher/role.md) | RESEARCH-* | false |
+| interaction-designer | [roles/interaction-designer/role.md](roles/interaction-designer/role.md) | INTERACT-* | false |
+| builder | [roles/builder/role.md](roles/builder/role.md) | BUILD-* | true |
+| a11y-tester | [roles/a11y-tester/role.md](roles/a11y-tester/role.md) | A11Y-* | false |
+
+## Role Router
+
+Parse `$ARGUMENTS`:
+- Has `--role <name>` -> Read `roles/<name>/role.md`, execute Phase 2-4
+- No `--role` -> `roles/coordinator/role.md`, execute entry router
+
+## Delegation Lock
+
+**Coordinator is a PURE ORCHESTRATOR. It coordinates, it does NOT do.**
+
+Before calling ANY tool, apply this check:
+
+| Tool Call | Verdict | Reason |
+|-----------|---------|--------|
+| `spawn_agent`, `wait_agent`, `close_agent`, `send_message`, `assign_task` | ALLOWED | Orchestration |
+| `list_agents` | ALLOWED | Agent health check |
+| `request_user_input` | ALLOWED | User interaction |
+| `mcp__ccw-tools__team_msg` | ALLOWED | Message bus |
+| `Read/Write` on `.workflow/.team/` files | ALLOWED | Session state |
+| `Read` on `roles/`, `commands/`, `specs/` | ALLOWED | Loading own instructions |
+| `Read/Grep/Glob` on project source code | BLOCKED | Delegate to worker |
+| `Edit` on any file outside `.workflow/` | BLOCKED | Delegate to worker |
+| `Bash("ccw cli ...")` | BLOCKED | Only workers call CLI |
+| `Bash` running build/test/lint commands | BLOCKED | Delegate to worker |
+
+**If a tool call is BLOCKED**: STOP. Create a task, spawn a worker.
+
+**No exceptions for "simple" tasks.** Even a single-file read-and-report MUST go through spawn_agent.
+
+---
+
+## Shared Constants
+
+- **Session prefix**: `IC`
+- **Session path**: `.workflow/.team/IC-<slug>-<date>/`
+- **CLI tools**: `ccw cli --mode analysis` (read-only), `ccw cli --mode write` (modifications)
+- **Message bus**: `mcp__ccw-tools__team_msg(session_id=<session-id>, ...)`
+- **Max GC rounds**: 2
+
+## Worker Spawn Template
+
+Coordinator spawns workers using this template:
+
+```
+spawn_agent({
+  agent_type: "team_worker",
+  task_name: "<task-id>",
+  fork_context: false,
+  items: [
+    { type: "text", text: `## Role Assignment
+role: <role>
+role_spec: <skill_root>/roles/<role>/role.md
+session: <session-folder>
+session_id: <session-id>
+requirement: <task-description>
+inner_loop: <true|false>
+
+Read role_spec file (<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.` },
+
+    { type: "text", text: `## Task Context
+task_id: <task-id>
+title: <task-title>
+description: <task-description>
+pipeline_phase: <pipeline-phase>` },
+
+    { type: "text", text: `## Upstream Context
+<prev_context>` }
+  ]
+})
+```
+
+After spawning, use `wait_agent({ targets: [...], timeout_ms: 900000 })` to collect results, then `close_agent({ target })` each worker.
+
+
+### Model Selection Guide
+
+Interactive craft is a technical pipeline where research informs interaction design, which guides implementation. Builder needs creative problem-solving for vanilla JS constraints, a11y-tester needs thorough analysis.
+
+| Role | reasoning_effort | Rationale |
+|------|-------------------|-----------|
+| researcher | high | Deep analysis of existing interactive patterns and browser APIs |
+| interaction-designer | high | Creative state machine and event flow design |
+| builder | high | Complex vanilla JS implementation with GPU animation and touch handling |
+| a11y-tester | high | Thorough accessibility audit must catch all keyboard/screen reader issues |
+
+### Research-to-Design Context Flow
+
+Researcher findings must reach interaction-designer via coordinator's upstream context:
+```
+// After RESEARCH-001 completes, coordinator sends findings to interaction-designer
+spawn_agent({
+  agent_type: "team_worker",
+  task_name: "INTERACT-001",
+  fork_context: false,
+  items: [
+    ...,
+    { type: "text", text: `## Upstream Context
+Research findings: <session>/research/interaction-inventory.json
+Browser API audit: <session>/research/browser-api-audit.json
+Pattern reference: <session>/research/pattern-reference.json` }
+  ]
+})
+```
+
+## User Commands
+
+| Command | Action |
+|---------|--------|
+| `check` / `status` | View execution status graph |
+| `resume` / `continue` | Advance to next step |
+
+## Specs Reference
+
+- [specs/pipelines.md](specs/pipelines.md) -- Pipeline definitions and task registry
+- [specs/interaction-patterns.md](specs/interaction-patterns.md) -- Interaction pattern catalog
+- [specs/vanilla-constraints.md](specs/vanilla-constraints.md) -- Zero-dependency rules
+
+## Session Directory
+
+```
+.workflow/.team/IC-<slug>-<date>/
++-- .msg/
+|   +-- messages.jsonl         # Team message bus
+|   +-- meta.json              # Pipeline config + GC state
++-- research/                  # Researcher output
+|   +-- interaction-inventory.json
+|   +-- browser-api-audit.json
+|   +-- pattern-reference.json
++-- interaction/               # Interaction designer output
+|   +-- blueprints/
+|       +-- {component-name}.md
++-- build/                     # Builder output
+|   +-- components/
+|       +-- {name}.js
+|       +-- {name}.css
++-- a11y/                      # A11y tester output
+|   +-- a11y-audit-{NNN}.md
++-- wisdom/                    # Cross-task knowledge
+```
+
+## v4 Agent Coordination
+
+### Message Semantics
+
+| Intent | API | Example |
+|--------|-----|---------|
+| Queue supplementary info (don't interrupt) | `send_message` | Send research findings to running interaction-designer |
+| Assign build from reviewed blueprints | `assign_task` | Assign BUILD task after blueprint review |
+| Check running agents | `list_agents` | Verify agent health during resume |
+
+### Agent Health Check
+
+Use `list_agents({})` in handleResume and handleComplete:
+
+```
+// Reconcile session state with actual running agents
+const running = list_agents({})
+// Compare with tasks.json active_agents
+// Reset orphaned tasks (in_progress but agent gone) to pending
+```
+
+### Named Agent Targeting
+
+Workers are spawned with `task_name: "<task-id>"` enabling direct addressing:
+- `send_message({ target: "INTERACT-001", items: [...] })` -- send research findings to interaction-designer
+- `assign_task({ target: "BUILD-001", items: [...] })` -- assign implementation from interaction blueprint
+- `close_agent({ target: "A11Y-001" })` -- cleanup after a11y audit
+
+## Error Handling
+
+| Scenario | Resolution |
+|----------|------------|
+| Unknown command | Error with available command list |
+| Role not found | Error with role registry |
+| Session corruption | Attempt recovery, fallback to manual |
+| Fast-advance conflict | Coordinator reconciles on next callback |
+| Completion action fails | Default to Keep Active |
+| GC loop stuck > 2 rounds | Escalate to user: accept / retry / terminate |

package/.codex/skills/team-interactive-craft/roles/a11y-tester/role.md

@@ -0,0 +1,159 @@
+---
+role: a11y-tester
+prefix: A11Y
+inner_loop: false
+message_types: [state_update]
+---
+
+# Accessibility Tester
+
+Test interactive components for keyboard navigation, screen reader compatibility, reduced motion fallback, focus management, and color contrast. Act as Critic in the builder<->a11y-tester Generator-Critic loop. Serve as quality gate before pipeline completion.
+
+## Phase 2: Context & Artifact Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Built components | <session>/build/components/*.js, *.css | Yes |
+| Interaction blueprints | <session>/interaction/blueprints/*.md | Yes |
+| Research artifacts | <session>/research/browser-api-audit.json | No |
+| Previous audits | <session>/a11y/a11y-audit-*.md | Only for GC re-audit |
+| .msg/meta.json | <session>/wisdom/.msg/meta.json | Yes |
+
+1. Extract session path from task description
+2. Read all built component files (JS + CSS)
+3. Read interaction blueprints for expected behavior reference
+4. If GC re-audit: read previous audit to track improvement/regression
+5. Load audit history from meta.json for trend analysis
+
+## Phase 3: Audit Execution
+
+Test 5 accessibility dimensions. For each, evaluate every built component:
+
+### Dimension 1: Keyboard Navigation (Weight: 25%)
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| Tab order | Scan tabindex values, focusable elements | Logical tab order, no tabindex > 0 |
+| Arrow key navigation | Check onKeyDown for ArrowLeft/Right/Up/Down | All navigable items reachable via arrows |
+| Enter/Space activation | Check onKeyDown for Enter, Space | All interactive elements activatable |
+| Escape dismissal | Check onKeyDown for Escape | Overlays/modals dismiss on Escape |
+| Focus trap (overlays) | Check focus cycling logic | Tab stays within overlay when open |
+| No keyboard trap | Verify all states have keyboard exit | Can always Tab/Escape out of component |
+
+Score: count(pass) / count(total_checks) * 10
+
+### Dimension 2: Screen Reader Compatibility (Weight: 25%)
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| ARIA role | Scan for role attribute | Appropriate role set (slider, dialog, tablist, etc.) |
+| ARIA label | Scan for aria-label, aria-labelledby | All interactive elements have accessible name |
+| ARIA states | Scan for aria-expanded, aria-selected, aria-hidden | Dynamic states update with interaction |
+| Live regions | Scan for aria-live, aria-atomic | State changes announced (polite/assertive as needed) |
+| Semantic HTML | Check element types | Uses button/a/input where appropriate, not div-only |
+| Alt text | Check img/svg elements | Decorative: aria-hidden; informative: alt/aria-label |
+
+Score: count(pass) / count(total_checks) * 10
+
+### Dimension 3: Reduced Motion (Weight: 20%)
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| Media query present | Search CSS for prefers-reduced-motion | @media (prefers-reduced-motion: reduce) exists |
+| Transitions disabled | Check reduced-motion block | transition-duration near 0 or removed |
+| Animations disabled | Check reduced-motion block | animation-duration near 0 or removed |
+| Content still accessible | Verify no content depends on animation | Information conveyed without motion |
+| JS respects preference | Check matchMedia usage | JS checks prefers-reduced-motion before animating |
+
+Score: count(pass) / count(total_checks) * 10
+
+### Dimension 4: Focus Management (Weight: 20%)
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| Visible focus indicator | Search CSS for :focus-visible | Visible outline/ring on keyboard focus |
+| Focus contrast | Check outline color against background | >= 3:1 contrast ratio |
+| Focus on open | Check overlay/modal open logic | Focus moves to first interactive element |
+| Focus on close | Check overlay/modal close logic | Focus returns to trigger element |
+| No focus loss | Check state transitions | Focus never moves to non-interactive element |
+| Skip link (page mode) | Check for skip navigation | Present if multiple interactive sections |
+
+Score: count(pass) / count(total_checks) * 10
+
+### Dimension 5: Color Contrast (Weight: 10%)
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| Text contrast | Evaluate CSS color vs background | >= 4.5:1 for normal text, >= 3:1 for large text |
+| UI component contrast | Evaluate interactive element borders/fills | >= 3:1 against adjacent colors |
+| Focus indicator contrast | Evaluate outline color | >= 3:1 against background |
+| State indication | Check non-color state indicators | State not conveyed by color alone |
+
+Score: count(pass) / count(total_checks) * 10
+
+### Overall Score Calculation
+
+`overallScore = round(keyboard*0.25 + screenReader*0.25 + reducedMotion*0.20 + focus*0.20 + contrast*0.10)`
+
+### Issue Classification
+
+| Severity | Definition | Examples |
+|----------|-----------|----------|
+| Critical | Component unusable for assistive tech users | No keyboard access, no ARIA role, focus trap |
+| High | Significant barrier, workaround exists | Missing aria-label, no reduced motion, poor focus |
+| Medium | Minor inconvenience | Suboptimal tab order, missing live region |
+| Low | Enhancement opportunity | Could improve contrast, better semantic HTML |
+
+### Signal Determination
+
+| Condition | Signal |
+|-----------|--------|
+| 0 critical AND 0 high issues | `a11y_passed` (GC CONVERGED) |
+| 0 critical AND high_count > 0 | `a11y_result` (GC REVISION NEEDED) |
+| critical_count > 0 | `fix_required` (CRITICAL FIX NEEDED) |
+
+## Phase 4: Report & Output
+
+1. Write audit report to `<session>/a11y/a11y-audit-{NNN}.md`:
+
+```markdown
+# A11y Audit Report - {NNN}
+
+## Summary
+- **Overall Score**: X/10
+- **Signal**: a11y_passed | a11y_result | fix_required
+- **Critical**: N | **High**: N | **Medium**: N | **Low**: N
+
+## Dimension Scores
+
+| Dimension | Score | Weight | Weighted |
+|-----------|-------|--------|----------|
+| Keyboard Navigation | X/10 | 25% | X.XX |
+| Screen Reader | X/10 | 25% | X.XX |
+| Reduced Motion | X/10 | 20% | X.XX |
+| Focus Management | X/10 | 20% | X.XX |
+| Color Contrast | X/10 | 10% | X.XX |
+
+## Issues
+
+### Critical
+- [C-001] {description} | File: {file}:{line} | Fix: {remediation}
+
+### High
+- [H-001] {description} | File: {file}:{line} | Fix: {remediation}
+
+### Medium
+- [M-001] {description} | File: {file}:{line} | Fix: {remediation}
+
+## GC Loop Status
+- **Signal**: {signal}
+- **Action Required**: {none | builder fix | escalate}
+
+## Trend (if previous audit exists)
+- Previous score: X/10 -> Current: X/10 ({improving|stable|declining})
+- Resolved issues: [list]
+- New issues: [list]
+```
+
+2. Update `<session>/wisdom/.msg/meta.json` under `a11y-tester` namespace:
+   - Read existing -> merge `{ "a11y-tester": { audit_id, score, critical_count, high_count, signal, timestamp } }` -> write back

package/.codex/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/.codex/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" }
+}
+```