Mantine Code Review

Purpose

Review React components using Mantine UI library for accessibility compliance, Styles API correctness, component pattern adherence, and common pitfall detection.

When NOT to Use

• Non-Mantine React components (use general React review)
• Backend code review
• Mantine v6 or earlier (patterns differ)
• Initial development (use mantine-developing skill instead)

Review Workflow

Step 1: Identify Mantine Files

# Find files using Mantine
grep -r "from '@mantine" --include="*.tsx" --include="*.ts" -l

Step 2: Run Automated Checks

# TypeScript errors
npm run typecheck

# Lint issues
npm run lint

# Check for common issues
grep -rn "disabled.*Tooltip\|Tooltip.*disabled" --include="*.tsx"
grep -rn "Accordion\.Control.*Button\|Button.*Accordion\.Control" --include="*.tsx"
grep -rn "ActionIcon[^>]*>" --include="*.tsx" | grep -v "aria-label"

Step 3: Manual Review

Use CHECKLIST.md for comprehensive review criteria.

Step 4: Report Findings

Format findings by severity:

• CRITICAL: Accessibility violations, invalid HTML
• HIGH: Performance issues, incorrect patterns
• MEDIUM: Style issues, suboptimal approaches
• LOW: Minor improvements, suggestions

Critical Review Areas

1. Accessibility (CRITICAL)

Must check:

// ❌ FAIL: Missing aria-label on icon button
<ActionIcon onClick={handleSearch}>
  <IconSearch />
</ActionIcon>

// ✅ PASS: Has aria-label
<ActionIcon aria-label="Search" onClick={handleSearch}>
  <IconSearch />
</ActionIcon>

Review for:

• All ActionIcon components have aria-label
• All CloseButton have aria-label or parent has closeButtonLabel
• Heading hierarchy correct (order prop on Accordion)
• Focus states visible (not removed by custom CSS)
• Keyboard navigation works

2. Nested Interactive Elements (CRITICAL)

Invalid HTML - browsers will break layout:

// ❌ FAIL: Button inside button (Accordion.Control is a button)
<Accordion.Control>
  Click here <Button>Delete</Button>
</Accordion.Control>

// ✅ PASS: Button outside Control
<Group>
  <Accordion.Control style={{ flex: 1 }}>Click here</Accordion.Control>
  <Button>Delete</Button>
</Group>

Check all:

• Accordion.Control has no Button, ActionIcon, or Link children
• Button has no interactive children
• UnstyledButton has no interactive children

3. Styles API Usage (HIGH)

Check for anti-patterns:

// ❌ FAIL: Inline style only affects root
<Button style={{ color: 'red' }}>Text won't be red</Button>

// ❌ FAIL: !important hack
<Button className="my-button">...</Button>
.my-button span { color: red !important; }

// ✅ PASS: Correct Styles API usage
<Button styles={{ label: { color: 'red' } }}>Red text</Button>
<Button classNames={{ label: classes.redLabel }}>Red text</Button>

Review for:

• Using classNames or styles prop for inner elements
• No !important in CSS targeting Mantine components
• Correct selector names (check component's Styles API docs)
• CSS variables used appropriately

4. Tooltip on Disabled (HIGH)

Tooltip won't show on truly disabled elements:

// ❌ FAIL: Tooltip invisible
<Tooltip label="Cannot submit">
  <Button disabled>Submit</Button>
</Tooltip>

// ✅ PASS: Use data-disabled
<Tooltip label="Cannot submit">
  <Button data-disabled onClick={(e) => e.preventDefault()}>
    Submit
  </Button>
</Tooltip>

5. ActionIcon.Group Structure (HIGH)

Direct children only:

// ❌ FAIL: Wrapped children break styling
<ActionIcon.Group>
  <div><ActionIcon><IconEdit /></ActionIcon></div>
</ActionIcon.Group>

// ✅ PASS: Direct ActionIcon children
<ActionIcon.Group>
  <ActionIcon aria-label="Edit"><IconEdit /></ActionIcon>
  <ActionIcon aria-label="Delete"><IconTrash /></ActionIcon>
</ActionIcon.Group>

6. Select vs Autocomplete (MEDIUM)

// When value MUST be from list → Select
<Select data={countries} />

// When free text is acceptable → Autocomplete
<Autocomplete data={suggestions} />

Review for correct component choice based on requirements.

7. Form Handling (MEDIUM)

Prefer @mantine/form over manual state:

// ❌ Suboptimal: Manual state for each field
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

// ✅ Better: useForm hook
const form = useForm({
  initialValues: { email: '', password: '' },
  validate: { email: (v) => ... }
});
<TextInput {...form.getInputProps('email')} />

Review for:

• Using useForm for forms with validation
• Using getInputProps for input binding
• Correct type: 'checkbox' for checkbox/switch inputs
• Validation configured appropriately

8. Dark Mode Compatibility (MEDIUM)

// ❌ FAIL: Hardcoded colors break dark mode
<Box style={{ background: 'white', color: 'black' }}>

// ✅ PASS: Theme-aware colors
<Box style={{
  background: 'light-dark(white, var(--mantine-color-dark-7))',
  color: 'light-dark(black, white)'
}}>

// ✅ PASS: Theme color references
<Box bg="gray.0" c="dark.9">

9. Performance (MEDIUM)

Check for:

• Unnecessary re-renders from inline objects/functions
• Missing useMemo/useCallback for expensive operations
• Large lists without virtualization
• Heavy components not code-split

// ❌ FAIL: New object every render
<Button styles={{ root: { padding: 10 } }}>

// ✅ PASS: Stable reference
const buttonStyles = { root: { padding: 10 } };
<Button styles={buttonStyles}>

// ✅ PASS: Or use CSS modules
<Button classNames={{ root: classes.button }}>

10. Polymorphic Component Types (LOW)

// When using component prop, ref type changes
const buttonRef = useRef<HTMLButtonElement>(null); // Default
const linkRef = useRef<HTMLAnchorElement>(null);   // With component="a"

<Button ref={buttonRef}>Button</Button>
<Button component="a" ref={linkRef} href="/">Link</Button>

Review for TypeScript errors related to ref types.

Review Output Template

## Mantine Code Review: [Component/File]

### Summary
[1-2 sentence overview]

### Critical Issues
- [ ] [Issue description] - [file:line]

### High Priority
- [ ] [Issue description] - [file:line]

### Medium Priority
- [ ] [Issue description] - [file:line]

### Low Priority / Suggestions
- [ ] [Suggestion]

### Accessibility Audit
- [ ] All icon buttons have aria-label
- [ ] No nested interactive elements
- [ ] Keyboard navigation works
- [ ] Focus states visible

### Styles API Audit
- [ ] No !important hacks
- [ ] Correct selector usage
- [ ] Theme-aware colors

### Passed Checks
- [x] [What's good about the code]

Quick Commands

# Find missing aria-labels on ActionIcon
grep -rn "ActionIcon" --include="*.tsx" | grep -v "aria-label"

# Find potential nested interactives
grep -rn "Accordion\.Control" -A5 --include="*.tsx" | grep -E "Button|ActionIcon|Link"

# Find disabled buttons in tooltips
grep -rn "Tooltip" -A3 --include="*.tsx" | grep "disabled"

# Find hardcoded colors
grep -rn "style={{" --include="*.tsx" | grep -E "color:|background:|bg:"

# Find inline style objects (potential perf issue)
grep -rn "styles={{" --include="*.tsx"

Integration

Related skills:

• mantine-developing - Development patterns and guidance
• hermes-code-reviewer - General TypeScript review

For detailed checklist: See CHECKLIST.md

---

Related Agent

For comprehensive React + Mantine UI guidance that coordinates this and other Mantine skills, use the mantine-ui-expert agent.

Cost Optimization: Use model="haiku" when invoking this agent for routine code reviews. Haiku is sufficient for pattern matching and Styles API validation.