Senior Front End Software Engineer
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-engineer or senior-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
cva or 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
1---2name: senior-frontend-software-engineer3description: Guides senior front-end software engineering—TypeScript/React/Next.js architecture, component design, client and server rendering, state and data fetching, styling and design systems, accessibility (WCAG), performance (Core Web Vitals), testing, and senior-level UI code review. Use when building or refactoring complex UIs, designing component APIs, optimizing LCP/INP/CLS, implementing accessible interactions, integrating design tokens, or reviewing front-end PRs—not for backend APIs or databases (fullstack-software-engineer, senior-fullstack-developer), design-only critiques without implementation, CI/CD (devops), or cross-service system RFCs (senior-software-engineer). For implementing screens from design specs, component states, and visual QA, use ui-software-engineer. Deep perf investigations and load/RUM analysis: performance-engineer.4---56# Senior Front End Software Engineer78## When to Use910- Complex React/Next.js features, layouts, or design-system components11- Front-end architecture decisions (state, composition, RSC vs client)12- Performance work: bundle size, waterfalls, Core Web Vitals13- Accessibility fixes and WCAG-oriented implementation14- Senior front-end PR review (correctness, a11y, maintainability)1516## When NOT to Use1718- End-to-end feature needing new API and schema → `fullstack-software-engineer` or `senior-fullstack-developer`19- Pure visual/design direction without code → design review workflows20- Infrastructure, deploy, or monitoring setup → `devops`21- Multi-service backend design → `senior-software-engineer`2223## Related skills2425| Need | Skill |26|---|---|27| Full-stack slice (API + UI) | `fullstack-software-engineer`, `senior-fullstack-developer` |28| Cross-cutting engineering design | `senior-software-engineer` |29| Docs and UI copy in product docs | `tech-writer-researcher` |30| Pipeline and preview deploys | `devops` |31| UX flows and design specs | `product-designer` |32| UI implementation from specs | `ui-software-engineer` |33| RUM/load investigation and perf reports | `performance-engineer` |34| Browser auth, CSRF, CORS, session cookies | `web-application-developer` |35| Authorized web/API security testing context | `web-pentester` |3637## Core Workflows3839### 1. Component and feature design40411. Map user flows to routes and layout boundaries422. Split **server** (data fetch, static) vs **client** (interaction) deliberately433. Define component API: props, slots, variants, controlled vs uncontrolled444. Plan states: loading, empty, error, partial success455. Align with design tokens; avoid one-off magic values4647**See `references/component_architecture.md` for composition patterns.**4849### 2. State and data fetching5051| Need | Prefer |52|---|---|53| Server data | RSC fetch, Server Actions for mutations |54| Client cache | TanStack Query or similar with stale times |55| URL state | Search params for shareable filters |56| Global UI | Minimal context; colocate state |5758Avoid prop drilling through deep trees—compose or use context at stable boundaries.5960**See `references/state_data_fetching.md` for waterfalls and cache invalidation.**6162### 3. Styling and design system6364- Use design tokens (spacing, color, typography) from system65- Variants via `cva` or equivalent; document in Storybook if present66- Responsive and dark mode from tokens, not duplicated rules67- Do not fork components without team agreement6869**See `references/design_system.md` for extension rules.**7071### 4. Accessibility and quality7273- Semantic HTML first; ARIA only when needed74- Keyboard: focus order, focus visible, escape to close75- Labels on every input; announce dynamic updates thoughtfully76- Target WCAG 2.1 AA for customer-facing flows7778**See `references/a11y_performance.md` for checklist and metrics.**7980### 5. Performance8182- Measure before optimizing (Lighthouse, Web Vitals, bundle analyzer)83- Fix waterfalls: parallelize fetches, hoist server data84- Code-split routes and heavy widgets85- Images: dimensions, modern formats, priority for LCP8687**See `references/a11y_performance.md` for INP and CLS tactics.**8889### 6. Testing and review9091| Layer | Focus |92|---|---|93| Unit | Hooks, formatters, reducers |94| Component | React Testing Library—behavior not implementation |95| E2E | Critical journeys only |9697**PR review:** a11y, edge states, unnecessary client boundaries, bundle impact, test gaps.9899**See `references/frontend_code_review.md` for review rubric.**100101## When to load references102103- **Components and composition** → `references/component_architecture.md`104- **State and fetching** → `references/state_data_fetching.md`105- **Design system** → `references/design_system.md`106- **A11y and performance** → `references/a11y_performance.md`107- **Code review** → `references/frontend_code_review.md`
daemon-blockint-tech