Architects scalable, themeable component libraries using structured design tokens and composable CSS patterns.
This skill empowers Claude to build production-ready design systems by implementing a rigorous three-layer token hierarchy (Primitive, Semantic, and Component). It provides a standardized framework for organizing CSS architecture, defining consistent component APIs, and implementing advanced theming systems—including dark mode and multi-brand support. It is ideal for developers and teams looking to establish a single source of truth for their visual language while ensuring accessibility and maintainability.
主な機能
01Dynamic theming support via data attributes for dark mode and high-contrast accessibility
021 GitHub stars
03Scalable 4px spacing system and multi-level elevation/shadow framework
04Built-in support for reduced motion and accessible focus indicators
05Standardized component API patterns for consistent sizes, variants, and interactive states
06Three-layer design token architecture (Primitive, Semantic, and Component-scoped tokens)
ユースケース
01Establishing CSS naming conventions and file structures for large-scale enterprise frontend projects.
02Retrofitting an existing application with a systematic theming engine and dark mode support.
03Building a shared UI library from scratch with consistent color, typography, and spacing scales.
