react-next-best-practices

star 3.4k

React/Next.js 项目最佳实践:组件拆分、数据获取、性能、bundle、RSC、hydration 和路由。

OpenBMB By OpenBMB schedule Updated 6/9/2026

name: react-next-best-practices description: React/Next.js 项目最佳实践:组件拆分、数据获取、性能、bundle、RSC、hydration 和路由。

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.
Install via CLI
npx skills add https://github.com/OpenBMB/PilotDeck --skill react-next-best-practices
Repository Details
star Stars 3,432
call_split Forks 356
navigation Branch main
article Path SKILL.md
More from Creator