Ux Design Systems

What it does

This skill assists with building UX design systems, enabling consistent and maintainable frontend user interfaces. It focuses on utilizing design tokens (CSS variables and TypeScript types) to manage colors, typography, spacing, border radius, shadows, and component styling. The skill also demonstrates a button component example using class-variance-authority and provides an approach for implementing dark mode through CSS-based theme switching.

When to use it

• When you need to create reusable UI components with consistent styling.
• For establishing a standardized design language across your frontend projects.
• To implement theming, including light and dark modes.
• When building UIs that require maintainable code and easy style updates.
• To ensure visual consistency in user experiences.

Key capabilities

• Design Tokens: Management of CSS variables for colors, typography, spacing, border radius, and shadows.
• TypeScript Token System: Defining design tokens using TypeScript for type safety and improved developer experience.
• Component Patterns: Demonstrates a button component example with variants and sizes.
• Dark Mode Implementation: Provides an example of CSS-based theme switching for dark mode functionality.

Example prompts

• "Show me the color token definitions for primary."
• "Generate a TypeScript type definition for spacing tokens."
• "How can I implement dark mode using this skill?"
• “Give me the code for the button component with the secondary variant and small size.”

Tips & gotchas

• This skill focuses on design system implementation, not general UI/UX research or user testing.
• The provided examples use class-variance-authority which may require familiarity with that library.