{"manifest":{"name":"React Component Reviewer","version":"1.0.0","description":"Deep review of React/TSX components against a 12-point checklist: hook violations, missing keys, ARIA attributes, memoization, prop drilling, missing dependencies, and more.","tags":["react","typescript","code-review","accessibility","hooks"],"standard":"agentskills.io","standard_version":"1.0","content_checksum":"46f301a35772c2d19a5c7cc0f5c2ed6a5a3434a90b84f0ab5a8ccca6af48832d","bundle_checksum":null,"metadata":{},"files":[]},"files":{"SKILL.md":"# React Component Reviewer\n\n> **Purpose:** Perform a deep, systematic review of a React TypeScript component (.tsx) against a specific 12-point checklist. Goes beyond generic code review to catch React-specific anti-patterns that general reviewers miss. Produces annotated findings with exact fix suggestions.\n\n---\n\n## Invocation\n\n```\n/react-review <file.tsx>\n```\n\n---\n\n## The 12-Point Checklist\n\n### 1. Hook Order Violations\n- Are hooks called conditionally or inside loops? (breaks Rules of Hooks)\n- Are hooks called in the same order on every render?\n\n### 2. Missing `key` Props in Lists\n- Every `.map()` that returns JSX must have a stable `key` prop\n- `key` must not be the array index when the list can reorder or filter\n\n### 3. Missing or Incorrect ARIA Attributes\n- Interactive elements (`<div onClick>`, `<span onClick>`) must have `role` and keyboard handlers\n- Images must have `alt` attribute (empty string `alt=\"\"` for decorative images)\n- Form inputs must have associated `<label>` via `htmlFor` or `aria-label`\n- Modal/dialog elements must have `aria-modal`, `role=\"dialog\"`, and focus trap\n\n### 4. Missing `React.memo` on Pure Components\n- Components that receive complex objects as props and re-render frequently\n- Components that are used inside lists and receive non-primitive props\n- Note: `memo` is not needed everywhere — flag only genuine candidates\n\n### 5. Prop Drilling Deeper Than 2 Levels\n- Props passed through 3+ component layers without being used in intermediate components\n- Suggest: React Context, component composition, or lifting state differently\n\n### 6. `useEffect` Missing Dependencies or Stale Closures\n- Variables used inside `useEffect` but not in the dependency array\n- Functions defined outside `useEffect` used inside without being in deps\n- Missing `useCallback` on functions passed as deps\n\n### 7. Unhandled Loading and Error States\n- Data-fetching components must render loading state (skeleton, spinner, or message)\n- Data-fetching components must render error state with actionable message\n- Empty state when data is `[]` or `null` should be handled\n\n### 8. Hardcoded Strings That Should Be Constants\n- URLs, error messages, magic numbers used directly in JSX\n- Strings used in multiple places without being defined as constants\n\n### 9. `any` Type Usage\n- Every `any` annotation in the component is a type safety hole\n- Suggest `unknown` with type narrowing, or proper interface definition\n\n### 10. Missing Null Checks on Optional Props\n- Optional chaining (`?.`) used but result not checked before rendering\n- Props that could be `undefined` rendered without a fallback\n\n### 11. Direct DOM Mutation\n- `document.getElementById()` or `document.querySelector()` inside a component\n- Suggest `useRef()` for DOM access\n\n### 12. Missing `Suspense` Boundary for Async Components\n- Components using `use()`, `React.lazy()`, or async Server Components\n- Must be wrapped in `<Suspense fallback={...}>` at the appropriate level\n\n---\n\n## Output Format\n\nFor each finding:\n\n```\n[SEVERITY] Checklist Item #N — file.tsx:line\nIssue: [what's wrong]\nFix: [exact code change or pattern to use]\n```\n\n**Severity:**\n- `CRITICAL` — Will cause runtime errors or accessibility failures\n- `HIGH` — Causes incorrect behavior or major UX issues\n- `MEDIUM` — Performance or maintainability concern\n- `LOW` — Style or minor improvement\n\nEnd with:\n\n```\n## Component Review Summary\nChecklist items reviewed: 12/12\nIssues found: [N] (Critical: N, High: N, Medium: N, Low: N)\nVerdict: APPROVE / REQUEST CHANGES / NEEDS MAJOR REWORK\n```\n\n---\n\n## Rules\n\n- All 12 checklist items must be evaluated — \"No issues\" is a valid finding for each\n- Don't flag `React.memo` absence unless there's genuine evidence of unnecessary re-renders\n- `key={index}` in a static, non-reorderable list is acceptable — flag only if the list can change\n- ARIA issues are always `HIGH` or `CRITICAL` — accessibility is not optional\n"}}