When to Use
- Complex React/Next.js features, layouts, or design-system components
- Front-end architecture decisions (state, composition, RSC vs client)
- Performance work: bundle size, waterfalls, Core Web Vitals
- Accessibility fixes and WCAG-oriented implementation
- Senior front-end PR review (correctness, a11y, maintainability)
When NOT to Use
- End-to-end feature needing new API and schema →
fullstack-software-engineerorsenior-fullstack-developer - Pure visual/design direction without code → design review workflows
- Infrastructure, deploy, or monitoring setup →
devops - Multi-service backend design →
senior-software-engineer
Related skills
| Need | Skill |
|---|---|
| Full-stack slice (API + UI) | fullstack-software-engineer, senior-fullstack-developer |
| Cross-cutting engineering design | senior-software-engineer |
| Docs and UI copy in product docs | tech-writer-researcher |
| Pipeline and preview deploys | devops |
| UX flows and design specs | product-designer |
| UI implementation from specs | ui-software-engineer |
| RUM/load investigation and perf reports | performance-engineer |
| Browser auth, CSRF, CORS, session cookies | web-application-developer |
| Authorized web/API security testing context | web-pentester |
Core Workflows
1. Component and feature design
- Map user flows to routes and layout boundaries
- Split server (data fetch, static) vs client (interaction) deliberately
- Define component API: props, slots, variants, controlled vs uncontrolled
- Plan states: loading, empty, error, partial success
- Align with design tokens; avoid one-off magic values
See references/component_architecture.md for composition patterns.
2. State and data fetching
| Need | Prefer |
|---|---|
| Server data | RSC fetch, Server Actions for mutations |
| Client cache | TanStack Query or similar with stale times |
| URL state | Search params for shareable filters |
| Global UI | Minimal context; colocate state |
Avoid prop drilling through deep trees—compose or use context at stable boundaries.
See references/state_data_fetching.md for waterfalls and cache invalidation.
3. Styling and design system
- Use design tokens (spacing, color, typography) from system
- Variants via
cvaor equivalent; document in Storybook if present - Responsive and dark mode from tokens, not duplicated rules
- Do not fork components without team agreement
See references/design_system.md for extension rules.
4. Accessibility and quality
- Semantic HTML first; ARIA only when needed
- Keyboard: focus order, focus visible, escape to close
- Labels on every input; announce dynamic updates thoughtfully
- Target WCAG 2.1 AA for customer-facing flows
See references/a11y_performance.md for checklist and metrics.
5. Performance
- Measure before optimizing (Lighthouse, Web Vitals, bundle analyzer)
- Fix waterfalls: parallelize fetches, hoist server data
- Code-split routes and heavy widgets
- Images: dimensions, modern formats, priority for LCP
See references/a11y_performance.md for INP and CLS tactics.
6. Testing and review
| Layer | Focus |
|---|---|
| Unit | Hooks, formatters, reducers |
| Component | React Testing Library—behavior not implementation |
| E2E | Critical journeys only |
PR review: a11y, edge states, unnecessary client boundaries, bundle impact, test gaps.
See references/frontend_code_review.md for review rubric.
When to load references
- Components and composition →
references/component_architecture.md - State and fetching →
references/state_data_fetching.md - Design system →
references/design_system.md - A11y and performance →
references/a11y_performance.md - Code review →
references/frontend_code_review.md