design-system-manager

Design tokens are reusable design values—colors, typography, spacing, shadows—stored centrally and exported to CSS variables, CSS-in-JS, or other formats. This Skill guides you through token creation, building light/dark and RTL themes, and maintaining a component registry so all products stay visually consistent and accessible.

Yes. This Skill includes color system setup with semantic naming, palette generation, and built-in contrast checking to meet WCAG accessibility standards. Token-based theming ensures accessible color combinations propagate across all components automatically.

Define a scalable type scale and spacing grid as design tokens, then apply them across projects via CSS variables or CSS-in-JS exports. This Skill handles responsive typography, cross-brand variations, and RTL layouts so spacing and type remain consistent at any scale.

This Skill provides a component registry with usage guidelines, prop documentation, and token reference materials. Paired with tooling integration like Style Dictionary, it generates living documentation that stays in sync with your token definitions.

Yes. This Skill integrates with Style Dictionary, CSS-in-JS libraries, and standard build pipelines. Tokens export to multiple formats so you can consume them in your existing toolchain—whether it's component libraries, web apps, or mobile projects.

Yes. This Skill manages multi-theme systems where a single token set powers light/dark modes and right-to-left layouts. CSS variables and semantic naming let you switch themes dynamically without duplicating token definitions.