React code reviewer

Skill Notysoty/openagentskills/skills/react-code-reviewer

A community-driven library of reusable AI agent skills for Claude Code, Cursor, Codex, Cline, and more.

Install

npx -y skills add Notysoty/openagentskills --skill react-code-reviewer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.5 KB, as published. Nobody here has run it

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:

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.
Analyze Hooks: Ensure useEffect dependencies are complete and correct. Check for race conditions in asynchronous effects.
Analyze Accessibility: Verify that interactive elements use <button> or <a> with proper href. Ensure images have alt text. Check for keyboard navigability.
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)