Quello che non si vede
L’app si apre, si naviga, in uno screenshot sembra finita. Sotto restano le cose che nessuno guarda a occhio: focus da tastiera, contrasto, bersagli abbastanza grandi per un pollice, peso delle immagini, ordine dei titoli, Core Web Vitals. Accessibilità e prestazioni web sono due mestieri interi — e nessuno li ha in testa per intero, tu come l’agente.
Due skill portano quelle competenze dentro Claude Code. Una la mantiene Vercel Labs; l’altra è di Addy Osmani, del team di Google Chrome, che ha impacchettato lì dentro quello che sa sulla qualità di un sito. Installate, l’agente ha il metro che gli manca.
web-design-guidelines di Vercel Labs Le regole dell’interfaccia: focus visibile, bersagli abbastanza grandi, contrasto, stati di caricamento, animazioni che rispettano chi le ha disattivate.
web-quality-audit di Addy Osmani, team Google Chrome Il metro di Lighthouse: prestazioni e Core Web Vitals, accessibilità secondo WCAG, SEO, buone pratiche. Guarda il progetto, non la singola schermata.
Installa le due skill
Si installano dentro la cartella del progetto: lancia il comando da lì, con Claude Code aperto sull’app.
Un comando solo: le installa entrambe. Una volta per progetto.
Esegui npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines e poi npx skills add addyosmani/web-quality-skills Il giro in tre prompt
Primo: il referto dell’interfaccia. Analizza e basta, non corregge.
Usa la skill web-design-guidelines sui file dell'interfaccia (src/app e src/components).
Fammi solo il referto, non modificare niente:
1. una riga per problema, in formato file:riga
2. ordinati per gravità: prima quelli che impediscono di usare l'app, poi il resto
3. accanto a ogni riga, una frase su cosa succede a chi usa l'app
Torna una lista di righe come src/components/swipe-card.tsx:42 con accanto il problema. Quei file non devi aprirli: il numero serve all’agente quando gli dirai di correggere.
Secondo: il referto di qualità. Stesso patto, metro diverso: peso, velocità, accessibilità, SEO.
Usa la skill web-quality-audit su tutto il progetto.
Fammi solo il referto, non modificare niente. Per ognuna delle quattro aree
(prestazioni, accessibilità, SEO, buone pratiche) dammi al massimo cinque
problemi: quelli che si notano davvero su un telefono con una connessione lenta.
Per ognuno: file:riga, cosa succede a chi usa l'app, e quanto costa sistemarlo
(piccolo / medio / grande).Terzo: si corregge a lotti. Mai «sistema tutto»: un lotto per volta, con il tuo ok in mezzo.
Prendi il referto e lavora a lotti.
Lotto 1: solo i problemi di gravità massima. Per ognuno dimmi cosa cambi PRIMA
di cambiarlo, poi fallo, poi fermati e aspetta il mio ok prima del lotto 2.
Non toccare niente che non sia nella lista, e non sistemare altro mentre passi.Dopo ogni lotto riapri l’app e guardala. Due lotti bastano quasi sempre. Poi resta solo metterla online: è la parte 7.