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.