React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Ask your Agent
Use this Skill: https://skilld.dev/gh/siberiacancode/agent-skills/react-best-practices
This session only. Nothing lands on disk.
≈141 tokens on demand. Your agent reads this file only when SKILL.md points to it.
Use React's <Activity> to preserve state/DOM for expensive components that frequently toggle visibility.
Usage:
import { Activity } from 'react'
function Dropdown({ isOpen }: Props) {
return (
<Activity mode={isOpen ? 'visible' : 'hidden'}>
<ExpensiveMenu />
</Activity>
)
}Avoids expensive re-renders and state loss.
Source: SKILL.md on GitHub
Signed by skilld at 53c8ff5. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.
Last checked against GitHub 2 weeks ago.
{
"author": "vercel",
"version": "1.0.0"
}