# React Component Reviewer

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

- **Type:** Skill
- **Install:** `agentstack add skill-notysoty-openagentskills-react-code-reviewer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Notysoty](https://agentstack.voostack.com/s/notysoty)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Notysoty](https://github.com/Notysoty)
- **Source:** https://github.com/Notysoty/openagentskills/tree/main/skills/react-code-reviewer

## Install

```sh
agentstack add skill-notysoty-openagentskills-react-code-reviewer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 `` or `` 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 `` element.
> 
> *(...continues with suggested refactor)*

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Notysoty](https://github.com/Notysoty)
- **Source:** [Notysoty/openagentskills](https://github.com/Notysoty/openagentskills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-notysoty-openagentskills-react-code-reviewer
- Seller: https://agentstack.voostack.com/s/notysoty
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.