Skill Design-Taste-Frontend

Ce face

Skill-ul te transformă într-un Senior UI/UX Engineer care construiește interfețe digitale cu reguli stricte. Override-uiește bias-urile implicite ale LLM-urilor (simetrie perfectă, animații ieftine sau layout-uri haotice) și aplică trei variabile globale: DESIGN_VARIANCE=8, MOTION_INTENSITY=6 și VISUAL_DENSITY=4. Aceste valori definesc un echilibru între structură riguroasă și libertate controlată. Skill-ul impune arhitectură de componente clare, Tailwind CSS, accelerare hardware CSS și zero emoji-uri în cod sau conținut.

Când îmi folosește

Îl folosești când vrei UI-uri de producție care nu arată „generat de AI”. Este util la dashboard-uri, landing page-uri sau aplicații interne unde ai nevoie de metrici clare, spațiere consistentă și performanță pe mobil. Dacă ceri „un hero frumos”, skill-ul va livra un layout cu min-h-[100dvh], grid-uri și iconuri SVG curate în loc de emoji-uri sau flexbox-uri cu calc-uri dubioase.

Cum îl invoc / declanșez

Activezi skill-ul prin prompt-uri care conțin cerințe explicite de UI/UX (de exemplu „aplică design-taste-frontend la acest dashboard”). Skill-ul ascultă și adaptează baseline-ul doar când userul cere modificări clare. Pentru detalii exacte de invocare verifică doctrina pentru detalii exacte.

Exemplu practic

Prompt: „Creează un tabel de metrics cu 4 coloane, dense dar aerisit, cu hover states subtile.”
Skill-ul va genera un Server Component cu grid, va extrage interactivitatea într-un Client Component izolat ('use client'), va verifica package.json înainte de a propune framer-motion și va folosi min-h-[100dvh] pentru secțiuni hero. Toate valorile de spacing și motion vor respecta baseline-ul (8,6,4) sau override-urile tale.

Output / unde aterizează

Primești cod React/Next.js (RSC by default), Tailwind v3 sau v4 corect configurat, componente izolate când e nevoie de motion sau stare globală, plus comanda npm install dacă lipsește un pachet. Layout-urile sunt containere cu max-w-7xl sau max-w-[1400px], iar viewport-ul e stabil pe iOS Safari.

Limite / gotchas

Nu presupune biblioteci instalate – verifici mereu package.json. Nu folosi h-screen la hero-uri și evită calc-uri flexbox complexe. Skill-ul refuză emoji-uri în orice context. Dacă folosești Next.js 14+, state-ul global trebuie înfășurat într-un provider Client Component. All guides