design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
How to use
Zainstaluj skill w swoim środowisku Claude lub Copilota, wskazując repozytorium davila7/claude-code-templates.
Opisz swoją potrzebę w naturalnym języku, na przykład: "Stwórz system designu dla mojej aplikacji React z obsługą dark mode'u" lub "Ustaw tokeny designu dla kolorów i spacing'u".
Skill wygeneruje tokeny designu w formacie JSON zgodnym ze standardem W3C, zawierające kolory, typografię, spacing i cienie.
Otrzymasz architekturę komponentów zorganizowaną wg metodologii atomic design (atomy, molekuły, organizmy) wraz z szablonami React komponentów.
Jeśli potrzebujesz dark mode'u, skill skonfiguruje zmienne CSS lub ThemeProvider do dynamicznego przełączania tematów.
Przejrzyj dołączone szablony dokumentacji i checklist audytu systemu designu, aby upewnić się, że wszystkie komponenty spełniają standardy dostępności i są prawidłowo udokumentowane.