reusable-ui-components

Umiejętność Claude'a do budowania produkcyjnych, wielokrotnie używalnych komponentów interfejsu inspirowanych shadcn/ui, Radix UI i Konsta UI. Komponenty oparte na iOS San Francisco design guidelines z liquid glass estetyką, native-first podejściem i compound patterns. Zawiera wytyczne dotyczące struktury plików, tokenów designu, dostępności oraz platform-adaptacyjnego stylowania dla Expo Router.

1. Zainstaluj umiejętność w swoim projekcie Claude'a, dodając katalog .claude/skills/reusable-ui-components do 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.