# React Component Reviewer

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

- Skill: `notysoty/react-component-reviewer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add notysoty/react-component-reviewer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/notysoty/react-component-reviewer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Notysoty (https://skillmd.com/u/notysoty)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/notysoty/react-component-reviewer

---


# 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:

```markdown
### 🚀 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)*