skills.rest
junwen-k
junwen-kCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to codebases.

1|Updated Feb 2, 2026
Search Tags:#automation#performance#refactoring#react#next.js#best-practices#code-review
One-click install
npx skills add https://github.com/junwen-k/cookie-store --skill vercel-react-best-practices-junwen-k
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/junwen-k/cookie-store/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/junwen-k/cookie-store --skill vercel-react-best-practices-junwen-k

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized, actionable guide to identify and fix React and Next.js performance issues across components, data-fetching patterns, and bundles.

Core Features & Use Cases

  • 57 rules across 8 categories guiding AI-assisted refactoring and code reviews.
  • Use cases include optimizing server actions, suspense boundaries, and client rendering patterns to improve TTI and LCP.
  • It enables automated suggestions during code generation and peer reviews to enforce best practices.

Quick Start

To start, provide the path to a React component or Next.js page and request a performance-improvement pass.

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 code generation and refactoring?▼

To optimize React and Next.js performance, apply 57 best-practice rules across 8 categories to guide automated refactoring. Target server actions, suspense boundaries, and client rendering patterns to directly improve TTI and LCP metrics.

What is the best way to enforce React and Next.js best practices in code reviews?▼

The best way to enforce React and Next.js best practices in code reviews is using structured prompts for automated suggestions. This skill enables peer reviews to check data-fetching patterns and bundle optimization against established guidelines.

How do I fix Next.js server and client component rendering patterns for better LCP?▼

Fix Next.js server and client component rendering patterns by applying structured best-practice guidelines to optimize server actions and suspense boundaries. This improves LCP and TTI by correcting data-fetching and bundle optimization issues.

Can I use this skill to guide automated refactoring for an existing Next.js codebase?▼

Yes, you can use this skill to guide automated refactoring for an existing Next.js codebase. Provide the path to a React component or Next.js page and request a performance-improvement pass to receive structured refactoring suggestions.

What React bundle optimization techniques does this skill cover?▼

This React bundle optimization skill covers techniques across 8 categories, including 57 rules for data fetching, server/client patterns, and component optimization. It provides structured examples to reduce bundle size and improve loading metrics.

Related Skills

Explore More Software Engineering Skills→
cyhinversecyhinverse

vercel-react-best-practices

Apply prioritized React and Next.js performance rules across 8 categories.

Community
Advanced
DwsyDwsy
18

react-best-practices

Identify and implement React performance best practices for modern web applications.

Community
Advanced
bangdccebangdcce

vercel-react-best-practices

Apply best-practice patterns to optimize React and Next.js app performance.

Community
Advanced
MileniumTickMileniumTick

rust-best-practices

Apply idiomatic Rust best practices for ownership, borrowing, error handling, and testing.

Community
Advanced