skills.rest
SamuelSaha
SamuelSahaCOMMUNITY
Explore all skills by this author →
GitHub

Design Systems

Establish design systems with W3C Design Tokens and Style Dictionary.

Updated Feb 18, 2026
Search Tags:#frontend architecture#design system#component library#design tokens#storybook#tailwind#ui development
One-click install
npx skills add https://github.com/SamuelSaha/Reqflow --skill design-systems-samuelsaha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design Systems
Source: https://github.com/SamuelSaha/Reqflow/tree/main/SWARM/skills/frontend/design-systems
Command: npx skills add https://github.com/SamuelSaha/Reqflow --skill design-systems-samuelsaha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses "design drift" and inconsistent UI development by establishing a robust, centralized system for design tokens and component architecture.

Core Features & Use Cases

  • Tokenization: Define and manage design tokens (colors, typography, spacing) for a single source of truth.
  • Component Patterns: Implement advanced patterns like Compound Components, Slot Pattern, and Render Props for reusable UI elements.
  • Variant API: Utilize class-variance-authority for consistent and flexible component styling.
  • Theming: Support for light/dark modes and brand theming via CSS variables.
  • Documentation: Integrate with Storybook for component visualization and documentation.
  • Use Case: Ensure all buttons across your application adhere to a consistent visual language and interactive states, regardless of which team develops them.

Quick Start

Apply the design-systems skill to establish a new component library architecture based on provided design constraints.

Frequently Asked Questions about Design Systems

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a scalable component library and prevent design drift?▼

Build a scalable component library by centralizing design tokens and component architecture. This establishes a single source of truth for UI development, eliminating visual inconsistencies across application teams.

How do I manage design tokens using the W3C format and Style Dictionary?▼

Manage design tokens using the W3C Design Tokens format and Style Dictionary build pipelines to define colors, typography, and spacing. This tokenization creates a maintainable foundation for consistent theming.

How do I create flexible variant APIs for UI components?▼

Create flexible variant APIs using class-variance-authority (CVA) patterns. This approach ensures consistent component styling while allowing advanced combinations of visual properties and interactive states.

Can I integrate Radix UI primitives and Tailwind CSS into my design system?▼

Yes, you can integrate Radix UI primitives and Tailwind CSS into your design system. This combination supports accessible UI development alongside CSS variable-based theme management for light and dark modes.

What is the best way to document component libraries with Storybook?▼

The best way to document component libraries is through Storybook integration. This provides component visualization and documentation, ensuring developers understand reusable elements like Compound Components and Render Props.

How do I support light and dark mode theming with CSS variables?▼

Support light and dark mode theming by defining brand themes via CSS variables. This method allows dynamic theme switching at runtime while maintaining the integrity of your core design tokens.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

tailwind-core-architecture

Explain Tailwind CSS utility-first architecture, content scanning, layers, and responsive design.

Official
Advanced
Camilo8902Camilo8902

storybook-setup

Automate Storybook setup and configuration for React, Next.js, and Vue3 projects.

Community
Intermediate
kimjuyoung1127kimjuyoung1127

dangapp-cva-factory

Build reusable UI primitives with class-variance-authority and a shared cn() merge path.

Community
Intermediate
raugadhraugadh
63

tailwindcss-development

Style components with Tailwind CSS v4 utilities for responsive design and dark mode.

Community
Intermediate