vercel-react

Apply Vercel performance optimization rules to React and Next.js code.

11|1|Updated Aug 6, 2025
One-click install
npx skills add https://github.com/thkt/dotclaude --skill vercel-react
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react
Source: https://github.com/thkt/dotclaude/tree/main/skills/vercel-react
Command: npx skills add https://github.com/thkt/dotclaude --skill vercel-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a curated set of rules and best practices from Vercel Engineering to significantly improve the performance of React and Next.js applications.

Core Features & Use Cases

  • Performance Rule Index: Comprehensive guidelines covering critical areas like eliminating waterfalls, reducing bundle size, optimizing server-side rendering, and improving client-side data fetching.
  • Targeted Application: Applicable during code writing, review, or refactoring of React components, Next.js pages, data fetching logic, and bundle optimization strategies.
  • Use Case: When developing a new feature in a Next.js application, use this Skill to ensure that all data fetching is optimized to prevent waterfalls and that dynamic imports are used effectively to minimize the initial bundle size.

Quick Start

Fetch the 'async-parallel' rule from the Vercel React performance skill.

Frequently Asked Questions about vercel-react

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?

To optimize React and Next.js performance during code review, apply Vercel engineering rules targeting waterfalls, bundle size reduction, server-side rendering efficiency, and client-side data fetching strategies.

What is the best way to eliminate data fetching waterfalls in Next.js?

The best way to eliminate data fetching waterfalls in Next.js is to fetch 'async-parallel' data, preventing sequential requests and ensuring efficient client-side data fetching strategies.

How do I reduce bundle size in a React application?

Reduce React bundle size by using dynamic imports effectively and enforcing optimization rules for React components, which minimizes the initial bundle size delivered to the client.

Can I use these performance rules for server-side rendering optimization?

Yes, you can use these rules for server-side rendering optimization, as the guidelines specifically address rendering efficiency alongside bundle size and data fetching strategies.

When do I need to apply dynamic imports in Next.js development?

You need to apply dynamic imports in Next.js development when adding new features to ensure effective bundle optimization and minimize the initial bundle size, preventing unnecessary client-side loading.