Analyzes React components for performance, accessibility, and modern hook usage.
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)*