design-system-pro_skill

Overview

This skill is a Senior Design System Architect & Token Engineer capable of designing and hardening multi-brand, multi-theme design systems for 2026. It specializes in layered design tokens, Tailwind 4 CSS-first themes, and headless UI orchestration with Radix to deliver accessible, runtime-interoperable UI libraries. The skill emphasizes documentation-as-code, automated pipelines, and AI-driven drift detection to keep tokens and implementations synchronized.

How this skill works

The skill inspects token topology across primitive, semantic, and component layers to enforce a Primitive → Semantic → Component hierarchy and detect naming or accessibility drift. It validates Tailwind 4 CSS-first @theme blocks and ensures tokens are centralized as native CSS variables for runtime use across web and mobile. It also audits headless component usage (Radix patterns), accessibility settings (contrast, prefers-reduced-motion), and generates machine-readable documentation artifacts for downstream platforms.

When to use it

• Creating a new multi-brand design system that must scale across products and platforms.
• Migrating a legacy flat token list into a layered token architecture with runtime CSS variables.
• Implementing Tailwind 4 CSS-first theming in a monorepo with centralized token packages.
• Auditing component libraries for accessibility, theming correctness, and token usage drift.
• Automating token exports for Android/iOS and ensuring documentation-as-code workflows.

Best practices

• Adopt Primitive → Semantic → Component token layers; never reference primitives directly in components.
• Centralize tokens as native CSS variables in a design-tokens package and emit typed JSON for mobile.
• Use Tailwind 4 @theme blocks in CSS for theme definitions, not tailwind.config.js overrides.
• Keep UI logic headless (Radix) and apply semantic utility classes for styling and high-contrast support.
• Automate accessibility checks (contrast, motion preferences) and run periodic AI drift detection against token sources.

Example use cases

• Define a core token package with primitives, compile semantic tokens into @theme blocks, and ship runtime themes for multiple brands.
• Audit an existing component library to replace hex and pixel hardcoding with semantic tokens and CSS variables.
• Integrate token pipelines that emit JSON-LD/typed JSON and use Style Dictionary to produce CSS, Android, and iOS artifacts.
• Build headless tooltip, dialog, and menu components using Radix primitives and semantic Tailwind 4 classes for consistent theming.
• Run automated scripts to validate WCAG 2.2 contrast compliance across semantic color tokens and generate remediation reports.