Shu
@shuding
5 new rules added to the React Best Practices skill, run: npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices to install/update it. https://t.co/FsG3bLppPV
28retweets
View on XVercel's React Best Practices Skill Gains Five New Performance Rules
· Updated
Vercel's
vercel-react-best-practices agent skill — packaged React and Next.js performance guidelines for AI coding agents — added 5 rules: server-hoist-static-io (HIGH impact) moves static I/O like fonts and config to module scope to prevent redundant fetches; rerender-no-inline-components avoids defining components inside components to stop unnecessary unmount cycles; rendering-resource-hints uses React DOM's preload, prefetchDNS, and preconnect APIs; rendering-script-defer-async defers scripts to prevent render-blocking; and js-flatmap-filter replaces .map().filter(Boolean) with .flatMap() for fewer array iterations.These rules extend coverage across server-side performance, re-render optimization, rendering performance, and advanced patterns — the skill's existing 8 categories. Coding agents loaded with this skill now surface violations of these patterns automatically when writing or reviewing React and Next.js code.
Load the updated skill into your coding agent and point it at a React or Next.js codebase — the agent applies these new rules alongside existing ones and suggests corrected patterns.
