ui-ux-expert-skill

Skill do implementacji responsywnych interfejsów React z użyciem shadcn/ui, Tailwind CSS i TanStack Query. Prowadzi Cię przez 6-fazowy proces obejmujący przestrzeganie Style Guide, weryfikację dostępności WCAG 2.1 AA, walidację w Chrome DevTools i konsultację best practices. Uruchamiaj po zakończeniu pracy Test Agent, Implementer i Supabase agents.

1. Zainstaluj skill w swoim projekcie Claude, umieszczając folder ui-ux-expert-skill w katalogu .claude/skills/.

2. Zanim zaczniesz implementację, przeczytaj plik .claude/STYLE_GUIDE.md i zapamiętaj kluczowe ograniczenia: pięć kolorów marki (Brand-1 do Brand-5), skalę typografii od text-xs do text-4xl, skalę odstępów od spacing-1 do spacing-24, czasy animacji (200ms, 300ms, 500ms) oraz zmienną border-radius. Nie używaj arbitralnych wartości heksadecymalnych, rozmiarów czcionek ani paddingu.

3. Uruchom skill po tym, jak Test Agent, Implementer i Supabase agents ukończą swoją pracę. Skill oczekuje, że komponenty są już przetestowane i zintegrowane z przypadkami użycia.

4. Przejdź przez wszystkie 6 faz workflow: najpierw Phase 0 (Study Style Guide), następnie Phase 1 (Component Audit), Phase 2 (Accessibility Review), Phase 3 (Performance Optimization), Phase 4 (Chrome DevTools Validation) i Phase 5 (Final QA). Każda faza jest obowiązkowa.

5. W Phase 2 upewnij się, że wszystkie komponenty spełniają standard WCAG 2.1 AA. Sprawdź kontrast tekstu, etykiety formularzy, nawigację klawiaturą i obsługę czytników ekranu.

6. Użyj Chrome DevTools do walidacji metryk Core Web Vitals i upewnij się, że wszystkie testy E2E przechodzą bez modyfikacji. Skill gwarantuje, że interfejs będzie zarówno dostępny, jak i wydajny.