---
name: team-frontend
type: workflow
description: "Orchestrates the frontend team of ux-designer, ux-researcher, frontend-developer, and accessibility-specialist to design, implement, and validate a UI feature from research to launch. Use when a UI feature needs coordinated design and engineering delivery."
argument-hint: "[UI feature or screen description]"
user-invocable: true
allowed-tools: Read, Glob, Grep, Write, Edit, Bash, Task, AskUserQuestion, TodoWrite
effort: 3
when_to_use: "Use when a UI feature needs coordinated delivery across UX research, interaction design, component implementation, and accessibility audit."
When this skill is invoked, orchestrate the frontend team through a structured delivery pipeline.
Decision Points: At each phase, use AskUserQuestion to get user approval before proceeding.
Team Composition
- ux-researcher — User insights and validation
- ux-designer — User flows, wireframes, interaction design
- frontend-developer — Component implementation and integration
- accessibility-specialist — Accessibility audit and compliance
Pipeline
Phase 1: Research (if needed)
Delegate to ux-researcher (skip if sufficient prior research exists):
- Define what user behavior/pain-point this feature addresses
- Review any existing analytics or user feedback
- Output: Research brief with key insights
Phase 2: UX Design
Delegate to ux-designer:
- Define user flow (entry → states → exit)
- Create wireframes for all states (default, loading, error, empty, success)
- Specify interaction patterns and responsive breakpoints
- Define accessibility requirements
- Output: UX spec and wireframes for approval
Phase 3: Implementation
Delegate to frontend-developer:
- Build components following the approved UX spec
- Use design tokens — no hardcoded colors, sizes, or fonts
- Handle all states: loading, error, empty, success
- All user-facing strings through i18n layer
- Write component unit tests
- Output: Implemented UI feature
Phase 4: Accessibility Audit
Delegate to accessibility-specialist:
- Test keyboard navigation (tab order, focus management)
- Verify ARIA roles and labels
- Check color contrast (WCAG AA minimum)
- Test with screen reader if critical flow
- Output: Accessibility report
Phase 5: Polish & Review
- Address accessibility findings
- Verify responsive behavior at all target breakpoints
- Cross-browser test on target browsers
- ux-designer validates final implementation against spec
Output
Summary covering: research insights used, UX spec status, implementation status, accessibility compliance, and any outstanding issues.
1---2name: team-frontend3description: ---4---5---6name: team-frontend7type: workflow8description: "Orchestrates the frontend team of ux-designer, ux-researcher, frontend-developer, and accessibility-specialist to design, implement, and validate a UI feature from research to launch. Use when a UI feature needs coordinated design and engineering delivery."9argument-hint: "[UI feature or screen description]"10user-invocable: true11allowed-tools: Read, Glob, Grep, Write, Edit, Bash, Task, AskUserQuestion, TodoWrite12effort: 313when_to_use: "Use when a UI feature needs coordinated delivery across UX research, interaction design, component implementation, and accessibility audit."14---1516When this skill is invoked, orchestrate the frontend team through a structured delivery pipeline.1718**Decision Points:** At each phase, use `AskUserQuestion` to get user approval before proceeding.1920## Team Composition21- **ux-researcher** — User insights and validation22- **ux-designer** — User flows, wireframes, interaction design23- **frontend-developer** — Component implementation and integration24- **accessibility-specialist** — Accessibility audit and compliance2526## Pipeline2728### Phase 1: Research (if needed)29Delegate to **ux-researcher** (skip if sufficient prior research exists):30- Define what user behavior/pain-point this feature addresses31- Review any existing analytics or user feedback32- Output: Research brief with key insights3334### Phase 2: UX Design35Delegate to **ux-designer**:36- Define user flow (entry → states → exit)37- Create wireframes for all states (default, loading, error, empty, success)38- Specify interaction patterns and responsive breakpoints39- Define accessibility requirements40- Output: UX spec and wireframes for approval4142### Phase 3: Implementation43Delegate to **frontend-developer**:44- Build components following the approved UX spec45- Use design tokens — no hardcoded colors, sizes, or fonts46- Handle all states: loading, error, empty, success47- All user-facing strings through i18n layer48- Write component unit tests49- Output: Implemented UI feature5051### Phase 4: Accessibility Audit52Delegate to **accessibility-specialist**:53- Test keyboard navigation (tab order, focus management)54- Verify ARIA roles and labels55- Check color contrast (WCAG AA minimum)56- Test with screen reader if critical flow57- Output: Accessibility report5859### Phase 5: Polish & Review60- Address accessibility findings61- Verify responsive behavior at all target breakpoints62- Cross-browser test on target browsers63- **ux-designer** validates final implementation against spec6465## Output66Summary covering: research insights used, UX spec status, implementation status, accessibility compliance, and any outstanding issues.
tranhieutt