Dokumentasi lengkap untuk React Frontend Developer Agent (@frontend-react).

• Tentang Agent
• Cara Aktivasi
• Stack yang Didukung
• Skills
• Contoh Penggunaan
• Tips & Best Practices
• Referensi Lanjutan

React Frontend Developer Agent adalah subagent spesialis untuk pengembangan frontend menggunakan React.js / Next.js / Vite. Agent ini dipanggil oleh IT Leader (leader) ketika project membutuhkan frontend berbasis React.

Stack utama:

• React 19 + TypeScript strict
• Next.js 15 (App Router) — Server Components, Server Actions, Route Handlers
• Vite + React plugin
• Tailwind CSS v4
• shadcn/ui component library
• TanStack Query (data fetching)
• Zustand (state management)
• React Hook Form + Zod (form validation)
• Framer Motion (animations)

IT Leader akan otomatis mendelegasikan task ke @frontend-react ketika project menggunakan React/Next.js.

@frontend-react [deskripsi task]

Setiap session, agent akan load:

1. coding-standards — Universal coding standards
2. frontend-patterns — React/Next.js patterns
3. impeccable — Impeccable design intelligence
4. web-design-guidelines — UI/UX compliance

• shadcn-ui — shadcn/ui components
• vercel-react-best-practices — React performance optimization
• vercel-composition-patterns — Component composition patterns
• building-components — Component library creation
• security-review — Auth/user input security
• tdd-workflow — Test-driven development

@frontend-react Buat ProductCard component:
- Props: product (name, price, image, rating)
- Variants: default, loading, error
- Responsive: mobile-first
- Animasi: hover scale
- Accessibility: ARIA labels

@frontend-react Setup TanStack Query untuk products page:
- GET /api/products — list with pagination
- GET /api/products/[id] — single product
- POST /api/products — create
- Handle loading, error, empty states

@frontend-react Buat CreateProduct form:
- Fields: name, description, price, category
- Validation: Zod schema
- Submit: Server Action
- States: idle, submitting, success, error

@frontend-react Buat ProductList sebagai Server Component:
- Fetch langsung dari database
- Search params untuk filter
- Streaming dengan Suspense
- Revalidation periodik

@frontend-react Load `vercel-react-best-practices` dan audit:
- Bundle size
- Re-render patterns
- Image optimization
- Code splitting

Gunakan Server Components secara default. Tambah 'use client' hanya ketika membutuhkan:

• Browser APIs (localStorage, event handlers)
• useState / useEffect
• onClick / onChange
• Custom hooks dengan browser APIs

• Server Components: fetch() langsung dengan next.revalidate
• Client Components: TanStack Query untuk caching & refetch
• Mutations: Server Actions (Next.js) atau TanStack Query mutations

• Server State: Server Components + TanStack Query
• Client State: Zustand untuk global state
• Form State: React Hook Form
• URL State: useSearchParams / useParams

• Gunakan shadcn/ui components sebagai base
• Custom components via composition
• Props interface dengan TypeScript strict
• Gunakan React.memo hanya untuk expensive renders

• Semantic HTML elements
• ARIA labels untuk interactive elements
• Keyboard navigation
• Color contrast WCAG 2.1 AA
• Focus management untuk modals