design-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
How to use
Zainstaluj skill w swoim projekcie agenta, dodając referencję do wtyczki design-system-patterns z repozytorium.
Zdefiniuj tokeny projektowania w strukturze primarne (surowe wartości: kolory, rozmiary, czcionki), semantyczne (znaczenie kontekstowe: text-primary, surface-elevated) i komponentowe (użycie specificzne: button-bg, card-border).
Skonfiguruj infrastrukturę tematyzacji, ustawiając CSS custom properties i dostawcę kontekstu React do dynamicznego przełączania motywów, w tym obsługę preferencji systemowych (prefers-color-scheme).
Zbuduj bibliotekę komponentów, stosując wzorce compound components, komponenty polimorficzne (prop as) i systemy wariantów oraz rozmiarów.
Jeśli używasz Figmy, skonfiguruj synchronizację tokenów za pomocą Style Dictionary, aby automatycznie generować tokeny dla CSS, iOS i Android.
Zintegruj pipeline tokenów z CI/CD, aby aktualizacje tokenów były wdrażane automatycznie w całym projekcie.