design-systems

Define reusable components and design tokens in JSON and TypeScript.

Updated Aug 23, 2026

Search Tags:#design system #style guide #component library #design tokens #atomic design #ui development

Ready to run

npx skills add https://github.com/toddbadams/SBFoundation --skill design-systems-toddbadams

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/toddbadams/SBFoundation/tree/main/.claude/skills/design/design-systems
Command: npx skills add https://github.com/toddbadams/SBFoundation --skill design-systems-toddbadams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps in the systematic creation and maintenance of design systems, ensuring consistency and efficiency in UI development.

Core Features & Use Cases

Component Library Development: Facilitates the creation of reusable UI components based on atomic design principles.
Design Token Management: Provides a structured approach to defining and managing design tokens (colors, spacing, typography, etc.).
Style Guide Creation: Aids in documenting design standards, component APIs, and best practices.
Use Case: A team is building a new web application and needs a consistent look and feel across all its interfaces. This Skill can be used to define the foundational design tokens and then build a library of atomic components that adhere to these tokens.

Quick Start

Use the design-systems skill to generate a new button component based on the provided design tokens.

Frequently Asked Questions about design-systems

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

FAQPage Schema

How do I build a scalable component library using atomic design principles?▼

To build a scalable component library using atomic design, define reusable UI components based on atomic principles and establish clear standards. This approach ensures consistency by constructing complex interfaces from foundational, reusable elements.

What is the best way to manage design tokens for a web application?▼

The best way to manage design tokens is using a structured approach to define and maintain variables like colors, spacing, and typography. This ensures a consistent look and feel across all application interfaces.

How do I generate a UI component from existing design tokens?▼

You generate a UI component from existing design tokens by referencing the token structures in JSON and TypeScript. This allows you to create elements like a button component that adheres strictly to the established standards.

How do I create a style guide for a UI component library?▼

You create a style guide for a UI component library by documenting design standards, component APIs, and best practices. This documents the foundational tokens and atomic components to maintain UI consistency.

Do I need TypeScript to define and manage design tokens?▼

TypeScript is supported for defining and managing design tokens, alongside JSON. These formats provide a structured approach to establishing variables like colors, spacing, and typography for your component library.