react-next-best-practices

# React / Next.js Best Practices Use this skill when creating, reviewing, or refactoring React or Next.js applications. ## Focus Areas - Component boundaries: keep components cohesive and avoid unnecessary abstraction. - Data fetching: avoid waterfalls; keep server/client responsibilities explicit. - Rendering model: distinguish Server Components, Client Components, SSR, SSG, and dynamic routes. - State: keep local state local; avoid global state unless shared behavior requires it. - Performance: watch bundle size, memoization misuse, expensive renders, image loading, and caching. - Hydration: avoid browser-only values during server render unless guarded. - Accessibility: use semantic HTML before custom ARIA. - Testing: prefer targeted tests for changed behavior. ## Review Output Return concrete findings with file paths, severity, and suggested fixes. Avoid generic advice unless tied to the current code. ## PilotDeck Migration Note - Source inspiration: Vercel Agent Skills for React/Next.js workflows. - This is a PilotDeck-native draft, not a verbatim copy and is not Vercel-platform-specific.