Can I use this for an existing project?

Yes, the skill includes workflows for auditing existing patterns, identifying inconsistencies, and establishing a migration strategy to a token-based system.

Does this work with Tailwind CSS?

Absolutely. It is optimized for modern Tailwind workflows using the @theme directive to define tokens and utility classes for component styling without custom CSS variables in class names.

How does this skill handle theming?

It provides patterns for W3C design tokens and native Tailwind CSS @theme integration, supporting both light and dark mode implementations with system preference detection.

Is it compliant with accessibility standards?

Yes, the skill includes comprehensive guidelines and implementation patterns for WCAG 2.1 Level AA compliance, including keyboard navigation and ARIA attributes.

What component architecture does it use?

It follows the Atomic Design methodology, organizing UI elements into Atoms, Molecules, Organisms, Templates, and Pages for maximum reusability and clarity.

Design System Starter

Name: Design System Starter
Author: yonatangross

byyonatangross

•

Design Tools

Architects scalable, accessible UI design systems using design tokens, atomic component patterns, and WCAG-compliant implementation guides.

This skill provides a comprehensive framework for building and evolving production-grade design systems within Claude Code. It establishes a robust foundation using the W3C design token format, Atomic Design methodology, and modern styling patterns like Tailwind CSS @theme integration. By providing standardized templates for React components, theming logic, and accessibility audits, it ensures visual consistency, high development velocity, and WCAG 2.1 Level AA compliance across any web application project.

Key Features

0129 GitHub stars

02W3C-compliant design token structures for colors, typography, and spacing

03Native Tailwind CSS @theme and dark mode implementation strategies

04Comprehensive WCAG 2.1 Level AA accessibility guidelines and ARIA patterns

05Atomic Design architecture patterns for scalable component hierarchies

06Production-ready React component templates and Storybook documentation structures

Use Cases

01Refactoring fragmented UI code into a unified, token-based component library

02Auditing and upgrading existing web applications for accessibility compliance

03Bootstrapping a new multi-themed application with a scalable design foundation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/skillforge-claude-plugin design-system-starter

For use in Claude.ai and ChatGPT

Download Skill