react-next-best-practices

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

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/OpenBMB/PilotDeck --skill react-next-best-practices

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

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

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.