---
name: frontend-squad
description: Use when building or refactoring frontend features that benefit from splitting layout, implementation, and review work across multiple Codex agents.
---

# Frontend Squad

Use this skill for React, Next.js, or other frontend work when the user explicitly wants multi-agent collaboration.

The goal is not "more agents"; the goal is faster progress with less collision.

## Frontend Split Strategy

Split along visual or structural boundaries, not arbitrary file counts.

Good splits:

- route shell vs feature section
- shared component updates vs page composition
- data wiring vs visual polish
- implementation vs verification

Bad splits:

- two workers editing the same component tree
- delegating the exact next blocking step away from the main agent
- parallelizing a tiny one-file change

## Recommended Flow

1. Main agent inspects framework, styling system, and target files.
2. Main agent decides the visual direction and integration plan.
3. Spawn an `explorer` if codebase conventions are unclear.
4. Spawn up to two `worker` agents with disjoint ownership when the task has independent slices.
5. Main agent handles shared glue, final polish, and verification.

## Suggested Worker Roles

### Worker A: Structure

Owns:

- route/page files
- layout composition
- section ordering
- data and prop wiring

### Worker B: Components

Owns:

- reusable UI components
- styling tokens
- motion or micro-interactions
- responsive refinements

### Optional Explorer: Conventions

Owns:

- identifying project patterns
- locating design system primitives
- tracing existing component usage

## Required Checks

- Match the existing framework and styling patterns.
- Preserve responsive behavior.
- Avoid generic UI choices when the task asks for strong frontend work.
- Run the relevant build or test command when possible.
- Report visual or behavioral risks if full verification is not possible.

## Prompt Template

When applying this skill, frame delegation like this:

"I will keep the integration path local. One worker owns the page shell and wiring, another owns reusable UI pieces and polish. If conventions are unclear, an explorer will map the existing patterns first."