react-best-practices

Identify React best-practices issues in TSX/JSX components.

246|42|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/vercel/vercel-plugin --skill react-best-practices-vercel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/vercel/vercel-plugin/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/vercel/vercel-plugin --skill react-best-practices-vercel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

After editing multiple TSX/JSX components, teams gain a condensed, automated check that enforces React best-practices and surfaces quality gaps before merge.

Core Features & Use Cases

  • Consolidated review trigger: Run a condensed checklist after edits across multiple TSX components to surface issues early.
  • Multi-axis quality checks: Covers component structure, hooks usage, accessibility, performance, and TypeScript patterns.
  • Actionable feedback: Flags violations and provides concrete guidance to fix problems quickly.

Quick Start

Trigger the React best-practices reviewer after editing TSX components to receive a concise quality checklist.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my React components for best practices in TypeScript?

To check React components for best practices in TypeScript, trigger a consolidated quality checklist after editing TSX files to surface issues across structure, hooks, and TypeScript patterns.

What does a React best practices code review cover?

A React best practices code review covers component structure, hooks usage, accessibility, performance, and TypeScript patterns, flagging violations and providing concrete guidance to fix problems quickly.

When should I run a React TSX quality check?

You should run a React TSX quality check after editing multiple TSX or JSX components to gain a condensed, automated review that surfaces quality gaps and best-practices issues before merging.

How do I fix accessibility issues in React TSX components?

To fix accessibility issues in React TSX components, run a best-practices review that flags violations and returns structured guidance to guide immediate improvements within your current project context.

Can I use this to review React hooks usage and performance patterns?

Yes, you can use this to review React hooks usage and performance patterns because the multi-axis quality checks specifically evaluate hooks implementation and performance optimizations alongside TypeScript patterns.