design-system-creator

Design systems built from tokens organize UI properties into three tiers—primitive, semantic, and component—then structure CSS using ITCSS methodology to generate production-ready stylesheets. This Skill provides token architecture templates, CSS organization guidance, and component documentation to establish a scalable, consistent foundation.

Component libraries require standardized documentation templates, usage guidelines, and clear relationships to tokens. This Skill generates ready-made templates, style guides, and anti-pattern guidance to accelerate library creation and ensure consistent component behavior across teams.

Theming strategies use semantic tokens and CSS variables to swap color palettes and accessibility-compliant modes without duplicating component code. This Skill covers cross-brand token structures, dark-mode activation triggers, and multi-brand token support to enable flexible theme switching.

Yes. Multi-brand systems share a primitive token layer and diverge at the semantic and component levels, allowing brands to reuse CSS architecture while maintaining distinct visual identities. This Skill includes token-structure guidance and templates for scaling across multiple brands.

Token explosion, semantic-layer drift, and inconsistent naming conventions undermine scalability. This Skill provides anti-pattern documentation and best practices to prevent common pitfalls and maintain long-term system health.