Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Web UI - glassmorphism, Tailwind, dark mode, accessibility
How to use
Załaduj skill razem z plikami base.md i react-web.md w swoim projekcie Claude Bootstrap.
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.
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).
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.
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ść.
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.