Agent Skills › OpenBMB/PilotDeck › react-next-best-practices

react-next-best-practices

GitHub

用于创建、审查或重构 React/Next.js 应用的最佳实践指南。涵盖组件拆分、数据获取、渲染模型（RSC/SSR）、状态管理、性能优化及无障碍访问，提供带路径和严重程度的具体审查反馈。

skills/react-next-best-practices/SKILL.md OpenBMB/PilotDeck

React 或 Next.js 项目代码审查 React/Next.js 应用重构建议前端最佳实践咨询

npx skills add OpenBMB/PilotDeck --skill react-next-best-practices -g -y

More Options

Use without installing

npx skills use OpenBMB/PilotDeck@react-next-best-practices

指定 Agent (Claude Code)

npx skills add OpenBMB/PilotDeck --skill react-next-best-practices -a claude-code -g -y

安装 repo 全部 skill

npx skills add OpenBMB/PilotDeck --all -g -y

预览 repo 内 skill

npx skills add OpenBMB/PilotDeck --list

Frontmatter

{
    "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.

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.

Return concrete findings with file paths, severity, and suggested fixes. Avoid generic advice unless tied to the current code.

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.