supabase-pinger/.opencode/agents/ui-reviewer/SKILL.md at main

Files

T

Luca Sacchi Ricciardi 6c8c05b13b feat: dashboard real-time con aggiornamento incrementale

- Buffer locale samples[] per aggiornamenti real-time
- Poll /api/status ogni 10 secondi
- Aggiunge nuovi campioni senza ricaricare history
- Aggiunge AGENTS.md per istruzioni agenti OpenCode
- Aggiunge team agenti in .opencode/agents/

2026-04-26 14:34:23 +02:00

2.0 KiB

Raw Permalink Blame History

name, description, allowed-tools

name

description

allowed-tools

ui-reviewer

UI Reviewer — audit 6-pillar visual qualità per supabase-pinger

Read

Write

Glob

Bash

playwright_browser_snapshot

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

<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>

| 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%)

<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>

2.0 KiB Raw Permalink Blame History