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 ...