
from agent-skills13
A 69-rule performance checklist for React and Next.js from Vercel — use when writing, reviewing, or refactoring components, data fetching, and bundle strategies
This skill provides an opinionated, prioritized set of 69 rules and patterns for improving performance in React and Next.js apps. It covers eliminating fetch waterfalls, bundle-size reductions, server-side rendering and caching best practices, client-side data-fetch patterns, render/re-render optimization, and JS-level micro-optimizations. The guidance is concrete and includes rule-level examples suitable for automated refactors or human review.
Use this skill when authoring or reviewing React components and Next.js pages, diagnosing slow render paths, optimizing bundle size, converting synchronous fetches into parallel flows, or applying server-side caching and serialization improvements. It is appropriate for code review automation, linters, or when generating performant component code.
rules/ (has_references=false in fetch but sibling rules exists)Likely useful for code-focused agents and tools that generate or refactor JavaScript/TypeScript code (Copilot-style coding agents, Codex, Claude Code, Cursor/Codex harnesses).
A well-structured 69-rule React/Next.js performance checklist organized into 8 priority categories from Vercel. No scripts or executable code — purely a reference skill. Clear frontmatter, good progressive disclosure with rule prefixes, and specific trigger conditions. Broadly useful for any developer working with React/Next.js.
Reference-only skill with no executable content. Security is clean by definition. Quality and architecture scores reflect strong organization and clear instructions, though individual rule details are external files not included in the body. Useful for React/Next.js performance optimization guidance.