Ce nu se vede
Aplicația se deschide, se navighează, într-un screenshot pare terminată. Dedesubt rămân lucrurile pe care nimeni nu le observă cu ochiul liber: focus de la tastatură, contrast, ținte suficient de mari pentru un deget, greutatea imaginilor, ordinea titlurilor, Core Web Vitals. Accesibilitatea și performanța web sunt două meserii întregi — și nimeni nu le are complet în cap, nici tu, nici agentul.
Două skill aduc acele competențe în Claude Code. Una e întreținută de Vercel Labs; cealaltă e de la Addy Osmani, din echipa Google Chrome, care a împachetat acolo tot ce știe despre calitatea unui site. Instalate, agentul are metrul care îi lipsea.
web-design-guidelines de la Vercel Labs Regulile interfeței: focus vizibil, ținte suficient de mari, contrast, stări de încărcare, animații care respectă pe cei care le-au dezactivat.
web-quality-audit de la Addy Osmani, echipa Google Chrome Metrul lui Lighthouse: performanță și Core Web Vitals, accesibilitate conform WCAG, SEO, bune practici. Se uită la tot proiectul, nu la un singur ecran.
Instalează cele două skill
Se instalează în folderul proiectului: rulează comanda de acolo, cu Claude Code deschis pe aplicație.
O singură comandă: le instalează pe amândouă. O dată pentru fiecare proiect.
Rulează npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines și apoi npx skills add addyosmani/web-quality-skills Runda în trei prompturi
Primul: raportul interfeței. Doar analizează, nu corectează.
Folosește skill-ul web-design-guidelines pe fișierele interfeței (src/app și src/components).
Dă-mi doar raportul, nu modifica nimic:
1. un rând per problemă, în format file:rând
2. sortate după gravitate: mai întâi cele care împiedică folosirea aplicației, apoi restul
3. lângă fiecare rând, o frază despre ce se întâmplă cu cel care folosește aplicația
Se întoarce o listă de rânduri ca src/components/swipe-card.tsx:42 cu problema alături. Fișierele acelea nu trebuie să le deschizi: numărul e pentru agent, pentru când îi vei spune să corecteze.
Al doilea: raportul de calitate. Același acord, alt metru: greutate, viteză, accesibilitate, SEO.
Folosește skill-ul web-quality-audit pe tot proiectul.
Dă-mi doar raportul, nu modifica nimic. Pentru fiecare dintre cele patru zone
(performanță, accesibilitate, SEO, bune practici) dă-mi maximum cinci
probleme: cele care chiar se observă pe un telefon cu conexiune lentă.
Pentru fiecare: file:rând, ce se întâmplă cu cel care folosește aplicația, și
cât costă să fie rezolvată (mică / medie / mare).Al treilea: se corectează pe loturi. Niciodată «rezolvă tot»: un lot pe rând, cu aprobarea ta între ele.
Ia raportul și lucrează pe loturi.
Lotul 1: doar problemele de gravitate maximă. Pentru fiecare spune-mi ce
schimbi ÎNAINTE să o schimbi, apoi fă-o, apoi oprește-te și așteaptă
aprobarea mea înainte de lotul 2.
Nu atinge nimic care nu e pe listă, și nu rezolva altceva pe parcurs.După fiecare lot redeschide aplicația și uită-te la ea. Două loturi sunt aproape mereu suficiente. Apoi rămâne doar s-o pui online: e partea 7.