react-vite-frontend

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ı

# Frontend Review: <area>

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