Add Vercel React best practices skill with 45 optimization rules

[cseagraves]

Summary

This PR adds a comprehensive React and Next.js performance optimization skill to the agent system. The skill contains 45 rules organized across 8 priority categories, providing guidance for writing performant React/Next.js code.

Key Changes

• Added SKILL.md: Main skill definition with overview of all 45 rules organized by priority (CRITICAL, HIGH, MEDIUM-HIGH, MEDIUM, LOW-MEDIUM, LOW)
• Added 45 rule files across 8 categories:
  • Eliminating Waterfalls (5 rules): async-parallel, async-defer-await, async-dependencies, async-api-routes, async-suspense-boundaries
  • Bundle Size Optimization (5 rules): bundle-barrel-imports, bundle-dynamic-imports, bundle-defer-third-party, bundle-conditional, bundle-preload
  • Server-Side Performance (5 rules): server-cache-react, server-cache-lru, server-serialization, server-parallel-fetching, server-after-nonblocking
  • Client-Side Data Fetching (2 rules): client-swr-dedup, client-event-listeners
  • Re-render Optimization (7 rules): rerender-defer-reads, rerender-memo, rerender-dependencies, rerender-derived-state, rerender-functional-setstate, rerender-lazy-state-init, rerender-transitions
  • Rendering Performance (7 rules): rendering-animate-svg-wrapper, rendering-content-visibility, rendering-hoist-jsx, rendering-svg-precision, rendering-hydration-no-flicker, rendering-activity, rendering-conditional-render
  • JavaScript Performance (12 rules): js-batch-dom-css, js-index-maps, js-cache-property-access, js-cache-function-results, js-cache-storage, js-combine-iterations, js-length-check-first, js-early-exit, js-hoist-regexp, js-min-max-loop, js-set-map-lookups, js-tosorted-immutable
  • Advanced Patterns (2 rules): advanced-event-handler-refs, advanced-use-latest
• Added AGENTS.md: Compiled document with all rules expanded (2249 lines)

Implementation Details

Each rule file includes:

• Clear title and impact assessment
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references where applicable
• Consistent frontmatter with metadata (impact level, tags)

Rules are prioritized by performance impact, with CRITICAL rules (waterfalls, bundle optimization) at the top to guide automated refactoring and code generation. The skill is designed to be used when writing, reviewing, or refactoring React/Next.js code.

https://claude.ai/code/session_014QKGykX1gzoA6EetgDrfKG

[vercel]

@claude is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

This PR adds a comprehensive React and Next.js performance optimization skill containing 45 performance rules organized across 8 priority categories. The skill provides guidance for writing performant React/Next.js code with rules covering async operations, bundle optimization, server/client performance, and rendering patterns.

Changes:

• Added main skill definition with metadata and categorized rule overview
• Created 45 individual rule files with code examples across 8 performance categories
• Added compiled AGENTS.md document with all rules expanded for quick reference

Reviewed changes

Copilot reviewed 109 out of 871 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
.agent/skills/vercel-react-best-practices/SKILL.md	Main skill definition with overview of all 45 rules organized by priority
.agent/skills/vercel-react-best-practices/rules/*.md	45 individual rule files with incorrect/correct code examples
.claude/documents/guides-dec-2025/*.md	Context engineering guide and Claude Code setup documentation
.claude/commands/**/*.md	Various command definitions for project workflows
.claude/agents/*.md	Agent definitions for specialized tasks
.agent/skills/web-design-guidelines/SKILL.md	Web interface guidelines review skill

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The use() hook is experimental in React 19 and requires the experimental flag. Consider noting this requirement or providing a fallback pattern for production use.

Suggested change

	function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
	const data = use(dataPromise) // Unwraps the promise
	return <div>{data.content}</div>
	}
	function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
	const data = use(dataPromise) // Reuses the same promise
	async function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
	const data = await dataPromise // Unwraps the shared promise
	return <div>{data.content}</div>
	}
	async function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
	const data = await dataPromise // Reuses the same promise

[Copilot]

Add a note about Next.js version requirement for the after() function, as this is a relatively new API that may not be available in all Next.js versions.

[Copilot]

The optimizePackageImports configuration shown uses CommonJS (module.exports), but the comment states 'next.config.js' which could be either ESM or CJS. Consider showing both formats or noting the configuration file format.

[vercel]

Additional Suggestion:

MCP continue-task handler updates database but never triggers actual task continuation, leaving tasks stuck in 'processing' status forever.