What are the audit rules based on?

The rules are sourced from Vercel Engineering's high-performance React guidelines, ensuring your code aligns with industry-leading standards.

Can it help reduce my JavaScript bundle size?

Yes, it identifies barrel file issues, heavy dependencies that should be dynamically imported, and non-critical libraries that can be deferred.

What does the React Best Practices skill audit?

It scans React and Next.js code for 57 specific performance rules, covering request waterfalls, bundle size, server-side performance, data fetching, and re-render optimization.

Does this skill support Next.js App Router?

Yes, it includes specific audits for React Server Components (RSC), Server Actions, and React.cache() patterns used in the Next.js App Router.

How are the audit results presented?

Violations are reported with their priority level, file location, a description of the issue, and a code example showing the recommended fix.

React Performance & Best Practices Audit

Name: React Performance & Best Practices Audit
Author: kriscard

bykriscard

•

Developer Tools

Audits React and Next.js applications using 57 Vercel-inspired rules to eliminate performance bottlenecks and optimize rendering.

This skill provides an automated auditing framework for React and Next.js projects, leveraging a comprehensive set of 57 rules sourced from Vercel Engineering. It systematically identifies critical performance issues such as request waterfalls, excessive bundle sizes, and unnecessary re-renders, while offering actionable fixes for server-side performance and JavaScript efficiency. It is an essential tool for developers looking to validate code quality before shipping, debug slow components, or ensure modern patterns like React Server Components (RSC) and Server Actions are implemented correctly.

Key Features

01Comprehensive 57-rule audit categorized by Critical, High, Medium, and Low priority

022 GitHub stars

03Detection and resolution of sequential request waterfalls to improve TBT

04Optimization for Next.js features including RSC, Server Actions, and caching

05Analysis of bundle size issues with recommendations for dynamic imports

06In-depth re-render profiling for state management and hook optimization

Use Cases

01Conducting a pre-production performance review for Next.js applications

02Ensuring data-fetching patterns follow modern parallelization best practices

03Refactoring complex legacy React components to reduce unnecessary re-renders

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kriscard/kriscard-claude-plugins react-best-practices

For use in Claude.ai and ChatGPT

Download Skill