← ClaudeAtlas

code-reviewer-reactlisted

React frontend code review skill. Systematically reviews React + JSX/TSX component code, covering component design, Hook usage, render performance, Props typing, error boundaries, and frontend security. Use this skill when reviewing .tsx/.jsx files or .ts/.js files containing React component code. Applicable to React 18+, function components + Hooks pattern projects.
korbinjoe/cogents · ★ 1 · Code & Development · score 77
Install: claude install-skill korbinjoe/cogents
## Positioning Focused on **logic and structure review** of React + TypeScript frontend code. Checks whether code is correct, robust, and maintainable. Difference from `code-audit`: `code-audit` focuses on CSS/styling/visual aspects (spacing, colors, responsiveness); this skill focuses on JS/TS logic (component design, types, Hooks, performance, error handling). **Execution timing**: After code submission, before merge; or when user explicitly requests review **Scan scope**: Specified files, or file list obtained via `git diff` --- ## Review Process ### Step 1: Determine Review Scope Determine files to review by priority: 1. Files or directories explicitly specified by user 2. User mentions PR or branch → run `git diff --name-only <base>..HEAD` to get changed files 3. User says "look at recent changes" → run `git diff --name-only HEAD~1` to get last commit changes 4. None of the above → ask user which files to review Only review `.ts` / `.tsx` / `.js` / `.jsx` files. Skip test files (`*.test.*` / `*.spec.*`), type declaration files (`*.d.ts`), and config files. ### Step 2: Per-file Review Read the complete file content first, understand context, then check each item. Don't just look at the diff — local changes may introduce problems in the global context. Execute the following review items for each file. ### Step 3: Summary Report Generate a structured report using the output template at the bottom. --- ## Review Checklist ### 1. Component Design Good compone