universal-design-system

Generates complete brand identity systems with color psychology, typography pairings, and visual identity rules mapped to Universal Design System palettes. Use when the user asks for brand identity, brand design, brand colors, style guide, or visual identity.

Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.

Audits existing UIs for WCAG accessibility, color contrast, typography hierarchy, spacing consistency, and industry anti-patterns. Generates scored reports with actionable fixes. Use when the user asks for design audit, UI audit, accessibility audit, or design review.

Design system governance and scaling: centralized vs federated, lifecycle, contribution model, multi-team adoption.

Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.

Internationalization and right-to-left layout using UDS localization data. Logical CSS properties, dir="rtl", text expansion, and RTL mapper for existing CSS.

Multi-brand and theming: derive palettes from base, palette overrides, data-theme, white-label UI using UDS tokens.

Performs deep review and testing of all code changes before creating a PR. Catches TypeScript errors, lint regressions, SonarCloud code smells, test failures, and output correctness issues that would fail CI. Use when the user asks for pre-PR review, deep review, or CI simulation.

Generates presentation design systems with consistent slide templates, typography rules, and color schemes mapped to Universal Design System palettes. Use when the user asks for slide design, presentation design, or deck templates.

Explains how to use the installed Universal Design System skills, pick which ones to use, and add or customize skills in your project. Use when the user asks about getting started with UDS or which skill to use.

UI spec and PRD: product type, sector, key components, palette, anti-patterns; plan before building; design_system.py --persist.

Focused CSS/styling helper that answers specific styling questions using Universal Design System tokens. Provides copy-paste CSS snippets with dark mode variants and responsive breakpoints.

MAIN skill — Intelligent design system generation. Domain detection, BM25 search, rule engine, palette selection, token resolution, Tailwind/React/Vue/Svelte output. Use when the user wants to build, design, or implement any UI (landing page, dashboard, app, component set, style guide).

MAIN skill — Intelligent design system generation. Domain detection, BM25 search, rule engine, palette selection, token resolution, Tailwind/React/Vue/Svelte output. Use when the user wants to build, design, or implement any UI (landing page, dashboard, app, component set, style guide).

This skill should be used when the user asks to "design a UI", "recommend a palette", "pick components for my app", "create a design system", "build a landing page", "style a dashboard", "choose typography", "set up dark mode", or needs guidance on UI/UX design, color palettes, component selection, design tokens, Tailwind config, accessibility compliance, or framework-specific component output (React, Vue, Svelte). Also triggers on "wcag", "contrast", "spacing", "layout", "hero section", "pricing table", "card design", "modal", "form design", "anti-pattern", "figma tokens", "shadcn", "radix", "fintech", "healthcare", "ecommerce", "startup", "enterprise", "crypto", "luxury brand", "education app", "mobile app design", "react native", or "app interface".