generic-react-code-reviewer · diff
git:20251217.3f83b43 to git:20251217.1edc6e2
163 added, 39 removed. Audit A to A.
---
name: generic-react-code-reviewer
description: Review React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or reviewing pull requests.
---
# React Code Reviewer
Review React/TypeScript code against production quality standards.
- **Full Standards:** See [Code Review Standards](./../_shared/CODE_REVIEW_STANDARDS.md)
+ **Extends:** [Generic Code Reviewer](../generic-code-reviewer/SKILL.md) - Read base skill for full code review methodology, P0/P1/P2 priority system, and judgment calls.
- ## Pre-Commit Checklist
+ ## Pre-Commit Commands
- - [ ] Tests passing: `npm run test`
- - [ ] TypeScript passing: `npm run type-check`
- - [ ] Lint passing: `npm run lint`
- - [ ] Build succeeds: `npm run build`
- - [ ] No console errors/warnings
+ ```bash
+ npm run test # Unit tests
+ npm run type-check # TypeScript strict mode
+ npm run lint # ESLint/Prettier
+ npm run build # Production build
+ ```
## React-Specific Checks
- ### Type Safety
- - TypeScript strict mode enabled
- - No `any` types for user input
- - Validate all external data with `unknown` first
+ ### TypeScript Strict Mode
- ### State Management
- - Zustand/Redux state properly typed
- - Actions return void (update state directly)
- - Large data in IndexedDB (not localStorage)
+ ```typescript
+ // Required tsconfig.json settings
+ {
+ "compilerOptions": {
+ "strict": true,
+ "noImplicitAny": true,
+ "strictNullChecks": true
+ }
+ }
+ ```
+ - No `any` types for user input or API responses
+ - Validate external data with `unknown` first, then type guard
+ - Generic types over `any` in reusable utilities
+
### Component Patterns
- - Use existing design system components
- - Follow 4px base spacing
- - Support dark mode
- - Lazy load heavy components (>20KB)
- ## Performance Requirements
+ | Pattern | Check |
+ |---------|-------|
+ | Props | Interface defined, no `any` |
+ | State | Typed with Zustand/useState |
+ | Events | Typed event handlers |
+ | Refs | `useRef<ElementType>(null)` |
- - Bundle size < 100KB gzipped initial
- - GPU-accelerated animations only (transform/opacity)
- - Code splitting for large features
- - Memoize expensive calculations
+ ### Hook Dependency Arrays
- ## Accessibility (WCAG AA)
+ ```typescript
+ // P1 Issue: Missing dependencies
+ useEffect(() => {
+ fetchData(userId); // userId missing from deps
+ }, []); // ❌
- - Focus indicators on all interactive elements
- - Keyboard navigation (Tab, Enter, Escape, Arrows)
- - Color contrast >= 4.5:1
- - ARIA labels on icon-only buttons
- - Focus trapped in modals
+ // Correct
+ useEffect(() => {
+ fetchData(userId);
+ }, [userId]); // ✓
+ ```
- ## Surgical Simplicity
+ **Rule:** Enable `react-hooks/exhaustive-deps` ESLint rule.
- Changes should impact minimal code relevant to task only:
- - Every line intentional
- - No commented-out code
- - No dead code
- - Follow existing patterns
+ ### State Management (Zustand/Redux)
+ - Store slices properly typed
+ - Actions return void (update state directly)
+ - Selectors memoized for derived state
+ - Large data (>1MB) in IndexedDB, not localStorage
+
+ ### React Query/SWR Patterns
+
+ ```typescript
+ // Proper typing
+ const { data } = useQuery<User>({
+ queryKey: ['user', id],
+ queryFn: () => fetchUser(id),
+ });
+
+ // Check: staleTime, cacheTime configured
+ // Check: error boundaries for query failures
+ ```
+
+ ## Performance (P1)
+
+ ### Bundle Size Targets
+
+ | Target | Threshold |
+ |--------|-----------|
+ | Initial bundle | < 100KB gzipped |
+ | Lazy-loaded chunks | < 50KB each |
+ | Total JS | < 300KB |
+
+ ### Lazy Loading
+
+ ```typescript
+ // Heavy components (>20KB) MUST be lazy loaded
+ const HeavyChart = lazy(() => import('./HeavyChart'));
+ const RichTextEditor = lazy(() => import('./RichTextEditor'));
+
+ // Wrap in Suspense
+ <Suspense fallback={<Skeleton />}>
+ <HeavyChart />
+ </Suspense>
+ ```
+
+ ### Memoization
+
+ ```typescript
+ // Expensive calculations
+ const sortedItems = useMemo(() =>
+ items.sort((a, b) => a.date - b.date),
+ [items]
+ );
+
+ // Callback stability for child components
+ const handleClick = useCallback(() => {
+ doSomething(id);
+ }, [id]);
+
+ // Component memoization (when props are stable)
+ export const Item = memo(function Item({ data }: Props) {
+ return <div>{data.name}</div>;
+ });
+ ```
+
+ ### Animation (GPU-Accelerated Only)
+
+ ```css
+ /* ✓ DO animate */
+ transform: translateY(-4px);
+ opacity: 0.5;
+
+ /* ❌ NEVER animate */
+ width, height, margin, padding, top, left
+ ```
+
+ ## Accessibility (P1)
+
+ ### Focus Management
+
+ ```typescript
+ // Modal focus trapping
+ useEffect(() => {
+ if (isOpen) {
+ const firstFocusable = modalRef.current?.querySelector('button, input');
+ firstFocusable?.focus();
+ }
+ }, [isOpen]);
+
+ // Escape to close
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+ window.addEventListener('keydown', handleEscape);
+ return () => window.removeEventListener('keydown', handleEscape);
+ }, [onClose]);
+ ```
+
+ ### ARIA in JSX
+
+ ```tsx
+ // Icon-only buttons require labels
+ <button aria-label="Close modal">
+ <X className="w-5 h-5" />
+ </button>
+
+ // Dialogs
+ <div role="dialog" aria-modal="true" aria-labelledby="title">
+ <h2 id="title">Confirm Action</h2>
+ </div>
+ ```
+
+ ## Quick Review Checklist
+
+ **React-Specific (add to base checklist):**
+ - [ ] Hook dependencies correct
+ - [ ] Heavy components lazy loaded
+ - [ ] State management typed
+ - [ ] Memoization where beneficial
+ - [ ] Focus management in modals
+
## See Also
- - [Code Review Standards](./../_shared/CODE_REVIEW_STANDARDS.md) - Full security/performance/accessibility
- - [Design Patterns](./../_shared/DESIGN_PATTERNS.md) - UI consistency
- - Project `CLAUDE.md` - Workflow rules
+ - [Generic Code Reviewer](../generic-code-reviewer/SKILL.md) - Base review methodology
+ - [Code Review Standards](../_shared/CODE_REVIEW_STANDARDS.md) - Full security/performance/accessibility
+ - [Design Patterns](../_shared/DESIGN_PATTERNS.md) - UI consistency