design-systems

Design scalable design systems with W3C tokens, CSS theming, and CVA/Radix APIs.

16|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill design-systems-jce-joshhh77
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/JCE-Joshhh77/JCE-Opencode-Tools/tree/main/config/skills/design-systems
Command: npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill design-systems-jce-joshhh77

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design systems help teams achieve visual consistency and accelerate UI development by centralizing tokens, theming, and reusable component APIs.

Core Features & Use Cases

  • Design Tokens (W3C format) to standardize colors, spacing, radii, and typography across apps.
  • Theming with CSS variables (light/dark) to enable seamless theme switches without runtime re-renders.
  • Component API design using CVA + Radix UI to compose accessible, scalable components.
  • Storybook configuration and documentation to showcase components, variants, and interactions.

Quick Start

Define tokens, themes, and a reusable component API to bootstrap a cohesive design system across your apps.

Frequently Asked Questions about design-systems

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

FAQPage Schema
How do I set up a design system with W3C design tokens and CSS variables?

To set up a design system with W3C design tokens and CSS variables, you define standardized tokens for colors, spacing, and typography, then apply them via CSS variables to enable seamless light/dark theme switching without runtime re-renders.

What is the best way to build accessible component APIs using Radix and CVA?

The best way to build accessible component APIs using Radix and CVA is to pair Radix UI primitives with Class Variance Authority (CVA) to compose scalable, accessible components that enforce a consistent visual language across multiple applications.

How do I configure Storybook documentation for a CVA and Radix-based component library?

Configuring Storybook documentation for a CVA and Radix-based component library involves setting up Storybook to showcase your reusable components, their variants, and interactions, ensuring your design system's visual language and accessible behaviors are properly documented.

Can I use W3C design tokens to standardize theming across multiple apps?

Yes, you can use W3C design tokens to standardize theming across multiple apps. The tokens enforce a consistent visual language for colors, spacing, radii, and typography, ensuring visual cohesion and accelerating UI development across your applications.

Does CSS variable theming work with CVA and Radix UI for dark mode switching?

Yes, CSS variable theming works with CVA and Radix UI for dark mode switching. By defining light and dark themes via CSS variables, you can enable seamless theme switches that apply across your accessible Radix components without triggering runtime re-renders.