skills.rest
yonatangross
yonatangrossCOMMUNITY
Explore all skills by this author →
𝕏@yonyonizGitHub

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

3|Updated Dec 27, 2025
Search Tags:#theming#accessibility#design system#design tokens#atomic design#component architecture
One-click install
npx skills add https://github.com/yonatangross/create-yg-app --skill design-system-starter-yonatangross
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-starter
Source: https://github.com/yonatangross/create-yg-app/tree/main/.claude/skills/design-system-starter
Command: npx skills add https://github.com/yonatangross/create-yg-app --skill design-system-starter-yonatangross

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a ready-to-use framework for building scalable, consistent user interfaces by combining design tokens, atomic component patterns, documentation templates, and accessibility guidelines, helping teams prevent design drift and accelerate UI delivery.

Core Features & Use Cases

  • Design tokens, typography, spacing, and color systems that can be exported to CSS variables and design tools.
  • Atomic design-based component architecture (Atoms, Molecules, Organisms, Templates, Pages) with ready-made templates and example components.
  • Documentation templates and audit checklists to maintain consistency and WCAG 2.1 AA accessibility.
  • Use case: Create a brand-new design system or evolve an existing one, producing tokens and patterns for new products.

Quick Start

Start by reviewing the SKILL.md to understand the philosophy and core concepts, then explore references/templates to begin token and component design, and finally apply the starter in your project by adapting tokens and governance checklists.

Frequently Asked Questions about design-system-starter

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

FAQPage Schema
How do I start building a scalable UI design system with design tokens?▼

A scalable UI design system uses design tokens, atomic component architecture, and documentation templates to prevent design drift. It combines token templates and accessibility guidelines to help frontend teams standardize design language and accelerate interface delivery.

What's the best way to structure component architecture using atomic design?▼

The best way to structure atomic design architecture is organizing components into Atoms, Molecules, Organisms, Templates, and Pages. This framework provides ready-made templates and example components to standardize UI patterns and accelerate frontend delivery.

How do I export design tokens to CSS variables for frontend theming?▼

You export design tokens to CSS variables by defining typography, spacing, and color systems with token templates. This starter kit provides templates that can be exported to CSS variables and design tools to standardize theming across projects.

Can I use this design system starter to meet WCAG 2.1 AA accessibility requirements?▼

Yes, this design system starter includes audit checklists and accessibility guidelines to meet WCAG 2.1 AA requirements. It provides reference artifacts and documentation templates to help teams maintain compliance during UI delivery.

Does this design system framework work for evolving an existing UI instead of starting new?▼

Yes, this design system framework works for evolving an existing UI. You can adapt its design tokens, atomic-component patterns, and governance checklists to refactor current products, resolve design drift, and produce new standardized patterns.

Related Skills

Explore More Design & Creative Skills→
wellsgzwellsgz

extract

Identify and extract reusable UI patterns, components, and design tokens into a centralized design system.

Community
Intermediate
datamonsterrdatamonsterr

tailwind-patterns

Implement Tailwind CSS v4 CSS-first patterns, container queries, and design tokens.

Community
Intermediate
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced