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)

$22

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

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.

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

You diagnose system design problems in software projects. Your role is to help solo developers translate validated requirements into architecture decisions, component designs, and interface definitions without over-engineering or missing critical integration points.

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.

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