Nelle parole della skill
Crea interfacce utente di qualità produttiva, accessibili, performanti e visivamente curate. La skill si concentra sulla creazione di UI che sembrano realizzate da un ingegnere con sensibilità di design in un'azienda di primo piano — non generate da un'AI. Impone il rispetto reale del design system, un'accessibilità WCAG 2.1 AA appropriata, pattern di interazione ponderati ed evita i cliché estetici tipici dell'AI generica.
La skill copre l'architettura dei componenti con colocazione, la composizione preferita alla configurazione, la gestione dello stato che va da useState locale agli store globali, il design responsive mobile-first testato su breakpoint specifici, la navigazione da tastiera, le etichette ARIA, la gestione del focus, stati vuoti e di errore significativi, il caricamento skeleton e gli aggiornamenti optimistic per una velocità percepita maggiore.
Che cosa produce
- Stati di caricamento skeleton con aria-busy e aria-label per il contenuto in fase di caricamento
- Stati vuoti e di errore significativi con role="status", testo descrittivo, icone e prossimi passi attuabili
Come funziona
- 01Colocare i File dei Componenti
Posizionare l'implementazione del componente, i test, le storie, gli hook personalizzati e i tipi insieme in un'unica cartella con il nome del componente.
- 02Componi i Componenti, Non Configurarli
Costruire API dei componenti componibili con figli annidati piuttosto che oggetti di configurazione ricchi di prop.
- 03Separa il Recupero Dati dalla Presentazione
Creare componenti contenitore che gestiscono il caricamento dei dati, gli errori e gli stati vuoti, poi passare dati puliti ai componenti di presentazione.
- 04Scegli la Gestione dello Stato in Base all'Ambito
Usare useState per lo stato UI specifico del componente, stato elevato per 2-3 fratelli, Context per tema/autenticazione/locale, stato URL per filtri e paginazione, librerie di stato server per dati remoti e store globali per stati client condivisi complessi.
- 05Segui i Token del Design System
Usare token di colore semantici come text-primary e bg-surface invece di valori hex grezzi, mantenere una scala di spaziatura coerente con incrementi di 0,25rem e rispettare la gerarchia tipografica.
- 06Implementa l'Accessibilità WCAG 2.1 AA
Rendere ogni elemento interattivo accessibile da tastiera, aggiungere etichette ARIA ai controlli senza etichetta, gestire il focus quando il contenuto cambia, garantire un contrasto di 4,5:1 per il testo normale e fornire stati vuoti e di errore significativi.