ux-review

When to Use

• User invokes /ux-review <path>
• Before merging UI changes
• After creating new components or screens
• When refactoring UI code

Review Process

Step 1: Load Dependencies

First, load these skills for reference:

• flutter-ux-rules — Core UX rules
• flutter-design-tokens — Token definitions
• corporate-colors — Color palette

Step 2: Identify Files

If path is a directory, find all .dart files in:

• atoms/
• molecules/
• organisms/
• templates/
• pages/
• widgets/

If path is a file, review that single file.

Step 3: Run Checks

For each file, verify:

Touch Targets

• All GestureDetector have 48x48 dp minimum
• AppSizes.touchTarget used for tap areas
• Spacing between targets ≥ 8 dp

Design Tokens

• No Color(0xFF...) — use context.theme.colors.*
• No fontSize: N — use context.theme.typography.*
• No raw padding numbers — use AppSpacing.*
• No raw radius numbers — use AppRadii.*
• No raw size numbers — use AppSizes.*

Component States

• onPressed: null has visual disabled state
• Loading states show spinner/skeleton
• Error states have color + icon + text

Accessibility

• Icons have semanticLabel
• Images have semanticLabel
• Form inputs have visible labels

Step 4: Generate Report

Output format:

# UX Review: {path}

## Summary
- Files reviewed: N
- ✅ Compliant: N
- ⚠️ Warnings: N
- ❌ Violations: N

## Violations (must fix)

### {filename}
- **Line N**: Magic number `padding: 17` — use `AppSpacing.*`
- **Line N**: Missing `semanticLabel` on Icon

## Warnings

### {filename}
- **Line N**: Consider using `AppSizes.touchTarget` instead of `48`

## Suggestions

- Consider extracting repeated padding pattern to a constant
- Form could benefit from autofill hints

## Compliant ✅

- {filename}: All checks passed

Anti-Patterns to Flag

Pattern	Severity	Message
Color(0xFF...)	❌ Violation	Use context.theme.colors.*
fontSize: N	❌ Violation	Use context.theme.typography.*
EdgeInsets.all(N) where N not in tokens	⚠️ Warning	Use AppSpacing.*
BorderRadius.circular(N)	⚠️ Warning	Use AppRadii.*
width: N, height: N for tap targets	⚠️ Warning	Use AppSizes.touchTarget
Icon(...) without semanticLabel	❌ Violation	Add semanticLabel
onPressed: null without opacity change	❌ Violation	Disabled needs visual feedback

Commands

# Review single file
/ux-review lib/shared/presentation/atoms/app_button.dart

# Review directory
/ux-review lib/shared/presentation/atoms/

# Review entire feature
/ux-review lib/features/auth/presentation/

Resources

• Checklist: See flutter-ux-rules skill assets/ux_review_checklist.md
• Token definitions: See flutter-design-tokens skill