React Component Reviewer

Analyzes React components for performance, accessibility, and modern hook usage.

Tags: react, code-review, performance

Category: coding

Listing attribution: simplyutils

Before using this resource

Attribution and license labels come from the listing metadata. Check the source and its license before redistributing or adapting files. The listing identifies MIT; confirm it applies to the specific files you need.

Read instructions before adding them to an agent or project. Test a small, non-confidential example and inspect the result. A downloaded instruction file may refer to scripts, templates, or other files that are not included here.

This instruction text matches the linked OpenAgentSkills revision. Its MIT license covers the upstream text; preserve the copyright and permission notice when sharing copies. Source matching does not establish successful operation in every listed application.

OpenAgentSkills MIT license notice

Read the MIT license notice
MIT License

Copyright (c) 2026 OpenAgentSkills Contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Source

Repository

React Component Reviewer

What this skill does

This skill directs the agent to review a specific React component or file against modern React best practices. It specifically checks for:

  • Unnecessary re-renders (missing useMemo/useCallback)
  • Accessibility violations (missing ARIA attributes, improper semantics)
  • Stale closures in useEffect or event handlers
  • Prop drilling that could be solved with Context or component composition
  • Proper TypeScript typing

How to use

Claude Code / Antigravity

Copy this file to .agents/skills/react-code-reviewer/SKILL.md in your project.

Then ask the agent: *"Review components/MyComponent.tsx using the React Component Reviewer skill."*

Cursor

Add this prompt to your .cursorrules file or save it as a custom prompt in the Cursor AI pane.

The Prompt / Instructions for the Agent

When asked to review a React component, follow these exact steps:

1. Analyze State & Renders: Look for state that could be derived. Identify any expensive calculations not wrapped in useMemo. Look for object/function definitions inside the render body that are passed as props to memoized children.

2. Analyze Hooks: Ensure useEffect dependencies are complete and correct. Check for race conditions in asynchronous effects.

3. Analyze Accessibility: Verify that interactive elements use <button> or <a> with proper href. Ensure images have alt text. Check for keyboard navigability.

4. Format Output: Present your review in the following markdown format:

### 🚀 Performance
- [List findings here]

### ♿ Accessibility
- [List findings here]

### 🏗️ Architecture & Best Practices 
- [List findings here]

### 💡 Suggested Refactor
Provide the refactored code block here.

Example

Input to Agent:

> "Please review the UserProfile.tsx component."

Output from Agent:

> ### 🚀 Performance

> - The formatDate function is defined inside the component and passed to a child, causing unnecessary re-renders. It should be moved outside the component or wrapped in useCallback.

>

> ### ♿ Accessibility

> - The "Save" div acts as a button but lacks role="button" and tabIndex={0}. It should be a <button> element.

>

> *(...continues with suggested refactor)*