feat(skills): add vercel-react-best-practices skill#13424
feat(skills): add vercel-react-best-practices skill#13424
Conversation
Add React and Next.js performance optimization guidelines from vercel-labs/agent-skills. Installed via `npx skills add` with multi-agent support (.agents, .claude, .agent, .augment, .factory). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: suyao <sy20010504@gmail.com>
Only .agents/ and .claude/ are used in this project. Remove .agent/, .augment/, .factory/, skills/, and skills-lock.json that were auto-installed by `npx skills add --yes`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: suyao <sy20010504@gmail.com>
…ompat The .claude/skills/ directory requires real directories with copied SKILL.md files, not symlinks, for Windows compatibility. Replace the symlink with a proper directory structure matching existing skills. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: suyao <sy20010504@gmail.com>
|
Note This issue/comment/review was translated by Claude. This reveals a problem — skill synchronization only syncs skill.md and does not include other content in the skill directory. I suggest switching to a soft link, then merge. Original ContentThis reveals a problem - skill synchronization only syncs skill.md and does not include other content in the skill directory这揭示了一个问题——技能同步仅同步 skill.md 文件，而不包括技能目录中的其他内容。 我建议换成软链接，然后再merge 一下 |
|
Note This issue/comment/review was translated by Claude. Soft links are not enabled by default in Windows systems. When git pulls them down, they revert to text files containing path names, making them completely unusable. This was also the reason why soft links were not chosen for synchronization in the first place. Original Content软链接在windows系统中默认不开启，git拉下来会回退到包含路径名的文本文件，导致完全不可用。这也是当初没有选用软链接同步的理由。 |
|
Note This issue/comment/review was translated by Claude. However, perhaps soft-linking files other than SKILL.md might work, since agents primarily rely on SKILL.md metadata to identify skills. I can experiment with this tomorrow. Original Content不过或许软链接SKILL.md以外的文件是可行的，因为agent主要依赖SKILL.md的元信息来识别skill。明天可以实验一下 |
2 participants
What this PR does
Before this PR:
No React/Next.js performance best practices skill available for AI coding agents.
After this PR:
Adds the
vercel-react-best-practicesskill fromvercel-labs/agent-skills, providing 60+ React and Next.js performance optimization rules covering rendering, re-renders, bundling, async patterns, server components, and JS performance.Why we need it and why it was done in this way
The following tradeoffs were made:
server-*,async-api-routes) that are not applicable to our Electron + React project. We chose to keep them rather than fork/trim the skill, since: (1) AI agents will naturally ignore irrelevant rules based on context, (2) keeping the full skill makes future upstream updates easier, and (3) the ~50 React/JS/rendering/bundle rules provide significant value for our codebase.The following alternatives were considered:
Links to places where the discussion took place:
Breaking changes
None
Special notes for your reviewer
The skill is installed in
.agents/skills/vercel-react-best-practices/with a copiedSKILL.mdin.claude/skills/(real directory, not symlink, for Windows compatibility).public-skills.txtwas updated andpnpm skills:syncwas run to update.gitignorewhitelists.The skill contains 60+ markdown rule files covering categories: rendering, re-renders, bundle optimization, async patterns, server components, client patterns, and JS performance.
Rule applicability breakdown for our Electron + React project:
js-*(JS perf)rerender-*(React)rendering-*bundle-*client-*advanced-*async-*server-*(Next.js)Checklist
/gh-pr-review,gh pr diff, or GitHub UI) before requesting review from othersRelease note