{"id":"5c7e3b6d-6016-42a7-8f61-e288fcfcf9b5","shortId":"wKRKPr","kind":"skill","title":"React Component Reviewer","tagline":"Analyzes React components for performance, accessibility, and modern hook usage.","description":"# React Component Reviewer\n\n## What this skill does\n\nThis skill directs the agent to review a specific React component or file against modern React best practices. It specifically checks for:\n- Unnecessary re-renders (missing `useMemo`/`useCallback`)\n- Accessibility violations (missing ARIA attributes, improper semantics)\n- Stale closures in `useEffect` or event handlers\n- Prop drilling that could be solved with Context or component composition\n- Proper TypeScript typing\n\n## How to use\n\n### Claude Code / Antigravity\n\nCopy this file to `.agents/skills/react-code-reviewer/SKILL.md` in your project.\nThen ask the agent: *\"Review `components/MyComponent.tsx` using the React Component Reviewer skill.\"*\n\n### Cursor\n\nAdd this prompt to your `.cursorrules` file or save it as a custom prompt in the Cursor AI pane.\n\n## The Prompt / Instructions for the Agent\n\nWhen asked to review a React component, follow these exact steps:\n\n1. **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.\n2. **Analyze Hooks:** Ensure `useEffect` dependencies are complete and correct. Check for race conditions in asynchronous effects. \n3. **Analyze Accessibility:** Verify that interactive elements use `<button>` or `<a>` with proper `href`. Ensure images have `alt` text. Check for keyboard navigability.\n4. **Format Output:** Present your review in the following markdown format:\n\n```markdown\n### 🚀 Performance\n- [List findings here]\n\n### ♿ Accessibility\n- [List findings here]\n\n### 🏗️ Architecture & Best Practices \n- [List findings here]\n\n### 💡 Suggested Refactor\nProvide the refactored code block here.\n```\n\n## Example\n\n**Input to Agent:**\n> \"Please review the UserProfile.tsx component.\"\n\n**Output from Agent:**\n> ### 🚀 Performance\n> - 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`.\n> \n> ### ♿ Accessibility\n> - The \"Save\" div acts as a button but lacks `role=\"button\"` and `tabIndex={0}`. It should be a `<button>` element.\n> \n> *(...continues with suggested refactor)*","tags":["react","code","reviewer","openagentskills","notysoty","agent-skills","claude","claude-code","claude-skills","cline","cursor","llm"],"capabilities":["skill","source-notysoty","skill-react-code-reviewer","topic-agent-skills","topic-claude","topic-claude-code","topic-claude-skills","topic-cline","topic-cursor","topic-llm","topic-llm-skills","topic-skills"],"categories":["openagentskills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Notysoty/openagentskills/react-code-reviewer","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Notysoty/openagentskills","source_repo":"https://github.com/Notysoty/openagentskills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (2,280 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:13:23.960Z","embedding":null,"createdAt":"2026-05-18T13:20:45.615Z","updatedAt":"2026-05-18T19:13:23.960Z","lastSeenAt":"2026-05-18T19:13:23.960Z","tsv":"'0':304 '1':141 '2':176 '3':193 '4':214 'access':9,50,195,230,290 'act':294 'add':105 'agent':25,95,129,251,259 'agents/skills/react-code-reviewer/skill.md':88 'ai':122 'alt':208 'analyz':4,142,177,194 'antigrav':83 'architectur':234 'aria':53 'ask':93,131 'asynchron':191 'attribut':54 'best':37,235 'block':246 'bodi':167 'button':297,301 'calcul':155 'caus':274 'check':41,186,210 'child':273 'children':175 'claud':81 'closur':58 'code':82,245 'complet':183 'compon':2,6,15,31,73,101,136,256,268,285 'components/mycomponent.tsx':97 'composit':74 'condit':189 'context':71 'continu':310 'copi':84 'correct':185 'could':67,149 'cursor':104,121 'cursorrul':110 'custom':117 'defin':265 'definit':163 'depend':181 'deriv':151 'direct':23 'div':293 'drill':65 'effect':192 'element':199,309 'ensur':179,205 'event':62 'exact':139 'exampl':248 'expens':154 'file':33,86,111 'find':228,232,238 'follow':137,222 'format':215,224 'formatd':262 'function':263 'handler':63 'hook':12,178 'href':204 'identifi':152 'imag':206 'improp':55 'input':249 'insid':164,266 'instruct':126 'interact':198 'keyboard':212 'lack':299 'list':227,231,237 'look':145,160 'markdown':223,225 'memoiz':174 'miss':47,52 'modern':11,35 'move':282 'navig':213 'object/function':162 'output':216,257 'outsid':283 'pane':123 'pass':170,270 'perform':8,226,260 'pleas':252 'practic':38,236 'present':217 'project':91 'prompt':107,118,125 'prop':64,172 'proper':75,203 'provid':242 'race':188 're':45,277 're-rend':44,276 'react':1,5,14,30,36,100,135 'refactor':241,244,313 'render':46,144,166,278 'review':3,16,27,96,102,133,219,253 'role':300 'save':113,292 'semant':56 'skill':19,22,103 'skill-react-code-reviewer' 'solv':69 'source-notysoty' 'specif':29,40 'stale':57 'state':143,147 'step':140 'suggest':240,312 'tabindex':303 'text':209 'topic-agent-skills' 'topic-claude' 'topic-claude-code' 'topic-claude-skills' 'topic-cline' 'topic-cursor' 'topic-llm' 'topic-llm-skills' 'topic-skills' 'type':77 'typescript':76 'unnecessari':43,275 'usag':13 'use':80,98,200 'usecallback':49,289 'useeffect':60,180 'usememo':48,159 'userprofile.tsx':255 'verifi':196 'violat':51 'wrap':157,287","prices":[{"id":"4c1d14f9-5c9c-445f-b488-37f1181c21f4","listingId":"5c7e3b6d-6016-42a7-8f61-e288fcfcf9b5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Notysoty","category":"openagentskills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:20:45.615Z"}],"sources":[{"listingId":"5c7e3b6d-6016-42a7-8f61-e288fcfcf9b5","source":"github","sourceId":"Notysoty/openagentskills/react-code-reviewer","sourceUrl":"https://github.com/Notysoty/openagentskills/tree/main/skills/react-code-reviewer","isPrimary":false,"firstSeenAt":"2026-05-18T13:20:45.615Z","lastSeenAt":"2026-05-18T19:13:23.960Z"}],"details":{"listingId":"5c7e3b6d-6016-42a7-8f61-e288fcfcf9b5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Notysoty","slug":"react-code-reviewer","github":{"repo":"Notysoty/openagentskills","stars":8,"topics":["agent-skills","claude","claude-code","claude-skills","cline","cursor","llm","llm-skills","skills"],"license":"mit","html_url":"https://github.com/Notysoty/openagentskills","pushed_at":"2026-03-28T06:50:19Z","description":"A  community-driven library of reusable AI agent skills for Claude Code, Cursor, Codex, Cline, and more.","skill_md_sha":"68f4dcf94661887c8172ce5f5763e2e9b6d5d5c1","skill_md_path":"skills/react-code-reviewer/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Notysoty/openagentskills/tree/main/skills/react-code-reviewer"},"layout":"multi","source":"github","category":"openagentskills","frontmatter":{"name":"React Component Reviewer","description":"Analyzes React components for performance, accessibility, and modern hook usage."},"skills_sh_url":"https://skills.sh/Notysoty/openagentskills/react-code-reviewer"},"updatedAt":"2026-05-18T19:13:23.960Z"}}