How does it handle dark mode?

It implements theming at the foundation layer using CSS variables, allowing for instant switching between light, dark, and custom brand themes.

What frameworks does this skill support?

While the skill outputs standard CSS variables and React patterns, it is designed to be framework-agnostic and works seamlessly with Tailwind CSS, Styled Components, and modern web standards.

Can I use this to manage existing design systems?

Absolutely. You can use it to audit current styles, refactor hard-coded values into tokens, or expand existing libraries with new patterns and documentation.

Does it include accessibility standards?

Yes, the skill integrates WCAG 2.1 AA compliance guidelines into component definitions, including focus states, ARIA roles, and color contrast recommendations.

Design System Architect

Name: Design System Architect
Author: secondsky

bysecondsky

•

デザインツール

Generates scalable design systems featuring semantic tokens, accessible component libraries, and comprehensive UI documentation.

概要

The design-system-creation skill empowers Claude to act as a lead design engineer, automating the construction of robust UI foundations for web applications. It builds everything from foundational design tokens—including color palettes, typography scales, and spacing systems—to high-level React components and governance workflows. By emphasizing WCAG accessibility, dark mode support, and CSS-variable architecture, this skill ensures consistency across large development teams and provides a clear roadmap for scaling frontend interfaces from prototype to production.

主な機能

Comprehensive style guide and governance documentation generation
Accessible component blueprinting with defined states and anatomy
11 GitHub stars
Implementation patterns optimized for React and Tailwind CSS v4
Built-in support for dark mode and multi-theme CSS variable systems
Automated semantic design token generation for colors, spacing, and typography

ユースケース

Converting legacy stylesheets into a unified, variable-driven design system
Documenting component libraries to improve cross-team collaboration and onboarding
Bootstrapping a new project's UI foundation with standardized design tokens

概要

主な機能

Comprehensive style guide and governance documentation generation
Accessible component blueprinting with defined states and anatomy
11 GitHub stars
Implementation patterns optimized for React and Tailwind CSS v4
Built-in support for dark mode and multi-theme CSS variable systems
Automated semantic design token generation for colors, spacing, and typography

ユースケース

Converting legacy stylesheets into a unified, variable-driven design system
Documenting component libraries to improve cross-team collaboration and onboarding
Bootstrapping a new project's UI foundation with standardized design tokens