About team-frontend
A team skill for frontend work spanning requirements analysis, design-system generation, implementation, and QA. It routes work through a coordinator and specialized roles, with ui-ux-pro-max design intelligence and commands to inspect or resume a session.
Key features
- 01Requirements analysis and design systems
- 02Frontend implementation and QA
- 03Coordinator and role-based routing
- 04Parallel team-worker collaboration
- 05Session status and resume commands
Use cases
- 01Run a frontend project from requirements through implementation
- 02Generate a design system and build interfaces
- 03Review quality and track team task status
MCP support
It uses `mcp__ccw-tools__team_msg` as a message bus for communication among roles in a session.
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ catlog22/ claude-code-workflow --skill team-frontendAfter installing, type/team-frontendin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
roles/analyst/role.mdroles/architect/role.mdroles/coordinator/role.mdroles/coordinator/commands/analyze.mddispatch.mdmonitor.mdroles/developer/role.mdroles/qa/role.mdspecs/pipelines.mdteam-config.jsonDetails
From the project READMETeam 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 | Path | Prefix | Inner Loop |
|---|---|---|---|
| coordinator | roles/coordinator/role.md | — | — |
| analyst | roles/analyst/role.md | ANALYZE-* | false |
| architect | roles/architect/role.md | ARCH-* | false |
| developer | roles/developer/role.md | DEV-* | true |
| qa | roles/qa/role.md | QA-* | false |
Role Router
Parse $ARGUMENTS:
- Has
--role <name>→ Readroles/<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
| Command | Action |
|---|---|
check / status | View execution status graph |
resume / continue | Advance to next step |
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
| Scenario | Resolution |
|---|---|
| Unknown command | Error with available command list |
| Role not found | Error with role registry |
| QA score < 6 over 2 GC rounds | Escalate to user |
| 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 |