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

•

Design Tools

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.

Key Features

01Comprehensive style guide and governance documentation generation

02Accessible component blueprinting with defined states and anatomy

0311 GitHub stars

04Implementation patterns optimized for React and Tailwind CSS v4

05Built-in support for dark mode and multi-theme CSS variable systems

06Automated semantic design token generation for colors, spacing, and typography

Use Cases

01Converting legacy stylesheets into a unified, variable-driven design system

02Documenting component libraries to improve cross-team collaboration and onboarding

03Bootstrapping a new project's UI foundation with standardized design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills design-system-creation

For use in Claude.ai and ChatGPT

Download Skill