claude-code-workflow 7.2.26 → 7.2.28

package/.claude/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/.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.