skills.rest
misty-step
misty-stepOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Provide React and Next.js performance optimization guidance for reviews and refactors.

13|3|Updated Mar 2, 2026
Search Tags:#automation#performance#react#refactor#nextjs#best-practices#code-review
One-click install
npx skills add https://github.com/misty-step/harness-kit --skill vercel-react-best-practices-misty-step
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/misty-step/harness-kit/tree/main/skills/.external/vercel-react-best-practices
Command: npx skills add https://github.com/misty-step/harness-kit --skill vercel-react-best-practices-misty-step

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This knowledge base provides AI-friendly guidance to optimize React and Next.js performance, helping teams identify bottlenecks, reduce bundles, and adopt scalable patterns.

Core Features & Use Cases

  • Performance rules cover waterfalls, bundle optimization, SSR/CSR strategies, rendering efficiency, and Next.js best practices.
  • Automation-ready guidance supports AI-assisted reviews, refactors, and code generation tasks.
  • Use Case: applying these guidelines during a Next.js page refactor to improve first paint and decrease bundle size.

Quick Start

Use the React best practices to quickly guide an evaluation of a sample component refactor.

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 a component refactor?▼

Optimize React and Next.js performance during a refactor by applying AI-friendly guidance targeting component design, data fetching, and build-time optimization to safely reduce bundles and improve rendering efficiency.

What are the best practices for reducing bundle size in modern Next.js projects?▼

Reducing bundle size in Next.js projects involves adopting scalable patterns for build-time optimization and rendering efficiency, helping teams identify bottlenecks and apply safe performance improvements.

Can I use this guidance to automate React code reviews for performance bottlenecks?▼

Yes, you can automate React code reviews for performance bottlenecks using this automation-ready guidance, which supports AI-assisted reviews, refactors, and automated code generation tasks.

How does this approach handle SSR and CSR strategies for scalable web applications?▼

This approach handles SSR and CSR strategies by providing performance rules covering waterfalls and rendering efficiency, enabling scalable and safe performance improvements across modern Next.js projects.

When do I need AI-friendly guidance for React performance optimization?▼

You need AI-friendly guidance for React performance optimization when your team must identify bottlenecks, reduce bundles, and adopt scalable patterns during codebase refactors, reviews, or automated code generation.

Related Skills

Explore More Software Engineering Skills→
qianleigoodqianleigood
30

vercel-react-best-practices

Audit React/Next.js apps for performance bottlenecks using Vercel best-practice rules.

Community
Advanced
sgcarstrendssgcarstrends
21

bundle-analysis

Analyze JavaScript bundle sizes and identify optimization opportunities for Next.js apps.

Official
Advanced
deadhearth01deadhearth01

vercel-react-best-practices

Identify and apply React/Next.js performance best practices to reduce render and load times.

Community
Advanced
masermediagroup-stackmasermediagroup-stack
1

vercel-react-best-practices

Apply 68 React and Next.js performance rules across eight categories.

Community
Advanced