Is this skill useful for standard React apps without Next.js?

While it contains Next.js specific rules, many of its categories—such as re-render optimization, JS performance, and client-side fetching—apply to any React project.

How does it help with Next.js bundle sizes?

The skill identifies barrel imports, suggests next/dynamic for heavy components, and helps defer third-party scripts to improve hydration speed.

What does the Vercel React Best Practices skill do?

It applies 58 high-impact performance rules to your React and Next.js code to ensure optimal speed, focusing on waterfalls, bundle sizes, and rendering efficiency.

Can it fix async waterfalls in my application?

Yes, it prioritizes parallelizing independent operations using Promise.all() and moving await calls into specific branches to prevent blocking execution.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: aimi-so

byaimi-so

•

開発者ツール

Optimizes React and Next.js applications using Vercel’s high-performance engineering standards and patterns.

This skill integrates Vercel’s authoritative performance optimization guidelines directly into your development workflow. It provides Claude with a comprehensive framework of 58 rules prioritized by impact, covering critical areas such as eliminating async waterfalls, bundle size reduction, server-side performance, and re-render optimization. Whether you are refactoring legacy Next.js pages or writing new React components, this skill ensures your code adheres to industry-leading patterns for speed, scalability, and optimal Core Web Vitals.

主な機能

01Eliminates async waterfalls using parallel fetching and Suspense boundaries.

02Improves JavaScript execution via loop optimization and property caching.

03Minimizes client-side re-renders using advanced memoization and state patterns.

04Reduces bundle sizes through dynamic imports and barrel file removal.

05Optimizes server-side performance with React cache and RSC serialization.

063 GitHub stars

ユースケース

01Performing automated code reviews to identify performance bottlenecks.

02Refactoring Next.js applications to improve performance and load times.

03Generating production-ready React components that follow Vercel's standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aimi-so/aimi-engineering-plugin react-best-practices

For use in Claude.ai and ChatGPT

主な機能

01Eliminates async waterfalls using parallel fetching and Suspense boundaries.

02Improves JavaScript execution via loop optimization and property caching.

03Minimizes client-side re-renders using advanced memoization and state patterns.

04Reduces bundle sizes through dynamic imports and barrel file removal.

05Optimizes server-side performance with React cache and RSC serialization.

063 GitHub stars

ユースケース

01Performing automated code reviews to identify performance bottlenecks.

02Refactoring Next.js applications to improve performance and load times.

03Generating production-ready React components that follow Vercel's standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aimi-so/aimi-engineering-plugin react-best-practices

For use in Claude.ai and ChatGPT