ui-web

Skill do tworzenia interfejsów webowych zgodnych ze standardem WCAG 2.1 AA. Zawiera gotowe komponenty z glassmorphizmem, Tailwind CSS i trybem ciemnym. Gwarantuje prawidłowe kontrasty kolorów, widoczne przyciski i dostępność dla wszystkich użytkowników. Załaduj razem z base.md i react-web.md, aby uzyskać pełną funkcjonalność.

1. Załaduj skill razem z plikami base.md i react-web.md w swoim projekcie Claude Bootstrap.

2. Zrozum obowiązkowe wymagania dostępności: każdy element interfejsu musi spełniać standard WCAG 2.1 AA, szczególnie kontrast tekstu (4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu) i widoczne granice przycisków.

3. Stosuj bezpieczne kombinacje kolorów z Tailwind CSS — używaj gray-700 lub ciemniejszych na białym tle, unikaj kombinacji takich jak gray-400 na białym (kontrast 2,6:1 to za mało).

4. Projektuj przyciski z obowiązkowym tłem lub widoczną ramką (minimum 1px), wysokością co najmniej 44px i paddingiem px-4 py-2 — nigdy nie twórz przycisków z przezroczystym tłem bez ramki.

5. Implementuj komponenty pierwotne (solid background), wtórne (widoczne tło) i ghost (widoczna ramka) zgodnie z szablonami zawartymi w skill, zapewniając konsystentny wygląd i dostępność.

6. Testuj każdy element pod kątem kontrastu kolorów i widoczności, aby potwierdzić zgodność z WCAG 2.1 AA przed wdrożeniem w projekcie.