Verificare UI Web cu Playwright Înainte de Claim

Când modifici orice interfață web — CSS, layout, Quartz, dashboard sau pagini servite prin nginx — skill-ul ăsta te obligă să măsori cu Playwright înainte să spui „done”. Nu mai merge cu „arată bine în screenshot”. Trebuie numere reale de la getBoundingClientRect() și getComputedStyle().

Ce face

Skill-ul rulează automat de fiecare dată când atingi un fișier care ajunge într-un browser. Deschide pagina la viewport-urile obișnuite (1200, 1366, 1440, 1500), măsoară elementele pe care le-ai schimbat și compară cu ce ai promis. Dacă un număr nu se potrivește, te oprește și te pune să repari. Abia după ce măsurătorile confirmă că problema a dispărut poți declara treaba gata și să dai URL-ul.

Când îmi folosește

Aplică-l imediat ce editezi un fișier .css public, schimbi config nginx/caddy, modifici docker-compose.yml pentru un stack cu HTML sau atingi cod frontend (React, Svelte, Quartz etc.). Nu-l folosi la backend pur sau la tool-uri interne pe care nimeni nu le vede în browser.

Cum îl invoc / declanșez

Skill-ul se activează singur când detectează modificări pe suprafețe web. Nu ai comandă manuală; pur și simplu continui lucrul normal și skill-ul intervine înainte să poți scrie „done”. Dacă nu poți rula Playwright din motive de mediu, spune clar și nu încerca să substitui cu „ar trebui să meargă”.

Exemplu practic

Ai mutat un buton din sidebar și crezi că e centrat. Skill-ul deschide pagina, rulează getBoundingClientRect() pe icon și pe container și îți arată că icon-ul e încă decalat cu 30 px. Corectezi, rulezi din nou, numeri din nou. Abia când diferența e zero poți continua.

Output / unde aterizează

Rezultatul final este un mesaj scurt: „done” + URL-ul paginii. Nimic altceva nu e acceptat până nu există măsurători care confirmă fix-ul.

Limite / gotchas

sub_filter din nginx cere recreate de container, nu doar reload. Cloudflare ține în cache 404-uri, deci uneori trebuie bust cache explicit. Browserul și Cloudflare pot servi versiuni vechi; verifică mereu cu ?cb= sau header-e de no-cache. Dacă sari peste măsurători, skill-ul te va prinde data viitoare. Vezi și All guides pentru restul regulilor Wednesday.