R
reusable-ui-components
Guidelines for creating reusable, portable UI components with native-first design, compound patterns, and accessibility
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Guidelines for creating reusable, portable UI components with native-first design, compound patterns, and accessibility
How to use
- Zainstaluj umiejętność w swoim projekcie Claude'a, dodając katalog
.claude/skills/reusable-ui-componentsdo repozytorium. 2. Przejrzyj strukturę plików komponentów — każdy komponent powinien mieć plik bazowy (np.button.tsx) oraz opcjonalne overridy dla konkretnych platform (button.ios.tsx,button.android.tsx,button.web.tsx). 3. Zdefiniuj globalne zmienne CSS dla tokenów designu (kolory, typografia, spacing) zamiast hardkodować wartości, aby ułatwić customizację i theming. 4. Projektuj komponenty jako compound components — rozbij złożone interfejsy na mniejsze, composable sub-komponenty inspirowane Radix UI i Base UI. 5. Upewnij się, że każdy komponent ma wbudowaną dostępność — obsługa klawiatury, bezpieczne obszary (safe areas) i wsparcie dla czytników ekranu. 6. Testuj komponenty na iOS, Androidzie i webzie, korzystając z Metro resolution priority — system automatycznie wybierze wersję platform-specific, jeśli istnieje, w przeciwnym razie użyje fallbacku.