react-best-practices

Name: react-best-practices
Availability: InStock
Author: arth

Review React and Next.js TSX files for performance, accessibility, hook, and component-pattern issues.

1|Updated Apr 19, 2026

Search Tags:#performance #accessibility #react #hooks #nextjs #code-review #tsx

Ready to run

npx skills add https://github.com/arthtyagi/onloop --skill react-best-practices-arthtyagi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/arthtyagi/onloop/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/arthtyagi/onloop --skill react-best-practices-arthtyagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams review, refactor, and generate React and Next.js code with stronger performance, better accessibility, and more reliable component patterns. It turns broad React quality checks into a repeatable checklist so common issues are caught before they ship.

Core Features & Use Cases

Component quality reviews: checks structure, props, composition, and memoization patterns across TSX files.
Hook and state guidance: flags risky effect dependencies, stale closures, unnecessary renders, and misuse of state or refs.
Performance and accessibility checks: surfaces waterfalls, bundle bloat, rendering inefficiencies, and basic accessibility gaps in UI code.
Use case: Use it after editing multiple React components to get a focused review that highlights the highest-impact fixes first.

Quick Start

Review these TSX components and return the most important performance, accessibility, hook, and TypeScript fixes in priority order.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

How do I review React components for performance and accessibility issues?▼

React component reviews evaluate TSX files to detect performance bottlenecks, accessibility gaps, and hook dependency issues. The review applies checklist-driven guidance to structure, memoization, and rendering behavior, prioritizing the highest-impact fixes for multi-file edits.

What are common React hook dependency issues and how do I fix them?▼

React hook dependency issues include stale closures, risky effect dependencies, and unnecessary renders. Hook guidance flags these state and ref misuses during code reviews, applying checklist patterns to identify and correct unreliable component behaviors.

Does this React code review work with Next.js and TypeScript files?▼

Yes, the React code review works with Next.js and TSX files, applying TypeScript patterns to check component composition, props, and structure. It reviews multi-file edits across React component directories to detect legacy UI-library patterns.

What's the best way to refactor React components for better rendering behavior?▼

Refactoring React components for better rendering behavior involves checking memoization patterns, hook dependencies, and component composition. The review process surfaces rendering inefficiencies and bundle bloat, returning priority-ordered fixes for UI code generation.

When do I need to check React code for accessibility gaps?▼

You need to check React code for accessibility gaps during component refactors and UI reviews. The review process surfaces basic accessibility issues alongside performance waterfalls, ensuring common quality problems are caught before shipping.

Why does my React component review flag memoization patterns?▼

React component reviews flag memoization patterns to prevent unnecessary renders and optimize rendering behavior. The checklist-driven guidance evaluates props and composition structure across TSX files to identify inefficiencies and improve overall performance.