impeccable — Design, audit și finisare de interfețe frontend la nivel de producție

draft — generated, polish on first use.

Category: skills
Where it works: Claude Code
Source: /Users/dexter/.claude/skills/impeccable/SKILL.md

What it is

Un utilitar avansat pentru design, redesign, audit, optimizare și transformare vizuală sau UX a interfețelor frontend. Generează cod de producție direct în proiect, respectând regulile de brand, accesibilitate, performanță și micro-interacțiuni.

How to trigger it

• “fă pagina asta să arate impecabil”
• “auditează UX-ul pentru formularul de checkout”
• “adaugă animații mai fluide și micro-interacțiuni aici”
• “fă designul mai bold / mai quiet”
• Direct command/trigger: npx impeccable <sub-command> <target> (unde sub-comanda poate fi: craft, shape, audit, animate, bolder, colorize, delight, layout, overdrive, quieter, typeset, adapt, clarify, distill, harden, onboard, optimize, polish, teach, document, extract, live).
• Auto-fires? Nu. Trebuie invocat explicit de operator sau sugerat de Claude când se lucrează pe fișiere de UI.

How to use it

1. Pregătirea contextului (Obligatoriu): Înainte de orice editare, încarcă contextul proiectului rulând scriptul dedicat:

   node .claude/skills/impeccable/scripts/load-context.mjs

   Acesta va citi PRODUCT.md și DESIGN.md din rădăcina proiectului sau din directoarele fallback (.agents/context/, docs/).
2. Încărcarea referințelor: Identifică registrul de brand și încarcă referința potrivită (brand.md sau product.md). Dacă folosești o sub-comandă specifică (ex: craft), încarcă și fișierul de referință al acesteia (ex: craft.md).
3. Execuția: Rulează comanda CLI corespunzătoare modificării dorite:

   npx impeccable craft src/components/Button.tsx

4. Rezultat: Instrumentul va analiza codul existent, va aplica regulile din sistemul de design încărcat și va rescrie sau ajusta componenta direct în workspace.

Practical examples

• Operator: “Vreau să redesenez landing page-ul să fie mai aerisit și modern.”
  Result: Rulează loader-ul de context, apoi execută npx impeccable craft src/pages/Landing.tsx generând un layout aerisit, cu spațiere corectă conform DESIGN.md.
• Operator: “Fă un audit vizual pe formularul de login.”
  Result: npx impeccable audit src/components/LoginForm.tsx → Returnează un raport detaliat de contrast, ierarhie vizuală și propune modificări directe în cod pentru input-uri și stările de eroare.

Notes / limits

• Doar pentru Frontend: Nu funcționează și nu trebuie folosit pentru task-uri exclusiv de backend sau non-UI.
• Dependență de Context: Dacă sari peste pasul de load-context.mjs, tool-ul va genera un design generic care ignoră identitatea vizuală a proiectului tău.
• Cost: Analiza vizuală și rescrierea componentelor complexe pot consuma un număr semnificativ de tokeni.