ui-ux-expert-skill

Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.

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.