---
name: senior-frontend
description: "Padrões senior de frontend dev — TypeScript strict, React patterns, state management mínimo, performance, a11y. Activates: react, nextjs, typescript, frontend dev, performance frontend, acessibilidade."
category: development
keywords: [react, nextjs, typescript, performance, a11y, frontend]
license: MIT
metadata:
  author: "Funnel Labs I.A — Anthony Nichols & André Cia"
  version: "1.0.0"
  consumed_by: [web-designer]
---

# Senior Frontend

Owned por `@web-designer`. Padrões production-grade pra interfaces.

## Princípios

1. **TypeScript strict** — `strict: true`, sem `any`, prefer `unknown` + narrow.
2. **State management mínimo** — useState local, Context só pra cross-cutting (auth, theme), Zustand/Redux só quando >5 stores diferentes.
3. **Server-first quando possível** (Next.js App Router) — Server Components reduzem bundle.
4. **Loading/error/empty states** sempre — toda UI async tem 3 estados visíveis.
5. **A11y não é opcional** — semantic HTML, keyboard nav, ARIA quando preciso, contrast ratio AA mínimo.

## Patterns críticos

- **Suspense + ErrorBoundary** — nunca renderizar fallback inline com `if (loading)`.
- **`useTransition`** para updates não-urgentes (filtros).
- **`useDeferredValue`** para search input.
- **Memoization** — só após medir; profiler primeiro, useMemo depois.
- **Form via React Hook Form** (não controlled state manual).

## Performance budgets

- LCP < 2.5s (mobile real device)
- INP < 200ms
- CLS < 0.1
- JS bundle inicial < 150KB gzip

## Anti-patterns

- ❌ `useState` aninhado em componente >200 linhas (split).
- ❌ `any` ou `as any` (use `unknown` + narrow).
- ❌ Effect dependencies omitidas (eslint-react-hooks).
- ❌ Inline functions em prop crítica de componente memoizado.
- ❌ `key={index}` em lista com mutações (key estável).

## Toolchain

- TypeScript 5+
- Vite ou Next.js 14+
- ESLint + Prettier
- React Hook Form
- TanStack Query (não Redux pra server state)
- Tailwind ou CSS Modules (não CSS-in-JS runtime pesado)

## Cross-skill

Quando design entrega Figma → ler specs antes de codificar (ver `frontend-design`).
Quando precisa otimizar perf → `web-performance-optimization`.
Quando precisa testar → `webapp-testing`.
