radix-ui-design-system
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
How to use
Zainstaluj Radix UI w swoim projekcie React 16.8+ za pomocą npm lub yarn. Skill zakłada, że masz już skonfigurowane środowisko React z obsługą hooks.
Zidentyfikuj komponenty, które potrzebujesz w swoim systemie designu — Radix oferuje prymitywy takie jak Dialog, Dropdown, Tabs, Tooltip i wiele innych. Każdy z nich jest niestyizowany i gotów do customizacji.
Zdefiniuj architekturę themingu — zdecyduj, czy będziesz używać zmiennych CSS, Tailwind CSS czy innego podejścia. Radix nie narzuca opinii na temat stylowania, więc masz pełną swobodę.
Implementuj komponenty złożone, łącząc proste prymitywy Radix w większe, wielofunkcyjne elementy. Skill prowadzi przez wzorce komponentów złożonych (compound components) do budowania skalowanych bibliotek.
Zapewnij dostępność na poziomie WCAG 2.1 AA/AAA — Radix ma wbudowaną obsługę nawigacji klawiaturą, atrybutów ARIA i wsparcia dla czytników ekranu, ale skill pokazuje, jak to weryfikować i rozszerzać.
Testuj i iteruj swój system designu, korzystając z dokumentacji Radix do poznania szczegółów każdego komponentu i jego możliwości konfiguracji.