Davide Grilli
4413c8e7b6
Slash command che attiva il profilo senior frontend/UX designer. Include checklist di revisione (touch, accessibilità, CSS, Vue 3) e pattern di riferimento con le variabili CSS e componenti del progetto. Formato SKILL.md conforme alla documentazione ufficiale Claude Code. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1.4 KiB
1.4 KiB
UX Review Checklist
Usa questa checklist quando rivedi o scrivi un componente Vue mobile-first.
Touch & interazione
- Ogni elemento interattivo ha
min-height: 44pxemin-width: 44px - Spaziatura tra elementi adiacenti ≥ 8px (evita tap accidentali)
- Stati
:activee:focus-visibledefiniti esplicitamente - Nessun hover-only interaction (non funziona su touch)
Feedback visivo
- Ogni azione utente ha risposta visiva immediata (cambio colore, spinner, messaggio)
- Stato vuoto gestito con messaggio utile, non schermata bianca
- Errori comunicati in linguaggio naturale, non codici tecnici
- Operazioni distruttive (elimina, svuota) richiedono conferma
Accessibilità
- Rapporto di contrasto ≥ 4.5:1 per testo normale, ≥ 3:1 per testo grande
<input>ha<label>associato (non solo placeholder)<button>ha testo leggibile oaria-label- Ordine di navigazione con Tab è logico e visibile
CSS & coerenza
- Colori e dimensioni usano variabili CSS (
:root { --color-* }) - Nessun valore hardcoded che duplica una variabile esistente
- Font-size base 16px, nessun testo sotto 14px
box-sizing: border-boxapplicato globalmente
Vue 3
- Props tipizzate con
defineProps - Eventi emessi con
defineEmits - Nessuna logica diretta nel template (estrai in computed o funzioni)
watchcon{ deep: true }solo dove necessario (ha costo)