Nelle parole della skill
Web Design Reviewer guida un sito web attivo tramite uno strumento di automazione del browser, lo ispeziona visivamente e ripara ciò che trova nel codice sorgente. Copre siti statici, SPA su React, Vue, Angular o Svelte, framework full-stack come Next.js e Nuxt, piattaforme CMS come WordPress e Drupal, e qualsiasi altra applicazione web.
Il workflow si articola in quattro fasi: raccogliere il contesto e rilevare automaticamente il framework e il metodo di styling, ispezionare le pagine rispetto a una checklist visiva, correggere i problemi con priorità da P1 a P3, quindi riverificare e ripetere il ciclo. I risultati sono raggruppati per layout, responsive, accessibilità e coerenza visiva, ciascuno con un livello di gravità. Le correzioni seguono principi di modifica minima e si concludono con un report di revisione in markdown.
Che cosa produce
- Un report dei risultati della revisione in markdown intitolato Web Design Review Results.
- Una tabella riepilogativa che copre URL di destinazione, framework rilevato, styling, viewport testati, problemi rilevati e problemi risolti.
- Voci per singolo problema con priorità, pagina, elemento, descrizione, percorso del file corretto, dettagli della correzione e screenshot prima/dopo.
- Una sezione dei problemi non risolti che indica il motivo per cui ciascun problema è stato lasciato e un'azione consigliata per l'utente, oltre a raccomandazioni generali.
Come funziona
- 01Raccogliere il Contesto e Rilevare lo Stack
Se non ne viene fornito uno, chiede l'URL, poi tenta il rilevamento automatico dai file del workspace come package.json, tsconfig.json, tailwind.config, next.config, vite.config e nuxt.config, e chiede quali pagine siano incluse nell'ambito.
- 02Navigare e Acquisire
Apre l'URL di destinazione, acquisisce screenshot, recupera la struttura del DOM o uno snapshot quando possibile, e attraversa ulteriori pagine tramite la navigazione del sito.
- 03Ispezionare in Base alla Checklist Visiva
I problemi di layout, responsività, accessibilità e coerenza visiva vengono verificati seguendo una checklist di riferimento, che viene riutilizzata dopo le correzioni.
- 04Individuare l'Origine di Ogni Problema
Gli elementi problematici vengono ricondotti all'origine cercando nel codebase i nomi delle classi o gli ID, individuando il componente a partire dal testo o dalla struttura dell'elemento e filtrando i pattern dei file di stile, dei componenti e delle pagine.
- 05Correggere, Poi Riverificare
Le correzioni vengono applicate seguendo le indicazioni specifiche del framework, poi il browser viene ricaricato oppure si attende l'HMR del dev server, le aree corrette vengono nuovamente fotografate e si confrontano il prima e il dopo.