Team Frontend

Team Frontend Development

Unified team skill: frontend development with built-in ui-ux-pro-max design intelligence. Covers requirement analysis, design system generation, frontend implementation, and quality assurance. Built on team-worker agent architecture — all worker roles share a single agent definition with role-specific Phase 2-4 loaded from role.md specs.

Architecture

Skill(skill="team-frontend", 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
               [analyst] [architect] [developer] [qa]
              (team-worker agents, each loads roles/<role>/role.md)

Role Registry

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

Shared Constants

• Session prefix: FE
• Session path: .workflow/.team/FE-<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>, ...)

Worker Spawn Template

Coordinator spawns workers using this template:

Agent({
  subagent_type: "team-worker",
  description: "Spawn <role> worker",
  team_name: "frontend",
  name: "<role>",
  run_in_background: true,
  prompt: `## Role Assignment
role: <role>
role_spec: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
team_name: frontend
requirement: <task-description>
inner_loop: <true|false>

## Progress Milestones
session_id: <session-id>
Report progress via team_msg at natural phase boundaries (context loaded -> core work done -> verification).
Report blockers immediately via team_msg type="blocker".
Report completion via team_msg type="task_complete" after final SendMessage.

Read role_spec file (@<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.
Execute built-in Phase 1 (task discovery) -> role Phase 2-4 -> built-in Phase 5 (report).`
})

User Commands

Session Directory

.workflow/.team/FE-<slug>-<YYYY-MM-DD>/
├── .msg/
│   ├── messages.jsonl          # Message bus log
│   └── meta.json               # Session state + cross-role state
├── task-analysis.json          # Coordinator analyze output
├── wisdom/                     # Cross-task knowledge
├── analysis/                   # Analyst output
│   ├── design-intelligence.json
│   └── requirements.md
├── architecture/               # Architect output
│   ├── design-tokens.json
│   ├── component-specs/
│   └── project-structure.md
├── qa/                         # QA output
│   └── audit-<NNN>.md
└── build/                      # Developer output

Specs Reference

• specs/pipelines.md — Pipeline definitions and task registry

Error Handling

Requirements Analyst

Analyze frontend requirements and retrieve industry design intelligence via ui-ux-pro-max skill. Produce design-intelligence.json and requirements.md for downstream consumption by architect and developer roles.

Phase 2: Context Loading

1. Extract session path, industry type, and tech stack from task description 2. Detect existing design system:

3. Detect tech stack from package.json:

4. Load .msg/meta.json for shared state

Phase 3: Design Intelligence Retrieval

Retrieve design intelligence via ui-ux-pro-max skill integration.

Step 1: Invoke ui-ux-pro-max (primary path):

Step 2: Fallback (if skill unavailable):

• Generate design recommendations from LLM general knowledge
• Log warning: ui-ux-pro-max not installed. Install via: /plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Step 3: Analyze existing codebase (if token/CSS files found):

• Explore existing design patterns (color palette, typography scale, spacing, component patterns)

Step 4: Competitive reference (optional, if industry is not "Other"):

• WebSearch({ query: "<industry> web design trends best practices" })

Step 5: Compile design-intelligence.json:

Output files:

• <session>/analysis/design-intelligence.json
• <session>/analysis/requirements.md

Tech Profile Scan

After analysis, scan findings for context-aware trigger signals (based on detected codebase characteristics):

1. Check detected_stack and dependencies → framework signals (frontend_framework, api_surface) 2. Check codebase patterns → risk signals (perf_sensitive, test_gap, legacy_patterns) 3. Include tech_profile in Phase 5 state_update data

Phase 4: Self-Review

Update .msg/meta.json: merge design_intelligence and industry_context keys.

Frontend Architect

Consume design-intelligence.json to define design token system, component architecture, and project structure. Token values prioritize ui-ux-pro-max recommendations. Produce architecture artifacts for developer consumption.

Phase 2: Context Loading

1. Extract session path and scope from task description 2. Load design intelligence from analyst output 3. Load .msg/meta.json for shared state (industry_context, design_intelligence) 4. Detect existing project structure via Glob src/**/*

Fail-safe: If design-intelligence.json not found, use default token values and log warning.

Phase 3: Architecture Design

Scope selection:

Step 1: Design Token System (scope: tokens or full):

Generate <session>/architecture/design-tokens.json with categories:

Use $type + $value format (Design Tokens Community Group). Support light/dark mode via nested values.

Step 2: Component Architecture (scope: components or full):

Generate component specs in <session>/architecture/component-specs/:

• Design reference (style, stack)
• Props table (name, type, default, description)
• Variants table
• Accessibility requirements (role, keyboard, ARIA, contrast)
• Anti-patterns to avoid (from design intelligence)

Step 3: Project Structure (scope: full):

Generate <session>/architecture/project-structure.md with stack-specific layout:

Phase 4: Self-Review

Update .msg/meta.json: merge design_token_registry and component_inventory keys.

Analyze Task

Parse frontend task -> detect capabilities -> assess pipeline complexity -> design roles.

CONSTRAINT: Text-level analysis only. NO source code reading, NO codebase exploration.

Signal Detection

Pipeline Selection

Default to feature if ambiguous.

Complexity Scoring

Results: 1-2 page, 3-4 feature, 5+ system

Output

Write <session>/task-analysis.json:

{
  "task_description": "<original>",
  "pipeline_type": "<page|feature|system>",
  "capabilities": [{ "name": "<cap>", "role": "<role>", "keywords": ["..."] }],
  "roles": [{ "name": "<role>", "prefix": "<PREFIX>", "inner_loop": false }],
  "complexity": { "score": 0, "level": "Low|Medium|High" },
  "industry": "<industry>",
  "constraints": [],
  "needs_ui_ux_pro_max": true
}

Command: Dispatch

Create the frontend development task chain with correct dependencies and structured task descriptions. Supports page, feature, and system pipeline modes.

Phase 2: Context Loading

1. Load user requirement and scope from session.json 2. Load pipeline mode (page / feature / system) from session.json 3. Load industry and constraints for task descriptions

Phase 3: Task Chain Creation

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>
  - Industry: <industry>
  - Scope: <scope>
  - Upstream artifacts: <artifact-1>, <artifact-2>
  - Shared memory: <session>/.msg/meta.json
EXPECTED: <deliverable path> + <quality criteria>
CONSTRAINTS: <scope limits, focus areas>"
})
TaskUpdate({ taskId: "<TASK-ID>", addBlockedBy: [<dependency-list>], owner: "<role>" })

Mode Router

---

Page Mode Task Chain (4 tasks)

ANALYZE-001 (analyst):

TaskCreate({
  subject: "ANALYZE-001",
  description: "PURPOSE: Analyze frontend requirements and retrieve design intelligence | Success: design-intelligence.json produced with industry-specific recommendations
TASK:
  - Detect tech stack and existing design system
  - Retrieve design intelligence via ui-ux-pro-max (or LLM fallback)
  - Analyze existing codebase patterns
  - Compile design-intelligence.json and requirements.md
CONTEXT:
  - Session: <session-folder>
  - Industry: <industry>
  - Scope: <scope>
  - Shared memory: <session>/.msg/meta.json
EXPECTED: <session>/analysis/design-intelligence.json + requirements.md | Structured design data
CONSTRAINTS: Read-only analysis | No code modifications"
})
TaskUpdate({ taskId: "ANALYZE-001", owner: "analyst" })

ARCH-001 (architect):

TaskCreate({
  subject: "ARCH-001",
  description: "PURPOSE: Define design token system and component architecture | Success: design-tokens.json + component specs produced
TASK:
  - Load design intelligence from analyst output
  - Generate design token system (colors, typography, spacing, shadows)
  - Define component architecture and specs
  - Generate project structure
CONTEXT:
  - Session: <session-folder>
  - Industry: <industry>
  - Scope: full
  - Upstream artifacts: design-intelligence.json, requirements.md
  - Shared memory: <session>/.msg/meta.json
EXPECTED: <session>/architecture/design-tokens.json + component-specs/ + project-structure.md
CONSTRAINTS: Use ui-ux-pro-max recommendations for token values | Support light/dark mode"
})
TaskUpdate({ taskId: "ARCH-001", addBlockedBy: ["ANALYZE-001"], owner: "architect" })

DEV-001 (developer):

TaskCreate({
  subject: "DEV-001",
  description: "PURPOSE: Implement frontend page/components from architecture artifacts | Success: All planned files implemented with design token usage
TASK:
  - Load design tokens, component specs, project structure
  - Generate CSS custom properties from design tokens
  - Implement components following specs and coding standards
  - Self-validate: no hardcoded colors, cursor-pointer, focus styles, responsive
CONTEXT:
  - Session: <session-folder>
  - Industry: <industry>
  - Scope: full
  - Upstream artifacts: design-tokens.json, component-specs/, project-structure.md
  - Shared memory: <session>/.msg/meta.json
EXPECTED: src/styles/tokens.css + component files | Design-token compliant code
CONSTRAINTS: Use CSS variables from tokens | Mobile-first responsive | WCAG AA"
})
TaskUpdate({ taskId: "DEV-001", addBlockedBy: ["ARCH-001"], owner: "developer" })

QA-001 (qa):

TaskCreate({
  subject: "QA-001",
  description: "PURPOSE: Execute 5-dimension quality audit on implementation | Success: Score >= 8 with 0 critical issues
TASK:
  - Load design intelligence and tokens for compliance checks
  - Execute 5-dimension audit (code quality, accessibility, design compliance, UX, pre-delivery)
  - Calculate weighted score and determine verdict
  - Write audit report
CONTEXT:
  - Session: <session-folder>
  - Industry: <industry>
  - Review type: code-review
  - Upstream artifacts: design-intelligence.json, design-tokens.json, src/**
  - Shared memory: <session>/.msg/meta.json
EXPECTED: <session>/qa/audit-001.md | Weighted score + verdict + categorized issues
CONSTRAINTS: Read-only review | No code modifications"
})
TaskUpdate({ taskId: "QA-001", addBlockedBy: ["DEV-001"], owner: "qa" })

---

Feature Mode Task Chain (5 tasks)

Create ANALYZE-001 and ARCH-001 as page mode above, then:

QA-001 (qa, architecture review):

• blockedBy: ["ARCH-001"]
• Review type: architecture-review
• Reviews architecture artifacts before developer starts

DEV-001 (developer):

• blockedBy: ["QA-001"] (waits for arch review to pass)

QA-002 (qa, code review):

• blockedBy: ["DEV-001"]
• Review type: code-review

---

System Mode Task Chain (7 tasks)

Create ANALYZE-001, ARCH-001, QA-001 as feature mode above, then:

ARCH-002 (architect, parallel with DEV-001):

• blockedBy: ["QA-001"]
• Scope: components (refined specs after QA feedback)

DEV-001 (developer, parallel with ARCH-002):

• blockedBy: ["QA-001"]
• Scope: tokens (CSS generation)

QA-002 (qa):

• blockedBy: ["ARCH-002"]
• Review type: component-review

DEV-002 (developer):

• blockedBy: ["QA-002"]
• Scope: components

QA-003 (qa, final review):

• blockedBy: ["DEV-002"]
• Review type: final

Phase 4: Validation

If validation fails, fix the specific task and re-validate.

Command: Monitor

Event-driven pipeline coordination. Beat model: coordinator wake -> process -> spawn -> STOP.

Constants

• SPAWN_MODE: background
• ONE_STEP_PER_INVOCATION: true
• FAST_ADVANCE_AWARE: true
• WORKER_AGENT: team-worker
• MAX_GC_ROUNDS: 2

Handler Router

Phase 2: Context Loading

1. Load session.json for current state, pipeline_mode, gc_rounds 2. Run TaskList() to get current task statuses 3. Identify trigger event type from Entry Router

Phase 3: Event Handlers

handleCallback

Triggered when a worker sends completion message.

1. Parse message to identify role and task ID:

2. Mark task as completed:

TaskUpdate({ taskId: "<task-id>", status: "completed" })

3. Record completion in session state

4. Check if checkpoint applies:

5. GC Loop Check (when QA completes with fix_required):

GC Fix Task Creation:

TaskCreate({
  subject: "DEV-fix-<round>",
  description: "PURPOSE: Fix issues identified in QA audit | Success: All critical/high issues resolved
TASK:
  - Load QA audit report with findings
  - Address critical and high severity issues
  - Re-validate fixes against coding standards
CONTEXT:
  - Session: <session-folder>
  - Upstream artifacts: <session>/qa/audit-<NNN>.md
  - Shared memory: <session>/.msg/meta.json
EXPECTED: Fixed source files | QA issues resolved
CONSTRAINTS: Targeted fixes only | Do not introduce regressions"
})
TaskUpdate({ taskId: "DEV-fix-<round>", owner: "developer" })

TaskCreate({
  subject: "QA-recheck-<round>",
  description: "PURPOSE: Re-audit after developer fixes | Success: Score >= 8, critical == 0
TASK:
  - Execute 5-dimension audit on fixed code
  - Focus on previously flagged issues
  - Calculate new score
CONTEXT:
  - Session: <session-folder>
  - Review type: code-review
  - Shared memory: <session>/.msg/meta.json
EXPECTED: <session>/qa/audit-<NNN>.md | Improved score
CONSTRAINTS: Read-only review"
})
TaskUpdate({ taskId: "QA-recheck-<round>", addBlockedBy: ["DEV-fix-<round>"], owner: "qa" })

6. Proceed to handleSpawnNext

handleSpawnNext

Find and spawn the next ready tasks.

1. Scan task list for tasks where:

• Status is "pending"
• All blockedBy tasks have status "completed"

2. For each ready task, spawn team-worker:

Agent({
  subagent_type: "team-worker",
  description: "Spawn <role> worker for <task-id>",
  team_name: "frontend",
  name: "<role>",
  run_in_background: true,
  prompt: `## Role Assignment
role: <role>
role_spec: ~  or <project>/.claude/skills/team-frontend/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
team_name: frontend
requirement: <task-description>
inner_loop: <true|false>

## Progress Milestones
session_id: <session-id>
Report progress via team_msg at natural phase boundaries (context loaded -> core work done -> verification).
Report blockers immediately via team_msg type="blocker".
Report completion via team_msg type="task_complete" after final SendMessage.

Read role_spec file to load Phase 2-4 domain instructions.
Execute built-in Phase 1 -> role-spec Phase 2-4 -> built-in Phase 5.`
})

3. Parallel spawn rules:

4. STOP after spawning -- wait for next callback

handleCheck

Output current pipeline status.

Worker Progress (from message bus):

Before generating status output, read worker milestones:

const progressMsgs = mcp__ccw-tools__team_msg({
  operation: "list", session_id: sessionId, type: "progress", last: 50
})
const blockerMsgs = mcp__ccw-tools__team_msg({
  operation: "list", session_id: sessionId, type: "blocker", last: 10
})

// Aggregate latest milestone per task
const taskProgress = {}
for (const msg of (progressMsgs.result?.messages || [])) {
  const tid = msg.data?.task_id
  if (tid && (!taskProgress[tid] || msg.ts > taskProgress[tid].ts)) {
    taskProgress[tid] = { phase: msg.data.phase, pct: msg.data.progress_pct, ts: msg.ts }
  }
}

Include in status output:

• Per-worker latest milestone (phase + progress_pct) next to task status
• Active blockers section (if any blockerMsgs found)

Pipeline Status (<mode> mode):
  [DONE]  ANALYZE-001  (analyst)    -> design-intelligence.json
  [DONE]  ARCH-001     (architect)  -> design-tokens.json
  [RUN]   DEV-001      (developer)  -> implementing...
  [WAIT]  QA-001       (qa)         -> blocked by DEV-001

GC Rounds: 0/2
Session: <session-id>

Output status -- do NOT advance pipeline.

handleResume

Resume pipeline after user pause or interruption.

1. Audit task list for inconsistencies:

• Tasks stuck in "in_progress" -> reset to "pending"
• Tasks with completed blockers but still "pending" -> include in spawn list

2. Proceed to handleSpawnNext

handleComplete

Triggered when all pipeline tasks are completed.

Completion check:

1. If any tasks not completed, return to handleSpawnNext 2. If all completed, transition to coordinator Phase 5

Phase 4: State Persistence

After every handler execution:

1. Update session.json with current state (active tasks, gc_rounds, last event) 2. Verify task list consistency 3. STOP and wait for next event

Coordinator Role

Orchestrate team-frontend: analyze -> dispatch -> spawn -> monitor -> report.

Identity

• Name: coordinator | Tag: [coordinator]
• Responsibility: Analyze task -> Create team -> Dispatch tasks -> Monitor progress -> Report results

Boundaries

MUST

• Use team-worker agent type for all worker spawns (NOT general-purpose)
• Follow Command Execution Protocol for dispatch and monitor commands
• Respect pipeline stage dependencies (blockedBy)
• Stop after spawning workers -- wait for callbacks
• Handle GC loops (developer <-> qa) with max 2 iterations
• Execute completion action in Phase 5

MUST NOT

• Implement domain logic (analyzing, designing, coding, reviewing) -- workers handle this
• Spawn workers without creating tasks first
• Skip architecture review gate when configured (feature/system modes)
• Force-advance pipeline past failed QA review
• Modify source code directly -- delegate to developer worker

Command Execution Protocol

When coordinator needs to execute a command: 1. Read commands/<command>.md 2. Follow the workflow defined in the command 3. Commands are inline execution guides, NOT separate agents 4. Execute synchronously, complete before proceeding

Entry Router

For callback/check/resume/complete: load @commands/monitor.md, execute handler, STOP.

Phase 0: Session Resume Check

1. Scan .workflow/.team/FE-*/.msg/meta.json for active/paused sessions 2. No sessions -> Phase 1 3. Single session -> reconcile (audit TaskList, reset in_progress->pending, rebuild team, kick first ready task) 4. Multiple -> AskUserQuestion for selection

Phase 1: Requirement Clarification

TEXT-LEVEL ONLY. No source code reading.

1. Parse task description from $ARGUMENTS 2. Delegate to @commands/analyze.md -> produces task-analysis.json 3. Ask for missing parameters via AskUserQuestion:

Scope Selection:

Industry Selection:

Design Constraints (multi-select): Existing design system, WCAG AA, Responsive, Dark mode

4. Record requirements: mode, scope, industry, constraints 5. CRITICAL: Always proceed to Phase 2, never skip team workflow

Phase 2: Session & Team Setup

1. Resolve workspace paths (MUST do first):

• project_root = result of Bash({ command: "pwd" })
• skill_root = <project_root>/.claude/skills/team-frontend

3. Generate session ID: FE-<slug>-<YYYY-MM-DD> 4. Create session folder structure:

mkdir -p .workflow/.team/<session-id>/{.msg,wisdom,analysis,architecture,qa,build}

5. TeamCreate with team name: TeamCreate({ team_name: "frontend" }) 6. Read specs/pipelines.md -> select pipeline based on scope 7. Register roles in session state 8. Initialize meta.json with pipeline metadata:

mcp__ccw-tools__team_msg({
  operation: "log", session_id: "<id>", from: "coordinator",
  type: "state_update", summary: "Session initialized",
  data: {
    pipeline_mode: "<page|feature|system>",
    pipeline_stages: ["analyst", "architect", "developer", "qa"],
    roles: ["coordinator", "analyst", "architect", "developer", "qa"],
    team_name: "frontend",
    industry: "<industry>",
    constraints: []
  }
})

9. Write session.json

Phase 3: Task Chain Creation

Delegate to @commands/dispatch.md: 1. Read specs/pipelines.md for selected pipeline task registry 2. Create tasks via TaskCreate, then set blockedBy via TaskUpdate 3. Update session.json

Phase 4: Spawn-and-Stop

Delegate to @commands/monitor.md#handleSpawnNext: 1. Find ready tasks (pending + blockedBy resolved) 2. Spawn team-worker agents (see SKILL.md Spawn Template) 3. Output status summary 4. STOP

Phase 5: Report + Completion Action

1. Load session state -> count completed tasks, calculate duration 2. List deliverables:

3. Output pipeline summary: task count, duration, QA scores 4. Execute completion action per session.completion_action:

• interactive -> AskUserQuestion (Archive/Keep/Export)
• auto_archive -> Archive & Clean (status=completed, TeamDelete)
• auto_keep -> Keep Active (status=paused)

Error Handling

Frontend Developer

Consume architecture artifacts (design tokens, component specs, project structure) to implement frontend code. Reference design-intelligence.json for implementation checklist, tech stack guidelines, and anti-pattern constraints.

Phase 2: Context Loading

1. Extract session path and scope from task description 2. Load design tokens (required -- if missing, report to coordinator) 3. Load design intelligence for anti-patterns and guidelines 4. Load component specs and project structure 5. Detect tech stack from design intelligence detected_stack 6. Load .msg/meta.json for shared state

Phase 3: Code Implementation

Scope selection:

Step 1: Generate Design Token CSS (scope: tokens or full):

Convert design-tokens.json to src/styles/tokens.css:

Add @media (prefers-color-scheme: dark) override for color tokens.

Step 2: Implement Components (scope: components or full):

Implementation strategy by complexity:

Coding standards (mandatory):

• Use design token CSS variables -- never hardcode colors/spacing
• All interactive elements: cursor: pointer
• Transitions: 150-300ms via var(--duration-normal)
• Text contrast: minimum 4.5:1 ratio
• Include focus-visible styles for keyboard navigation
• Support prefers-reduced-motion
• Responsive: mobile-first with md/lg breakpoints
• No emoji as functional icons

Phase 4: Self-Review

Auto-fix where possible: add missing cursor-pointer, basic focus styles.

Update .msg/meta.json: merge component_inventory key with implemented file list.

QA Engineer

Execute 5-dimension quality audit integrating ux-guidelines Do/Don't rules, pre-delivery checklist, and industry anti-pattern library. Perform CSS-level precise review on architecture artifacts and implementation code.

Phase 2: Context Loading

1. Extract session path and review type from task description 2. Load design intelligence (for anti-patterns, must-have rules) 3. Load design tokens (for compliance checks) 4. Load .msg/meta.json (for industry context, strictness level) 5. Collect files to review based on review type:

Phase 3: 5-Dimension Audit

Dimension 1 -- Code Quality: File length (>300 LOC), console.log, empty catch, unused imports.

Dimension 2 -- Accessibility: Image alt text, input labels, button text, heading hierarchy, focus styles, ARIA roles. Strict mode (medical/financial): prefers-reduced-motion required.

Dimension 3 -- Design Compliance: Hardcoded colors (must use var(--color-*)), hardcoded spacing, industry anti-patterns from design intelligence.

Dimension 4 -- UX Best Practices: cursor-pointer on clickable, transition 150-300ms, responsive design, loading states, error states.

Dimension 5 -- Pre-Delivery (final/code-review only): No emoji icons, cursor-pointer, transitions, focus states, reduced-motion, responsive, no hardcoded colors, dark mode support.

Score calculation: score = sum(dimension_score * weight)

Verdict:

Phase 4: Self-Review

Write audit report to <session>/qa/audit-<NNN>.md with: summary, dimension scores, issues by severity, passed dimensions.

Update .msg/meta.json: append to qa_history array.

Frontend Pipeline Definitions

Pipeline Modes

Page Mode (4 beats, linear)

ANALYZE-001 --> ARCH-001 --> DEV-001 --> QA-001
[analyst]       [architect]  [developer]  [qa]

Feature Mode (5 beats, with architecture review gate)

ANALYZE-001 --> ARCH-001 --> QA-001 --> DEV-001 --> QA-002
[analyst]       [architect]  [qa:arch]   [developer]  [qa:code]

System Mode (7 beats, dual-track parallel)

ANALYZE-001 --> ARCH-001 --> QA-001 --> ARCH-002 ─┐
[analyst]       [architect]  [qa:arch]  [architect] |
                                        DEV-001   ──┘ --> QA-002 --> DEV-002 --> QA-003
                                        [developer:tokens]  [qa]    [developer]  [qa:final]

Generator-Critic Loop (developer <-> qa)

developer (Generator) -> QA artifact -> qa (Critic)
                      <- QA feedback <-
                         (max 2 rounds)

Convergence: qa.score >= 8 && qa.critical_count === 0

Task Metadata Registry

Pipeline Selection Logic

Default: feature.

ui-ux-pro-max Integration

Analyst role invokes ui-ux-pro-max via Skill to obtain industry design intelligence:

Supported Domains: product, style, typography, color, landing, chart, ux, web Supported Stacks: html-tailwind, react, nextjs, vue, svelte, shadcn, swiftui, react-native, flutter

Fallback: If ui-ux-pro-max skill not installed, degrade to LLM general design knowledge.