How does it handle re-render optimization?

It analyzes component structures to find unstable dependencies, identifies missing memoization opportunities, and suggests functional state updates to prevent unnecessary cycles.

Is this skill compatible with the Next.js App Router?

Yes, it specifically includes rules for Server Components, data fetching, and the 'after()' function used in modern Next.js versions.

What makes this skill different from standard React linting?

While linters catch syntax and basic errors, this skill applies deep architectural patterns like async waterfall elimination and server-side cache strategies that standard linters often miss.

Can it help reduce my JavaScript bundle size?

Absolutely. It includes specific rules for avoiding barrel imports and implementing dynamic loading for heavy components to ensure faster hydration.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: claudiodearaujo

byclaudiodearaujo

开发者工具

Optimizes React and Next.js applications using 45 high-impact performance rules curated by Vercel Engineering.

关于

This skill provides a comprehensive framework for writing, reviewing, and refactoring React and Next.js code to ensure peak performance. Based on Vercel Engineering standards, it guides Claude to eliminate async waterfalls, optimize bundle sizes, and improve server-side execution. It is particularly useful when scaling production applications, reducing load times, or debugging complex re-rendering issues through automated code analysis and structured refactoring patterns following industry-leading performance benchmarks.

主要功能

Efficient rendering techniques including content-visibility and SVG precision optimization
Server-side performance tuning through React cache and serialization optimization
Advanced re-render prevention using memoization and stable callback patterns
0 GitHub stars
Async waterfall elimination via parallel processing and deferred awaits
Bundle size reduction using dynamic imports and barrel file avoidance

使用场景

Refactoring legacy Next.js pages to improve Core Web Vitals and PageSpeed scores
Conducting automated code reviews to catch performance bottlenecks before deployment
Generating new React components that follow Vercel's latest architectural patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter react-best-practices

For use in Claude.ai and ChatGPT

Download Skill

GitHub

关于