design-system-patterns
Buduj skalowalne systemy projektowania z tokenami, tematami i bibliotekami komponentów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia spójnych i łatwych w utrzymaniu fundamentów interfejsu użytkownika. Pracuj z tokenami projektowania (kolory, typografia, odstępy), implementuj przełączanie motywów jasny/ciemny, buduj biblioteki komponentów o spójnych interfejsach API oraz ustalaj przepływy pracy od projektu do kodu. Obsługuje CSS custom properties, React context, synchronizację z Figmą i generowanie tokenów dla wielu platform (CSS, iOS, Android).
Jak używać
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.