skills.rest
GDSDN
GDSDNCOMMUNITY
Explore all skills by this author →
GitHub

setup-design-system

Initialize Atomic Design and Tailwind CSS v4 project scaffolding with design tokens.

3|Updated Feb 7, 2026
Search Tags:#design system#scaffolding#atomic design#storybook#tailwind#tokens#shadcn
One-click install
npx skills add https://github.com/GDSDN/kord-aios --skill setup-design-system-gdsdn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-design-system
Source: https://github.com/GDSDN/kord-aios/tree/main/src/features/builtin-skills/kord-aios/design-system/setup-design-system
Command: npx skills add https://github.com/GDSDN/kord-aios --skill setup-design-system-gdsdn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the setup of a robust design system structure, including token management, styling configurations, and essential dependencies, for both new and existing projects.

Core Features & Use Cases

  • Automated Project Scaffolding: Creates directories for components, tokens, and utilities based on Atomic Design principles.
  • Token Integration: Loads design tokens from specified sources (e.g., Brad's .state.yaml or manual files) and configures them for use with Tailwind CSS v4.
  • Dependency Management: Installs necessary libraries like class-variance-authority, tailwind-merge, and optionally Storybook.
  • Configuration Setup: Generates or merges configuration files for TypeScript, Jest, Storybook, and Tailwind CSS.
  • Use Case: Kickstart a new UI project by running this skill to establish a clean, token-driven design system architecture, ready for component development.

Quick Start

Run the setup skill to initialize the design system structure for your project.

Frequently Asked Questions about setup-design-system

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

FAQPage Schema
How do I set up a design system structure with Atomic Design and Tailwind CSS?▼

You can use this Skill to initialize a design system for existing projects, supporting brownfield scenarios by interactively merging configurations and installing necessary dependencies without overwriting your current state.

How do I manage design tokens for a Tailwind CSS v4 project?▼

Core dependencies installed include class-variance-authority and tailwind-merge for styling, and optionally Storybook for component development, ensuring a clean, token-driven architecture.

Can I add an existing design system to a project without breaking current configurations?▼

You can use this Skill to initialize a design system for existing projects, supporting brownfield scenarios by interactively merging configurations and installing necessary dependencies without overwriting your current state.

What dependencies are required to bootstrap a token-driven UI component architecture?▼

Core dependencies installed include class-variance-authority and tailwind-merge for styling, and optionally Storybook for component development, ensuring a clean, token-driven architecture.

Does this design system scaffolding generate configuration files for TypeScript and Jest?▼

Project scaffolding generates or merges configuration files for TypeScript, Jest, Storybook, and Tailwind CSS, establishing a complete foundation ready for immediate component development.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

design-token-critic

Audit design token systems for naming consistency and cross-platform parity.

Official
Advanced
strongeronstrongeron
18

sb-explore

Isolate UI component experiments from production directories in Storybook.

Community
Advanced
kid-sidkid-sid
186

tailwind

Standardize Tailwind UI styling with cva variants and tailwind-merge.

Community
Advanced
Pixel-Process-UGPixel-Process-UG
1

ui-design-system

Create scalable design systems with token-first architecture and Tailwind CSS v4.

Official
Advanced