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

react-next-best-practices

GitHub

提供React/Next.js项目创建、审查和重构的最佳实践指南，涵盖组件拆分、数据获取、渲染模型、状态管理、性能优化及无障碍访问等核心领域。

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

创建React或Next.js应用审查前端代码规范重构现有前端架构

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

更多选项

不安装直接使用

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.