claude-code-workflow 7.2.27 → 7.2.29

package/.codex/skills/team-motion-design/specs/reduced-motion.md

@@ -0,0 +1,129 @@
+# Reduced Motion Accessibility
+
+Implementation guidelines for `prefers-reduced-motion` compliance.
+
+## Strategy
+
+Wrap all motion in `@media` query, provide instant fallback. Users who prefer reduced motion should still perceive state changes but without disorienting movement.
+
+## CSS Implementation
+
+### Global Override
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### Per-Component Override (Preferred)
+
+```css
+.card-enter {
+  animation: fade-up var(--duration-slow) var(--ease-out) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-enter {
+    animation: fade-in 0.01ms linear both; /* opacity only, instant */
+  }
+}
+```
+
+### Parallax Disable
+
+```css
+.parallax-element {
+  transform: translateY(calc(var(--scroll-y) * 0.5));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .parallax-element {
+    transform: none !important;
+  }
+}
+```
+
+## JavaScript Detection
+
+```javascript
+// Check preference
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+// Use in animation logic
+if (prefersReducedMotion.matches) {
+  // Skip parallax
+  // Disable spring/bounce animations
+  // Use instant transitions
+  // Skip scroll-linked transforms
+}
+
+// Listen for changes (user toggles setting)
+prefersReducedMotion.addEventListener('change', (event) => {
+  if (event.matches) {
+    disableMotion();
+  } else {
+    enableMotion();
+  }
+});
+```
+
+## Allowed in Reduced Motion
+
+These subtle effects are acceptable and help maintain usability:
+
+| Effect | Duration | Notes |
+|--------|----------|-------|
+| Opacity fades | < 0.15s | Short, non-directional |
+| Color transitions | < 0.15s | Subtle state indicator |
+| Essential state indicators | Instant | Focus rings, selection highlights |
+| Progress indicators | N/A | Spinner -> static progress bar |
+
+## Disallowed in Reduced Motion
+
+These effects must be completely disabled:
+
+| Effect | Reason | Fallback |
+|--------|--------|----------|
+| Parallax scrolling | Vestibular triggers | Static positioning |
+| Scroll-linked transforms | Continuous motion | No transform |
+| Bouncing/spring animations | Overshoot causes discomfort | Instant state change |
+| Auto-playing content | Unexpected motion | Pause by default |
+| Infinite loop animations | Continuous distraction | Single iteration or static |
+| Large-scale movements | Disorienting | Opacity fade only |
+| Zoom/scale animations | Vestibular triggers | Opacity fade |
+| Rotating animations | Vestibular triggers | Static or opacity |
+
+## Testing Checklist
+
+| Check | Method | Expected |
+|-------|--------|----------|
+| `@media` query present | Grep CSS for `prefers-reduced-motion` | At least one global override |
+| Duration override | Check `animation-duration` and `transition-duration` | Set to `0.01ms` |
+| Scroll behavior | Check `scroll-behavior` | Set to `auto` |
+| JS detection | Grep JS for `matchMedia.*reduced-motion` | Present with listener |
+| Parallax disabled | Check parallax elements in reduced motion | `transform: none` |
+| No infinite loops | Check `animation-iteration-count` | Set to `1` |
+| No auto-play | Check auto-playing animations | Paused or removed |
+
+## Implementation Order
+
+1. Add global CSS override first (catches everything)
+2. Add per-component overrides for nuanced fallbacks
+3. Add JS detection for runtime animation control
+4. Test with browser setting toggled ON
+5. Verify no motion remains except allowed effects
+
+## Browser Support
+
+- `prefers-reduced-motion: reduce` -- supported in all modern browsers
+- Safari 10.1+, Chrome 74+, Firefox 63+, Edge 79+
+- iOS Safari 10.3+ (respects system Accessibility settings)
+- Android Chrome 74+ (respects system Accessibility settings)

package/.codex/skills/team-motion-design/specs/team-config.json

@@ -0,0 +1,99 @@
+{
+  "team_name": "motion-design",
+  "team_display_name": "Motion Design",
+  "description": "Motion design team for animation token systems, scroll choreography, GPU-accelerated transforms, reduced-motion fallback",
+  "version": "1.0.0",
+
+  "roles": {
+    "coordinator": {
+      "task_prefix": null,
+      "responsibility": "Scope assessment, pipeline orchestration, performance gate management, GC loop control",
+      "message_types": ["task_unblocked", "perf_checkpoint", "fix_required", "error", "shutdown"]
+    },
+    "motion-researcher": {
+      "task_prefix": "MRESEARCH",
+      "responsibility": "Audit existing animations, measure paint/composite costs, catalog easing patterns",
+      "message_types": ["research_ready", "research_progress", "error"]
+    },
+    "choreographer": {
+      "task_prefix": "CHOREO",
+      "responsibility": "Design animation token system, scroll-triggered reveal sequences, transition state diagrams",
+      "message_types": ["choreography_ready", "choreography_progress", "error"]
+    },
+    "animator": {
+      "task_prefix": "ANIM",
+      "inner_loop": true,
+      "responsibility": "Implement CSS animations/transitions, JS orchestration, IntersectionObserver triggers, rAF coordination",
+      "message_types": ["animation_ready", "animation_revision", "animation_progress", "error"]
+    },
+    "motion-tester": {
+      "task_prefix": "MTEST",
+      "responsibility": "Chrome DevTools perf traces, compositor-only verification, FPS measurement, layout thrashing detection, reduced-motion validation",
+      "message_types": ["perf_passed", "perf_warning", "fix_required", "error"]
+    }
+  },
+
+  "pipelines": {
+    "tokens": {
+      "description": "Animation token system: research -> choreography -> animation -> test",
+      "task_chain": ["MRESEARCH-001", "CHOREO-001", "ANIM-001", "MTEST-001"],
+      "complexity": "low"
+    },
+    "component": {
+      "description": "Component animation: research -> choreography -> animation -> test (GC loop)",
+      "task_chain": ["MRESEARCH-001", "CHOREO-001", "ANIM-001", "MTEST-001"],
+      "gc_loop": { "generator": "ANIM", "critic": "MTEST", "trigger": "FPS < 60 or layout thrashing" },
+      "complexity": "medium"
+    },
+    "page": {
+      "description": "Page scroll choreography: research -> choreography -> parallel animations -> test",
+      "task_chain": [
+        "MRESEARCH-001", "CHOREO-001",
+        "ANIM-001..N:parallel",
+        "MTEST-001"
+      ],
+      "parallel_fan_out": { "after": "CHOREO-001", "tasks": "ANIM-*", "join_before": "MTEST-001" },
+      "complexity": "high"
+    }
+  },
+
+  "innovation_patterns": {
+    "generator_critic": {
+      "generator": "animator",
+      "critic": "motion-tester",
+      "max_rounds": 2,
+      "convergence": "perf.score >= 8 && perf.fps >= 60 && perf.thrashing_count === 0",
+      "trigger": "FPS < 60 or layout thrashing detected",
+      "escalation": "Coordinator intervenes after max rounds"
+    },
+    "shared_memory": {
+      "file": "shared-memory.json",
+      "fields": {
+        "motion-researcher": ["animation_inventory", "performance_baseline", "easing_catalog"],
+        "choreographer": ["motion_tokens", "scroll_sequences", "state_diagrams"],
+        "animator": ["keyframe_registry", "orchestrator_registry"],
+        "motion-tester": ["perf_history", "issue_registry"]
+      }
+    },
+    "parallel_fan_out": {
+      "pattern": "CP-3",
+      "description": "Multiple ANIM tasks execute in parallel for page mode, joined before MTEST",
+      "trigger": "page pipeline after CHOREO-001 completion"
+    },
+    "review_fix": {
+      "pattern": "CP-2",
+      "description": "Animator and motion-tester in Generator-Critic loop",
+      "max_rounds": 2,
+      "trigger": "FPS < 60 or layout thrashing detected"
+    }
+  },
+
+  "session_dirs": {
+    "base": ".workflow/.team/MD-{slug}-{YYYY-MM-DD}/",
+    "research": "research/",
+    "choreography": "choreography/",
+    "animations": "animations/",
+    "testing": "testing/",
+    "messages": ".workflow/.team-msg/{team-name}/"
+  }
+}

package/.codex/skills/team-ui-polish/SKILL.md

@@ -0,0 +1,218 @@
+---
+name: team-ui-polish
+description: Unified team skill for UI polish. Auto-discover and fix UI design issues using Impeccable design standards. Anti-AI-slop detection, color/typography/spacing quality, motion, interaction states, visual hierarchy. Uses team-worker agent architecture. Triggers on "team ui polish", "ui polish", "design polish".
+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__navigate_page(*), mcp__chrome-devtools__resize_page(*)
+---
+
+# Team UI Polish
+
+Automatic UI quality improvement pipeline: scan -> diagnose -> optimize -> verify. 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-ui-polish", 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]
+          scanner  diagnostician  optimizer <-> verifier (GC loop)
+```
+
+## Role Registry
+
+| Role | Path | Prefix | Inner Loop |
+|------|------|--------|------------|
+| coordinator | [roles/coordinator/role.md](roles/coordinator/role.md) | -- | -- |
+| scanner | [roles/scanner/role.md](roles/scanner/role.md) | SCAN-* | false |
+| diagnostician | [roles/diagnostician/role.md](roles/diagnostician/role.md) | DIAG-* | false |
+| optimizer | [roles/optimizer/role.md](roles/optimizer/role.md) | OPT-* | true |
+| verifier | [roles/verifier/role.md](roles/verifier/role.md) | VERIFY-* | 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**: `UIP`
+- **Session path**: `.workflow/.team/UIP-<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
+
+UI polish is a sequential pipeline where scan findings drive all downstream work. Scanner and verifier need thorough analysis, optimizer needs creative problem-solving.
+
+| Role | reasoning_effort | Rationale |
+|------|-------------------|-----------|
+| scanner | high | Deep 8-dimension audit must catch every issue |
+| diagnostician | high | Root cause analysis requires careful classification |
+| optimizer | high | Creative fix application following design standards |
+| verifier | high | Regression detection must be thorough |
+
+### Scan-to-Diagnosis Context Flow
+
+Scanner findings must reach diagnostician via coordinator's upstream context:
+```
+// After SCAN-001 completes, coordinator sends findings to diagnostician
+spawn_agent({
+  agent_type: "team_worker",
+  task_name: "DIAG-001",
+  fork_context: false,
+  items: [
+    ...,
+    { type: "text", text: `## Upstream Context
+Scan report: <session>/scan/scan-report.md` }
+  ]
+})
+```
+
+## 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/team-config.json](specs/team-config.json) -- Team configuration
+- [specs/anti-patterns.md](specs/anti-patterns.md) -- AI slop and design anti-pattern catalog
+- [specs/design-standards.md](specs/design-standards.md) -- Impeccable positive design standards
+- [specs/fix-strategies.md](specs/fix-strategies.md) -- Issue-to-fix mapping
+- [specs/scoring-guide.md](specs/scoring-guide.md) -- Scoring rubric
+
+## Session Directory
+
+```
+.workflow/.team/UIP-<slug>-<date>/
++-- .msg/
+|   +-- messages.jsonl         # Team message bus
+|   +-- meta.json              # Pipeline config + GC state
++-- scan/                      # Scanner output
+|   +-- scan-report.md
++-- diagnosis/                 # Diagnostician output
+|   +-- diagnosis-report.md
++-- optimization/              # Optimizer output
+|   +-- fix-log.md
++-- verification/              # Verifier output
+|   +-- verify-report.md
++-- evidence/                  # Screenshots (before/after)
+|   +-- *.png
++-- wisdom/                    # Cross-task knowledge
+```
+
+## v4 Agent Coordination
+
+### Message Semantics
+
+| Intent | API | Example |
+|--------|-----|---------|
+| Queue supplementary info (don't interrupt) | `send_message` | Send scan findings to running diagnostician |
+| Assign fix from verification feedback | `assign_task` | Assign OPT-fix task after verify fails |
+| 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 tasks
+// 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: "DIAG-001", items: [...] })` -- send additional scan findings to diagnostician
+- `assign_task({ target: "OPT-001", items: [...] })` -- assign optimization from diagnosis report
+- `close_agent({ target: "VERIFY-001" })` -- cleanup after verification
+
+## 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-ui-polish/roles/coordinator/commands/analyze.md

@@ -0,0 +1,77 @@
+# Analyze Task
+
+Parse user task -> detect polish scope -> determine pipeline mode -> estimate complexity.
+
+**CONSTRAINT**: Text-level analysis only. NO source code reading, NO codebase exploration.
+
+## Signal Detection
+
+| Keywords | Dimension | Priority |
+|----------|-----------|----------|
+| AI slop, generic, templated, looks like AI | Anti-Patterns | P0 |
+| color, palette, contrast, OKLCH, dark mode, theme | Color Quality | P1 |
+| font, typography, heading, text size, type scale | Typography | P1 |
+| spacing, padding, margin, rhythm, gap, grid | Spacing/Layout | P1 |
+| animation, transition, motion, easing, animate | Motion | P2 |
+| hover, focus, active, disabled, states, interaction | Interaction States | P2 |
+| hierarchy, visual weight, composition, squint | Visual Hierarchy | P2 |
+| responsive, mobile, breakpoint, viewport | Responsive | P2 |
+
+## Scope Determination
+
+| Signal | Pipeline Mode |
+|--------|---------------|
+| "scan", "audit", "check", "report", "analyze", "review" | scan-only |
+| "fix color", "fix typography", specific dimension keyword | targeted |
+| "polish", "fix all", "full", "improve", "clean up", "redesign" | full |
+| Unclear | ask user |
+
+## Dimension Filter (targeted mode only)
+
+When targeted mode detected, extract which dimensions to focus on:
+
+| Keywords | Dimension Filter |
+|----------|-----------------|
+| AI slop, generic | anti_patterns |
+| color, palette, contrast | color |
+| font, typography, type | typography |
+| spacing, layout, grid | spacing |
+| animation, motion | motion |
+| hover, focus, states | interaction |
+| hierarchy, visual weight | hierarchy |
+| responsive, mobile | responsive |
+
+## Target Detection
+
+| Signal | Target Type |
+|--------|-------------|
+| URL provided (http/https) | url |
+| File path provided (.tsx, .css, .html) | component |
+| "all", "full site", "entire", "everything" | full_site |
+| Directory path | directory |
+
+## Complexity Scoring
+
+| Factor | Points |
+|--------|--------|
+| Single component / single URL | +1 |
+| Multiple components | +2 |
+| Full site | +3 |
+| Multiple dimensions targeted | +1 |
+| Chrome DevTools required | +1 |
+| Responsive checks needed | +1 |
+
+Results: 1-2 Low (scan-only), 3-4 Medium (targeted), 5+ High (full)
+
+## Output
+
+Write scope context to coordinator memory:
+```json
+{
+  "pipeline_mode": "<scan-only|targeted|full>",
+  "target": "<url|component-path|full_site>",
+  "target_type": "<url|component|directory|full_site>",
+  "dimension_filters": ["<dimension-names or empty for all>"],
+  "complexity": { "score": 0, "level": "Low|Medium|High" }
+}
+```