design-guide

Guide frontend development with Baton UI design system components and tokens.

3|2|Updated Mar 6, 2026

Search Tags:#react #design system #design tokens #tailwind css #frontend development #ui components

Ready to run

npx skills add https://github.com/atototo/baton --skill design-guide-atototo

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to Baton's UI design system, ensuring consistency, reusability, and adherence to design principles across the frontend.

Core Features & Use Cases

Component Creation Guidelines: Learn how to build new UI components following established patterns.
Design Tokens & Typography: Understand and utilize the defined color palettes, spacing, and text styles.
Composition Patterns: Discover how to combine components effectively for common UI structures.
Use Case: When developing a new feature, consult this guide to ensure new components match the existing look and feel, use the correct color tokens, and follow established layout patterns.

Quick Start

Use the design-guide skill to understand how to create a new button component.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I build consistent React UI components using design tokens?▼

Build consistent React UI components by referencing a centralized design system that defines color palettes, spacing, and typography tokens. The Baton UI guide provides specific component creation patterns and composition rules to ensure your new elements match the established look and feel.

What are design tokens and how do they work with Tailwind CSS?▼

Design tokens are predefined variables for colors, spacing, and text styles that ensure visual consistency across a frontend. The Baton design system integrates these tokens directly with Tailwind CSS utility classes, allowing developers to apply standardized styles without hardcoding values.

Can I use shadcn/ui and Radix UI primitives with this design system?▼

Yes, the Baton UI design system is built upon shadcn/ui and Radix UI primitives. The guide explicitly references these libraries to ensure that the component creation patterns and composition structures maintain accessibility and foundational behaviors.

How do I create a new button component that matches an existing UI design system?▼

To create a new button component, consult the Baton design guide to apply the correct typography, color tokens, and spacing variables. The guide outlines step-by-step composition patterns utilizing Tailwind CSS and Radix UI primitives to ensure reusability.

What is the best way to structure composition patterns for frontend UI components?▼

The best way to structure composition patterns is to follow the established guidelines in the Baton design system. It details how to effectively combine shadcn/ui elements and Radix UI primitives to create common UI structures while maintaining design tokens and layout consistency.

Does this design system guide provide a showcase page for UI components?▼

Yes, the Baton UI design system includes a dedicated showcase page. This page allows you to visually verify that your newly created components adhere to the defined design tokens, typography styles, and overall composition patterns before integrating them.