--- name: team-frontend description: 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". allowed-tools: 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="" | +-------------------+-------------------------------+ | 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](roles/coordinator/role.md) | (none) | orchestrator | - | | analyst | [role-specs/analyst.md](role-specs/analyst.md) | ANALYZE-* | read_only_analysis | false | | architect | [role-specs/architect.md](role-specs/architect.md) | ARCH-* | code_generation | false | | developer | [role-specs/developer.md](role-specs/developer.md) | DEV-* | code_generation | true | | qa | [role-specs/qa.md](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**: ```bash Skill(skill="team-frontend", args="") ``` **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/.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 worker", team_name: "frontend", name: "", run_in_background: true, prompt: `## Role Assignment role: role_spec: .claude/skills/team-frontend/role-specs/.md session: session_id: team_name: frontend requirement: inner_loop: 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=" --design-system")` | | Domain search | `Skill(skill="ui-ux-pro-max", args=" --domain ")` | | Tech stack guidance | `Skill(skill="ui-ux-pro-max", args=" --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: , from: , type: , data: {ref: } }) ``` `to` and `summary` auto-defaulted -- do NOT specify explicitly. **CLI fallback**: `ccw team log --session-id --from --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--/ ├── .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-.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 |