What it does

UI Code Reviewer goes deeper than a linter. It reads your component code and evaluates it holistically — is the state placement correct, are expensive computations memoized, is the component doing too much, are effects clean? It catches missing dependency arrays in useEffect, inline object props that cause needless re-renders, and over-fetching patterns.

Beyond correctness, it evaluates readability and reusability. A component that works fine but mixes data-fetching with rendering logic will be flagged with a suggested separation. The review output is always structured: severity, the problematic code, the issue explained in one sentence, and the fixed version.

How to install

bash

npx skills add user/ui-reviewer

Registered instantly with Claude Code. No configuration needed — works with React, Vue 3, and Svelte components out of the box.

How to use

Paste your component and ask for a review:

prompt

Review this React component: [paste component code]

The skill returns a structured review with severity levels and refactored examples:

output

## Performance Issues

● [HIGH] Inline object prop causes re-render on every parent update
  Found:   <Table style={{ marginTop: 16 }} />
  Fix:     const tableStyle = useMemo(() => ({ marginTop: 16 }), []);
           <Table style={tableStyle} />

● [MEDIUM] useEffect missing dependency array — runs on every render
  Found:   useEffect(() => { fetchUser(userId); })
  Fix:     useEffect(() => { fetchUser(userId); }, [userId])

## Accessibility Issues

● [HIGH] Interactive div not keyboard accessible
  Found:   <div onClick={handleSelect}>{item.name}</div>
  Fix:     <button type="button" onClick={handleSelect}>{item.name}</button>

## Best Practice Violations

● [LOW] Component fetches data and renders — violates single responsibility
  Suggestion: Extract data-fetching into a useUserData() custom hook

Configuration options

prompt

# Vue 3 Composition API
Review this React component — this is a Vue 3 composition API component

# Performance only
Review this React component — focus only on performance

# Custom hook extraction
Review this React component — refactor this to use a custom hook

Tip: Run UI Code Reviewer on components before submitting a PR, not after. Paste the diff into Claude and ask for a review — catching a missing useCallback or an accidental inline object takes seconds and prevents a round of review comments.

Related skills

After fixing code quality issues, run CSS Wizard if the component needs styling work, and Accessibility Checker for a full WCAG audit of the markup. Use PR Review Assistant to automate the full pull request review workflow.