claude-code-workflow 7.2.27 → 7.2.28

package/.codex/skills/team-interactive-craft/specs/pipelines.md

@@ -0,0 +1,85 @@
+# Pipeline Definitions
+
+Interactive craft pipeline modes and task registry.
+
+## Pipeline Modes
+
+| Mode | Description | Task Count |
+|------|-------------|------------|
+| single | Single component: research -> interaction design -> build -> a11y test | 4 tasks |
+| gallery | Gallery: base component + scroll container, two build phases | 6 tasks |
+| page | Full page: parallel component builds after single interaction design | 3 + N tasks |
+
+## Single Pipeline Task Registry
+
+| Task ID | Role | deps | Description |
+|---------|------|------|-------------|
+| RESEARCH-001 | researcher | [] | Interaction inventory, browser API audit, pattern reference |
+| INTERACT-001 | interaction-designer | [RESEARCH-001] | State machine, event flow, gesture spec, animation choreography |
+| BUILD-001 | builder | [INTERACT-001] | Vanilla JS + CSS component: ES module, GPU animations, touch-aware |
+| A11Y-001 | a11y-tester | [BUILD-001] | Keyboard, screen reader, reduced motion, focus, contrast audit |
+
+## Gallery Pipeline Task Registry
+
+| Task ID | Role | deps | Description |
+|---------|------|------|-------------|
+| RESEARCH-001 | researcher | [] | Interaction patterns for base component + gallery container |
+| 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 container blueprint |
+| BUILD-002 | builder | [INTERACT-002] | Gallery container + navigation implementation |
+| A11Y-001 | a11y-tester | [BUILD-002] | Full gallery accessibility audit |
+
+## Page Pipeline Task Registry
+
+| Task ID | Role | deps | Description |
+|---------|------|------|-------------|
+| RESEARCH-001 | researcher | [] | Interaction patterns for all page sections |
+| INTERACT-001 | interaction-designer | [RESEARCH-001] | Blueprints for all interactive sections |
+| BUILD-001 | builder | [INTERACT-001] | Section 1 component |
+| BUILD-002 | builder | [INTERACT-001] | Section 2 component |
+| ... | builder | [INTERACT-001] | Additional sections (parallel) |
+| BUILD-00N | builder | [INTERACT-001] | Section N component |
+| A11Y-001 | a11y-tester | [BUILD-001..N] | Full page accessibility audit |
+
+## Quality Gate (A11y Checkpoint)
+
+| Checkpoint | Task | Condition | Action |
+|------------|------|-----------|--------|
+| A11Y Gate | A11Y-001 completes | 0 critical, 0 high | Pipeline complete |
+| A11Y GC Loop | A11Y-* completes | Critical or high issues | Create BUILD-fix task, new A11Y task (max 2 rounds) |
+
+## GC Loop Behavior
+
+| Signal | Condition | Action |
+|--------|-----------|--------|
+| a11y_passed | 0 critical, 0 high | GC converged -> pipeline complete |
+| a11y_result | 0 critical, high > 0 | gc_rounds < max -> create BUILD-fix task |
+| fix_required | critical > 0 | gc_rounds < max -> create BUILD-fix task (CRITICAL) |
+| Any | gc_rounds >= max | Escalate to user: accept / try one more / terminate |
+
+## Parallel Spawn Rules
+
+| Mode | After | Spawn Behavior |
+|------|-------|----------------|
+| single | Sequential | One task at a time |
+| gallery | Sequential | One task at a time |
+| page | INTERACT-001 | Spawn BUILD-001..N in parallel |
+| page | All BUILD complete | Spawn A11Y-001 |
+
+## Collaboration Patterns
+
+| Pattern | Roles | Description |
+|---------|-------|-------------|
+| CP-1 Linear Pipeline | All | Base sequential flow for single/gallery modes |
+| CP-2 Review-Fix | builder <-> a11y-tester | GC loop with max 2 rounds |
+| CP-3 Parallel Fan-out | builder (multiple) | Page mode: multiple BUILD tasks in parallel |
+
+## Output Artifacts
+
+| Task | Output Path |
+|------|-------------|
+| RESEARCH-001 | <session>/research/*.json |
+| INTERACT-* | <session>/interaction/blueprints/*.md |
+| BUILD-* | <session>/build/components/*.js + *.css |
+| A11Y-* | <session>/a11y/a11y-audit-*.md |

package/.codex/skills/team-interactive-craft/specs/team-config.json

@@ -0,0 +1,105 @@
+{
+  "team_name": "interactive-craft",
+  "team_display_name": "Interactive Craft",
+  "description": "Interactive component team with vanilla JS + CSS. Research -> interaction design -> build -> a11y test.",
+  "version": "1.0.0",
+
+  "roles": {
+    "coordinator": {
+      "task_prefix": null,
+      "responsibility": "Scope assessment, pipeline orchestration, GC loop control between builder and a11y-tester",
+      "message_types": ["task_unblocked", "a11y_checkpoint", "fix_required", "error", "shutdown"]
+    },
+    "researcher": {
+      "task_prefix": "RESEARCH",
+      "responsibility": "Interaction pattern analysis, browser API audit, reference pattern collection",
+      "message_types": ["research_ready", "research_progress", "error"]
+    },
+    "interaction-designer": {
+      "task_prefix": "INTERACT",
+      "responsibility": "State machine design, event flow mapping, gesture specification, animation choreography",
+      "message_types": ["blueprint_ready", "blueprint_revision", "blueprint_progress", "error"]
+    },
+    "builder": {
+      "task_prefix": "BUILD",
+      "inner_loop": true,
+      "responsibility": "Vanilla JS + CSS component implementation, progressive enhancement, GPU-only animations",
+      "message_types": ["build_ready", "build_revision", "build_progress", "error"]
+    },
+    "a11y-tester": {
+      "task_prefix": "A11Y",
+      "responsibility": "Keyboard navigation, screen reader, reduced motion, focus management, contrast testing",
+      "message_types": ["a11y_passed", "a11y_result", "fix_required", "error"]
+    }
+  },
+
+  "pipelines": {
+    "single": {
+      "description": "Single component: research -> interaction design -> build -> a11y test",
+      "task_chain": ["RESEARCH-001", "INTERACT-001", "BUILD-001", "A11Y-001"],
+      "complexity": "low"
+    },
+    "gallery": {
+      "description": "Gallery with base component + scroll container: two build phases",
+      "task_chain": [
+        "RESEARCH-001",
+        "INTERACT-001", "BUILD-001",
+        "INTERACT-002", "BUILD-002",
+        "A11Y-001"
+      ],
+      "complexity": "medium"
+    },
+    "page": {
+      "description": "Full interactive page with parallel component builds",
+      "task_chain": [
+        "RESEARCH-001",
+        "INTERACT-001",
+        "BUILD-001..N (parallel)",
+        "A11Y-001"
+      ],
+      "parallel_stage": "BUILD-001..N",
+      "complexity": "high"
+    }
+  },
+
+  "innovation_patterns": {
+    "generator_critic": {
+      "generator": "builder",
+      "critic": "a11y-tester",
+      "max_rounds": 2,
+      "convergence": "a11y.critical_count === 0 && a11y.high_count === 0",
+      "escalation": "Coordinator intervenes after max rounds"
+    },
+    "shared_memory": {
+      "file": "shared-memory.json",
+      "fields": {
+        "researcher": ["interaction_inventory", "browser_apis"],
+        "interaction-designer": ["state_machines", "event_flows"],
+        "builder": ["component_registry", "implementation_decisions"],
+        "a11y-tester": ["audit_history"]
+      }
+    },
+    "dynamic_pipeline": {
+      "criteria": {
+        "single": "scope.component_count <= 1",
+        "gallery": "scope.has_gallery || scope.has_scroll_collection",
+        "page": "scope.is_full_page || scope.section_count > 2"
+      }
+    },
+    "parallel_fanout": {
+      "pattern": "CP-3",
+      "description": "Multiple BUILD tasks spawned in parallel after single INTERACT blueprint",
+      "trigger": "page mode after INTERACT-001 completes",
+      "fallback": "If parallel fails, coordinator falls back to sequential execution"
+    }
+  },
+
+  "session_dirs": {
+    "base": ".workflow/.team/IC-{slug}-{YYYY-MM-DD}/",
+    "research": "research/",
+    "interaction": "interaction/blueprints/",
+    "build": "build/components/",
+    "a11y": "a11y/",
+    "messages": ".workflow/.team-msg/{team-name}/"
+  }
+}

package/.codex/skills/team-interactive-craft/specs/vanilla-constraints.md

@@ -0,0 +1,83 @@
+# Vanilla Constraints
+
+Zero-dependency rules for all interactive components built by this team. These constraints are non-negotiable and apply to every BUILD task output.
+
+## Dependency Rules
+
+| Rule | Requirement |
+|------|-------------|
+| No npm packages | Zero `import` from node_modules or CDN URLs |
+| No build tools required | Components run directly via `<script type="module">` |
+| No framework dependency | No React, Vue, Svelte, Angular, jQuery, etc. |
+| No CSS preprocessor | No Sass, Less, PostCSS, Tailwind -- pure CSS only |
+| No bundler required | No webpack, Vite, Rollup, esbuild in critical path |
+
+## JavaScript Rules
+
+| Rule | Requirement |
+|------|-------------|
+| ES modules only | `export class`, `export function`, `import` syntax |
+| Class-based components | Private fields (#), constructor(element, options) |
+| No inline styles from JS | Set CSS custom properties or toggle CSS classes |
+| No document.write | Use DOM APIs (createElement, append, etc.) |
+| No eval or innerHTML | Use textContent or DOM construction |
+| requestAnimationFrame | All animation loops use rAF, not setInterval |
+| Pointer Events primary | Use pointer events; touch events as fallback only |
+| Cleanup required | destroy() method disconnects all observers/listeners |
+| Auto-init pattern | `document.querySelectorAll('[data-component]')` on load |
+
+## CSS Rules
+
+| Rule | Requirement |
+|------|-------------|
+| Custom properties | All configurable values as CSS custom properties |
+| No inline styles | JS sets `--custom-prop` values, not style.left/top |
+| State via data attributes | `[data-state="active"]`, not inline style changes |
+| GPU-only animations | `transform` and `opacity` ONLY in transitions/animations |
+| No layout animations | Never animate `width`, `height`, `top`, `left`, `margin`, `padding` |
+| will-change on animated | Hint browser for animated elements |
+| Reduced motion | `@media (prefers-reduced-motion: reduce)` with instant fallback |
+| focus-visible | `:focus-visible` for keyboard-only focus indicators |
+| Responsive | Min touch target 44x44px on mobile, use @media breakpoints |
+
+## Progressive Enhancement
+
+| Rule | Requirement |
+|------|-------------|
+| Content without JS | Base content visible and readable without JavaScript |
+| CSS-only fallback | Essential layout works with CSS alone |
+| No-JS class | Optional `[data-js-enabled]` class for JS-enhanced styles |
+| Semantic HTML base | Use appropriate elements (button, a, nav, dialog) |
+
+## Performance Budget
+
+| Metric | Budget |
+|--------|--------|
+| Frame time | < 5ms per frame (leaves room for browser work in 16ms budget) |
+| Interaction response | < 50ms from input to visual feedback |
+| Animation jank | 0 frames dropped at 60fps for GPU-composited animations |
+| Observer callbacks | < 1ms per IntersectionObserver/ResizeObserver callback |
+| Component init | < 100ms from constructor to interactive |
+| Memory | No detached DOM nodes after destroy() |
+| Listeners | All removed in destroy(), no orphaned listeners |
+
+## Forbidden Patterns
+
+| Pattern | Why |
+|---------|-----|
+| `element.style.left = ...` | Forces layout recalc, not GPU composited |
+| `element.offsetWidth` in animation loop | Forces synchronous layout (reflow) |
+| `setInterval` for animation | Not synced to display refresh rate |
+| `setTimeout` for animation | Not synced to display refresh rate |
+| `innerHTML = userContent` | XSS vector |
+| Passive: false on scroll/touch without need | Blocks scrolling performance |
+| `!important` in component CSS | Breaks cascade, unmaintainable |
+| Global CSS selectors (tag-only) | Leaks styles outside component scope |
+
+## File Output Convention
+
+| File | Purpose | Location |
+|------|---------|----------|
+| `{name}.js` | ES module component class | `<session>/build/components/` |
+| `{name}.css` | Component styles with custom properties | `<session>/build/components/` |
+| `demo.html` | Optional: standalone demo page | `<session>/build/components/` |

package/.codex/skills/team-motion-design/SKILL.md

@@ -0,0 +1,222 @@
+---
+name: team-motion-design
+description: Unified team skill for motion design. Animation token systems, scroll choreography, GPU-accelerated transforms, reduced-motion fallback. Uses team-worker agent architecture. Triggers on "team motion design", "animation system".
+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__ccw-tools__read_file(*), mcp__ccw-tools__write_file(*), mcp__ccw-tools__edit_file(*), mcp__ccw-tools__team_msg(*), mcp__chrome-devtools__evaluate_script(*), mcp__chrome-devtools__take_screenshot(*), mcp__chrome-devtools__performance_start_trace(*), mcp__chrome-devtools__performance_stop_trace(*), mcp__chrome-devtools__performance_analyze_insight(*)
+---
+
+# Team Motion Design
+
+Systematic motion design pipeline: research -> choreography -> animation -> performance testing. 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-motion-design", 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]
+      motion-researcher  choreographer  animator  motion-tester
+```
+
+## Role Registry
+
+| Role | Path | Prefix | Inner Loop |
+|------|------|--------|------------|
+| coordinator | [roles/coordinator/role.md](roles/coordinator/role.md) | -- | -- |
+| motion-researcher | [roles/motion-researcher/role.md](roles/motion-researcher/role.md) | MRESEARCH-* | false |
+| choreographer | [roles/choreographer/role.md](roles/choreographer/role.md) | CHOREO-* | false |
+| animator | [roles/animator/role.md](roles/animator/role.md) | ANIM-* | true |
+| motion-tester | [roles/motion-tester/role.md](roles/motion-tester/role.md) | MTEST-* | 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**: `MD`
+- **Session path**: `.workflow/.team/MD-<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
+
+Motion design is a performance-critical pipeline where research informs choreography decisions and animations must pass strict GPU performance gates. Researcher needs thorough profiling, animator needs creative implementation with inner loop capability.
+
+| Role | reasoning_effort | Rationale |
+|------|-------------------|-----------|
+| motion-researcher | high | Deep performance profiling and animation audit across codebase |
+| choreographer | high | Creative token system design and scroll choreography sequencing |
+| animator | high | Complex CSS/JS animation implementation with compositor constraints |
+| motion-tester | medium | Performance validation follows defined test criteria and scoring |
+
+### Research-to-Choreography Context Flow
+
+Researcher findings must reach choreographer via coordinator's upstream context:
+```
+// After MRESEARCH-001 completes, coordinator sends findings to choreographer
+spawn_agent({
+  agent_type: "team_worker",
+  task_name: "CHOREO-001",
+  fork_context: false,
+  items: [
+    ...,
+    { type: "text", text: `## Upstream Context
+Research findings: <session>/research/animation-inventory.json
+Performance baseline: <session>/research/performance-baseline.json
+Easing catalog: <session>/research/easing-catalog.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/motion-tokens.md](specs/motion-tokens.md) -- Animation token schema
+- [specs/gpu-constraints.md](specs/gpu-constraints.md) -- Compositor-only animation rules
+- [specs/reduced-motion.md](specs/reduced-motion.md) -- Accessibility motion preferences
+
+## Session Directory
+
+```
+.workflow/.team/MD-<slug>-<date>/
++-- .msg/
+|   +-- messages.jsonl         # Team message bus
+|   +-- meta.json              # Pipeline config + GC state
++-- research/                  # Motion researcher output
+|   +-- perf-traces/           # Chrome DevTools performance traces
+|   +-- animation-inventory.json
+|   +-- performance-baseline.json
+|   +-- easing-catalog.json
++-- choreography/              # Choreographer output
+|   +-- motion-tokens.json
+|   +-- sequences/             # Scroll choreography sequences
++-- animations/                # Animator output
+|   +-- keyframes/             # CSS @keyframes files
+|   +-- orchestrators/         # JS animation orchestrators
++-- testing/                   # Motion tester output
+|   +-- traces/                # Performance trace data
+|   +-- reports/               # Performance reports
++-- 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 choreographer |
+| Assign implementation from reviewed specs | `assign_task` | Assign ANIM task after choreography passes |
+| 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: "CHOREO-001", items: [...] })` -- send additional research findings to choreographer
+- `assign_task({ target: "ANIM-001", items: [...] })` -- assign animation from reviewed choreography specs
+- `close_agent({ target: "MTEST-001" })` -- cleanup after performance test
+
+## 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 |