---
name: react-vite-frontend
description: React + Vite frontend review/debug — re-render, state, a11y, bundle, HMR, env, prod build.
---

# React + Vite Frontend

## Ortak Doktrin

`agents/shared/severity-rubric.md` ve `agents/shared/escalation-matrix.md` default-load
sayılır (`agents/coordination.md` §11). Bu skill'in çıktısı **Critical / High / Medium /
Low + kanıt** formatında olmak zorunda — spekülatif Critical yasak. Sahiplik dışı bulgu
ilgili agent'a delege; karar yetkisi eşiği aşılırsa **kullanıcı onayı zorunlu**.

## Ne Zaman Kullanılır
- Yavaş sayfa
- Profiler render fırtınası
- HMR çalışmıyor
- Bundle şişmesi
- Prod build sorunu (boş ekran, asset 404)
- A11y audit

## Workflow
1. **React**
   - DevTools Profiler -> en çok render eden komponent
   - Inline obj/arr prop tara
   - `useEffect` data fetch -> server state lib
   - State leveli (lokal/lift/server)
2. **Vite**
   - `vite.config.ts` proxy, base, build.target, manualChunks
   - `.env*` + `VITE_` prefix
   - HMR: file watcher, polling, hmr.clientPort
3. **Bundle**
   - `rollup-plugin-visualizer` analiz
   - Vendor split
   - Lazy load route (`React.lazy` + `Suspense`)
4. **A11y**
   - axe-core dev
   - Tab order, focus-visible, aria-label

## Checklist
- [ ] Inline obj/arr prop yok memoized child'da
- [ ] List key stable id
- [ ] Server state TanStack Query
- [ ] Form react-hook-form + zod
- [ ] Bundle <500KB ana chunk
- [ ] Route lazy
- [ ] Sourcemap prod (Sentry)
- [ ] base path doğru (subpath deploy)
- [ ] index.html no-cache, assets immutable

## Antipattern
- `useEffect(fetch, [])` data lib yerine
- `useMemo` profil olmadan
- `useState` server state için
- Context value `{ ... }` her render yeni
- `dangerouslySetInnerHTML` sanitize yok
- `key={index}` reorder list'te
- `process.env.VAR` Vite'da (kullan `import.meta.env`)
- `VITE_SECRET_*` -> bundle'a gömülür

## Örnek Agent Davranışı
```
User: bundle 2.4MB, lighthouse score düşük
Agent:
1. visualizer çalıştır -> moment.js 280KB, lodash full 70KB, recharts 350KB
2. Suggest: dayjs, lodash-es + tree-shake, recharts'ı dashboard route'a lazy
3. manualChunks vendor split
4. Diff vite.config.ts
5. Re-build bundle ölç
```

## Çıktı Formatı
```markdown
# Frontend Review: <area>

## Bulgular
## Diff
## Beklenen kazanım (metric)
```