system▌

CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns. \n \n Migrates configuration from tailwind.config.ts to CSS @theme blocks with native CSS variables, OKLCH color spaces, and @custom-variant for dark mode \n Provides production-ready component patterns including CVA-based variants, compound components, form controls, grids, and animations using native @keyframes and @starting-style \n Includes design token hierarchy (brand → semantic → component)

Production-grade UI design with design tokens, layout rules, motion guidance, and accessibility validation. \n \n Provides structured design token system covering colors, typography, spacing, shadows, and breakpoints for consistent scaling across projects \n Includes layout specification templates for different page types (landing, dashboard, form, blog, e-commerce) with responsive breakpoint rules \n Offers motion guidelines with easing curves, transition durations, and interaction patterns for

Establish design token hierarchies, theming infrastructure, and component architecture for scalable design systems. \n \n Covers three-layer token organization: primitive tokens (raw values), semantic tokens (contextual meaning), and component tokens (specific usage) \n Includes theme switching patterns with CSS custom properties, React context providers, system preference detection, and persistent storage \n Provides component architecture patterns including compound components, polymorphic var

Token architecture, component specifications, systematic design, slide generation.

Core commands and best practices for Linux system administration, including system information viewing, resource monitoring, service management, etc.

This skill implements collaborative and content-based recommendation systems with matrix factorization techniques to predict user preferences, increase engagement, and drive conversions through personalized item suggestions.

../../../product-team/ui-design-system/SKILL.md

Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.

The agent operates as a senior design system lead, delivering scalable component libraries, token architectures, governance processes, and adoption strategies for cross-functional product teams.

Basic event emission: