skills.rest
austinlparker
austinlparkerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React/Next.js performance best practices across code reviews and refactors.

Updated Aug 27, 2026
Search Tags:#performance#react#next.js#refactor#guidelines#code-review#bundle-size
One-click install
npx skills add https://github.com/austinlparker/dotfiles --skill vercel-react-best-practices-austinlparker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/austinlparker/dotfiles/tree/main/dot_claude/skills/react-best-practices
Command: npx skills add https://github.com/austinlparker/dotfiles --skill vercel-react-best-practices-austinlparker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to missed optimizations, large bundles, and poor data-fetching patterns. This skill provides a structured playbook of best practices to consistently apply performance guidelines and enable AI-assisted reviews.

Core Features & Use Cases

  • Structured guidance: A comprehensive collection of rules across 8 priority categories to guide code generation, reviews, and refactors.
  • Automation-friendly: YAML frontmatter metadata and clear rule patterns support AI-driven workflows.
  • Use cases: Ideal for writing, reviewing, or refactoring React components, Next.js pages, and data-fetching pipelines to improve TTI/LCP and UX.

Quick Start

Use this skill to assess a React/Next.js codebase for performance patterns and generate a checklist of actionable improvements.

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 identify performance bottlenecks in React and Next.js applications?▼

Performance bottlenecks in React and Next.js stem from missed optimizations like unnecessary re-renders, large bundle sizes, and inefficient data-fetching patterns. This skill provides a structured playbook of best practices across 8 priority categories to systematically identify and address these issues during code reviews and refactors, improving TTI and LCP metrics.

What are the key React performance best practices for reducing bundle size?▼

React bundle size reduction involves code-splitting, lazy loading components, tree-shaking unused code, and optimizing dependencies. This skill applies proven guidelines to help you review and refactor React components and Next.js pages to achieve smaller bundles and faster load times.

How can I optimize Next.js data-fetching to improve page speed?▼

Next.js data-fetching optimization requires choosing the right strategy—getStaticProps, getServerSideProps, or client-side fetching—based on your content freshness needs. This skill guides you through evaluating and refactoring data-fetching pipelines to balance performance and user experience.

Can I use this skill to automate React performance reviews in code generation workflows?▼

Yes. The skill uses YAML frontmatter metadata and clear rule patterns designed to support AI-driven workflows, making it ideal for automating performance-focused code reviews and generating optimized React components and Next.js pages consistently.

What's the best way to apply performance guidelines across an existing React codebase?▼

Use this skill to assess your React and Next.js codebase systematically against 8 priority categories of best practices, then generate a prioritized checklist of actionable improvements for refactoring components, pages, and data-fetching strategies.

Do I need to refactor my entire Next.js application to see performance gains?▼

No. This skill helps you identify and prioritize high-impact optimizations, allowing incremental refactoring of the most critical React components and Next.js pages first to achieve measurable improvements in speed and resource efficiency.

Related Skills

Explore More Software Engineering Skills→
ligianehualigianehua

benchmark

Detect web performance regressions by comparing current metrics against established baselines.

Community
Advanced
dreamingechoesdreamingechoes
2

performance-optimization

Measure, profile, and fix performance bottlenecks in web apps, APIs, and database queries.

Community
Advanced
wannysimwannysim

perf-optimization

Optimize rendering performance and bundle size in React and Next.js applications.

Community
Intermediate
julianobarbosajulianobarbosa
7

reviewing-code

Review code for quality, bugs, security issues, and best practices using Codex.

Community
Advanced