skills.rest
yashraj22
yashraj22COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance optimization rules to components, pages, and data fetching.

1|Updated Mar 7, 2026
Search Tags:#performance#refactoring#react#next.js#vercel#best-practices#code-review
One-click install
npx skills add https://github.com/yashraj22/reflection --skill vercel-react-best-practices-yashraj22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/yashraj22/reflection/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/yashraj22/reflection --skill vercel-react-best-practices-yashraj22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This collection consolidates official performance optimization guidance for React and Next.js, helping teams avoid common pitfalls that slow apps and inflate bundles.

Core Features & Use Cases

  • 58 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation
  • Applied to React/Next.js components, pages, data-fetching, and bundle optimization
  • Supports automated tooling and human review to improve performance

Quick Start

Review the rules in AGENTS.md and apply them to your React/Next.js projects to optimize performance.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js performance during code review?▼

You can apply 58 prioritized rules across 8 categories to guide automated refactoring and code review for React and Next.js performance, targeting rendering, bundling, and runtime behavior.

What are the best practices for refactoring React components to improve rendering speed?▼

Best practices for refactoring React components involve applying Vercel's official performance optimization guidelines to data-fetching logic and component structures to maximize runtime rendering speed and reduce bundle size.

Can I use these Next.js performance patterns for automated code generation?▼

Yes, you can use these Next.js performance patterns for automated code generation by aggregating 58 rules across 8 categories to drive automated refactoring and code generation tooling.

Does this Vercel React best practices skill require any external dependencies?▼

No, the Vercel React best practices skill requires no external dependencies, only a SKILL.md manifest with a name and description at the root directory to function properly.

When should I apply Next.js data-fetching refactoring rules?▼

You should apply Next.js data-fetching refactoring rules when writing, reviewing, or refactoring pages and components to maximize performance across rendering, bundling, and runtime behavior.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
z4nr34lz4nr34l

vercel-react-best-practices

Audit React components and Next.js pages against Vercel performance best practices.

Community
Advanced
xiaoniuge36xiaoniuge36
6

code-review

Analyze code for standards compliance, bugs, performance issues, and security vulnerabilities.

Community
Advanced
angelcreativeangelcreative

optimize

Analyze application performance bottlenecks and provide optimization strategies for Core Web Vitals.

Community
Advanced