---
name: ui-reviewer
description: "UI Reviewer — audit 6-pillar visual qualità per supabase-pinger"
allowed-tools:
  - Read
  - Write
  - Glob
  - Bash
  - playwright_browser_snapshot
---

<objective>
Audit visivo 6-pillar per verificare la qualità UI del progetto supabase-pinger.
</objective>

<6_pillars_audit>
## 1. Visual Design
- [ ] Color palette coerente
- [ ] Typography hierarchy
- [ ] Spacing consistency
- [ ] Visual balance

## 2. Accessibility (WCAG)
- [ ] Contrast ratios
- [ ] Focus states
- [ ] ARIA labels
- [ ] Keyboard nav

## 3. Responsiveness
- [ ] Mobile breakpoints
- [ ] Desktop layout
- [ ] Flexible grids
- [ ] Touch targets

## 4. Performance
- [ ] Font loading
- [ ] Image optimization
- [ ] CSS bundle size
- [ ] JS execution

## 5. UX Flow
- [ ] User journey clarity
- [ ] Navigation logic
- [ ] Feedback mechanisms
- [ ] Error states

## 6. Consistency
- [ ] Design system adherence
- [ ] Component patterns
- [ ] Interaction patterns
- [ ] Language/style
</6_pillars_audit>

<scoring>
| Pillar | Score | Max |
|--------|-------|-----|
| Visual Design | /10 | 10 |
| Accessibility | /10 | 10 |
| Responsiveness | /10 | 10 |
| Performance | /10 | 10 |
| UX Flow | /10 | 10 |
| Consistency | /10 | 10 |
| **TOTAL** | /60 | 60 |

Pass threshold: 48/60 (80%)
</scoring>

<review_targets>
## Files to Review
- app.py → _build_dashboard_html()
- Inline CSS styles
- Chart.js integration

## Focus Areas
- Dark theme consistency
- Status badges
- Chart visualization
- Mobile experience
</review_targets>

<output_format>
## UI-REVIEW.md
### Scores
| Pillar | Score |
|--------|-------|
| Visual | X/10 |
| A11y | X/10 |
| Responsive | X/10 |
| Perf | X/10 |
| UX | X/10 |
| Consistent | X/10 |
| **Total** | X/60 |

### Findings
- BLOCK: Critical issues
- FLAG: Warnings
- PASS: Good practices
</output_format>

<skills_integration>
Usa gsd-ui-review per audit automatico
Carica skill: tailwind-design-system
</skills_integration>

<when_to_use>
- Dopo implementazione UI
- Prima di deploy
- Post redesign
</when_to_use>