core-components
Biblioteka komponentów UI z tokenami designu – spójny styl i zachowanie w całej aplikacji
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do pracy z systemem designu i biblioteką komponentów. Zawiera gotowe komponenty (Box, HStack, VStack) oraz tokeny do odstępów, kolorów i typografii. Zamiast hard-codować wartości, używasz tokenów semantycznych – dzięki temu interfejs pozostaje spójny i łatwy do utrzymania. Idealne do budowania interfejsów użytkownika, gdy chcesz uniknąć powtarzania się i zapewnić konsystencję wizualną.
Jak używać
Zainstaluj skill core-components w swoim projekcie Claude lub agenta, wskazując repozytorium davila7/claude-code-templates.
Zamiast hard-codować wartości (np. padding={16} czy color="#333333"), zawsze sięgaj po tokeny z biblioteki – dla odstępów używaj $1, $2, $3, $4, $6, $8, dla kolorów $textPrimary, $backgroundSecondary, $statusError.
Przy budowaniu layoutu wybierz odpowiedni komponent: Box do podstawowych kontenerów, HStack do ułożenia elementów poziomo, VStack do pionowego.
Przekaż tokeny jako props komponentu, na przykład
zamiast . Dla typografii stosuj tokeny rozmiaru ($xs, $sm, $md, $lg, $xl, $2xl) i wagi czcionki ($semibold), aby utrzymać hierarchię tekstu zgodną z systemem designu.
Sprawdzaj tabelę tokenów w dokumentacji skill'u, gdy dodajesz nowy element – dzięki temu unikniesz duplikowania wartości i ułatwisz przyszłe zmiany designu.