Claude-Code-Workflow/.claude/skills/team-frontend/SKILL.md

name, description, allowed-tools

name	description	allowed-tools
team-frontend	Unified team skill for frontend development. Uses team-worker agent architecture with role-spec files for domain logic. Coordinator orchestrates pipeline, workers are team-worker agents. Built-in ui-ux-pro-max design intelligence. Triggers on "team frontend".	Agent, TaskCreate, TaskList, TaskGet, TaskUpdate, TeamCreate, TeamDelete, SendMessage, AskUserQuestion, Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, mcp__ace-tool__search_context

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 markdown specs.

Architecture

+---------------------------------------------------+
|  Skill(skill="team-frontend")                      |
|  args="<task-description>"                         |
+-------------------+-------------------------------+
                    |
         Orchestration Mode (auto -> coordinator)
                    |
              Coordinator (inline)
              Phase 0-5 orchestration
                    |
    +-------+-------+-------+-------+
    v       v       v       v
 [tw]    [tw]    [tw]    [tw]
analyst  archi-  devel-  qa
         tect    oper

(tw) = team-worker agent

Role Router

This skill is coordinator-only. Workers do NOT invoke this skill -- they are spawned as team-worker agents directly.

Input Parsing

Parse $ARGUMENTS. No --role needed -- always routes to coordinator.

Role Registry

Role	Spec	Task Prefix	Type	Inner Loop
coordinator	roles/coordinator/role.md	(none)	orchestrator	-
analyst	role-specs/analyst.md	ANALYZE-*	read_only_analysis	false
architect	role-specs/architect.md	ARCH-*	code_generation	false
developer	role-specs/developer.md	DEV-*	code_generation	true
qa	role-specs/qa.md	QA-*	read_only_analysis	false

Dispatch

Always route to coordinator. Coordinator reads roles/coordinator/role.md and executes its phases.

Orchestration Mode

User just provides task description.

Invocation:

Skill(skill="team-frontend", args="<task-description>")

Lifecycle:

User provides task description
  -> coordinator Phase 1-3: Parse requirements -> TeamCreate -> Create task chain
  -> coordinator Phase 4: spawn first batch workers (background) -> STOP
  -> Worker (team-worker agent) executes -> SendMessage callback -> coordinator advances
  -> GC loop (developer <-> qa) if fix_required (max 2 rounds)
  -> All tasks complete -> Phase 5 report + completion action

User Commands (wake paused coordinator):

Command	Action
check / status	Output execution status graph, no advancement
resume / continue	Check worker states, advance next step

---

Command Execution Protocol

When coordinator needs to execute a command (dispatch, monitor):

1. Read the command file: roles/coordinator/commands/<command-name>.md
2. Follow the workflow defined in the command file (Phase 2-4 structure)
3. Commands are inline execution guides -- NOT separate agents or subprocesses
4. Execute synchronously -- complete the command workflow before proceeding

Example:

Phase 3 needs task dispatch
  -> Read roles/coordinator/commands/dispatch.md
  -> Execute Phase 2 (Context Loading)
  -> Execute Phase 3 (Task Chain Creation)
  -> Execute Phase 4 (Validation)
  -> Continue to Phase 4

---

Coordinator Spawn Template

v5 Worker Spawn (all roles)

When coordinator spawns workers, use team-worker agent with role-spec path:

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: .claude/skills/team-frontend/role-specs/<role>.md
session: <session-folder>
session_id: <session-id>
team_name: frontend
requirement: <task-description>
inner_loop: <true|false>

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

Inner Loop roles (developer): Set inner_loop: true. The team-worker agent handles the loop internally.

Single-task roles (analyst, architect, qa): Set inner_loop: false.

---

Pipeline Definitions

Pipeline Diagrams

Page Mode (4 beats, linear):

Pipeline: Page (Linear)
=====================================================
Stage 1           Stage 2           Stage 3           Stage 4
ANALYZE-001  -->  ARCH-001     -->  DEV-001      -->  QA-001
[analyst]         [architect]       [developer]       [qa]

Feature Mode (5 beats, with architecture review gate):

Pipeline: Feature (Architecture Review Gate)
=====================================================
Stage 1           Stage 2           Stage 3           Stage 4           Stage 5
ANALYZE-001  -->  ARCH-001     -->  QA-001       -->  DEV-001      -->  QA-002
[analyst]         [architect]       [qa:arch-rev]     [developer]       [qa:code-rev]

System Mode (7 beats, dual-track parallel):

Pipeline: System (Dual-Track Parallel)
=====================================================
Stage 1           Stage 2           Stage 3           Stage 4 (parallel)      Stage 5     Stage 6     Stage 7
ANALYZE-001  -->  ARCH-001     -->  QA-001       --> ARCH-002 ─┐         -->  QA-002 -->  DEV-002 --> QA-003
[analyst]         [architect]       [qa:arch-rev]    [architect] |             [qa]        [developer] [qa:final]
                                                     DEV-001  ──┘
                                                     [developer:tokens]

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

Task ID	Role	Stage	Dependencies	Description
ANALYZE-001	analyst	analysis	(none)	Requirement analysis + design intelligence
ARCH-001	architect	design	ANALYZE-001	Design token system + component architecture
ARCH-002	architect	design	QA-001 (system)	Component specs refinement
DEV-001	developer	impl	ARCH-001 or QA-001	Frontend implementation
DEV-002	developer	impl	QA-002 (system)	Component implementation
QA-001	qa	review	ARCH-001 or DEV-001	Architecture or code review
QA-002	qa	review	DEV-001	Code review
QA-003	qa	review	DEV-002 (system)	Final quality check

---

ui-ux-pro-max Integration

Design Intelligence Engine

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

Action	Invocation
Full design system	Skill(skill="ui-ux-pro-max", args="<industry> <keywords> --design-system")
Domain search	Skill(skill="ui-ux-pro-max", args="<query> --domain <domain>")
Tech stack guidance	Skill(skill="ui-ux-pro-max", args="<query> --stack <stack>")

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. Suggest installation: /plugin install ui-ux-pro-max@ui-ux-pro-max-skill

---

Completion Action

At Phase 5, coordinator offers interactive completion:

AskUserQuestion({
  questions: [{
    question: "Team pipeline complete. What would you like to do?",
    header: "Completion",
    options: [
      { label: "Archive & Clean (Recommended)" },
      { label: "Keep Active" },
      { label: "Export Results" }
    ]
  }]
})

Choice	Steps
Archive & Clean	Verify completed -> update status -> TeamDelete() -> final summary
Keep Active	Status="paused" -> "Resume with: Skill(skill='team-frontend', args='resume')"
Export Results	Ask target dir -> copy artifacts -> Archive flow

---

Message Bus

Every SendMessage must be preceded by mcp__ccw-tools__team_msg log:

mcp__ccw-tools__team_msg({
  operation: "log",
  session_id: <session-id>,
  from: <role>,
  type: <message-type>,
  data: {ref: <artifact-path>}
})

to and summary auto-defaulted -- do NOT specify explicitly.

CLI fallback: ccw team log --session-id <session-id> --from <role> --type <type> --json

Message types by role:

Role	Types
coordinator	task_unblocked, sync_checkpoint, fix_required, error, shutdown
analyst	analyze_ready, error
architect	arch_ready, arch_revision, error
developer	dev_complete, dev_progress, error
qa	qa_passed, qa_result, fix_required, error

---

Session Directory

.workflow/.team/FE-<slug>-<YYYY-MM-DD>/
├── .msg/
│   ├── messages.jsonl          # Message bus log
│   └── meta.json               # Session state + cross-role state
├── 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

Error Handling

Scenario	Resolution
Unknown command	Error with available command list
QA score < 6 over 2 GC rounds	Escalate to user
Dual-track sync failure (system mode)	Fallback to single-track sequential
ui-ux-pro-max unavailable	Degrade to LLM general design knowledge
Worker no response	Report waiting task, suggest user resume
Pipeline deadlock	Check blockedBy chain, report blocking point