skills.rest
xvawl
xvawlCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Establish scalable UI design systems with tokens and shadcn/ui for React/TypeScript projects.

1|Updated Feb 7, 2026
Search Tags:#typescript#accessibility#react#tailwind#design-system#shadcn-ui#ui-tokens
One-click install
npx skills add https://github.com/xvawl/template-nextjs --skill ui-design-system-xvawl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/xvawl/template-nextjs/tree/main/.agents/skills/ui-design-system
Command: npx skills add https://github.com/xvawl/template-nextjs --skill ui-design-system-xvawl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The UI design system skill helps teams implement and maintain a consistent UI language across React/TypeScript projects by centralizing components, tokens, spacing, typography, and accessibility standards.

Core Features & Use Cases

  • Enforce a cohesive design system for new UI components, layouts, and tokens
  • Manage color, typography, and spacing with 8pt grid integration and Tailwind token mappings
  • Ensure WCAG 2.1 AA compliance and semantic HTML while integrating shadcn/ui primitives
  • Use for token setup, design reviews, component implementation, and design-code conformance

Quick Start

Inspect your Tailwind config and design tokens, then implement a starter UI component following the design system.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I enforce a scalable UI design system in React and TypeScript?▼

A scalable UI design system is enforced by centralizing design tokens, component primitives, and accessibility standards across React and TypeScript projects. This skill provides token management for colors, typography, and spacing using an 8pt grid with Tailwind mappings.

How do I map design tokens to Tailwind using an 8pt grid?▼

Mapping design tokens to Tailwind using an 8pt grid involves configuring your spacing and sizing scales to match 8pt increments. This skill enforces these design token standards to maintain visual consistency across breakpoints.

Does this design system integration support shadcn/ui and WCAG 2.1 AA compliance?▼

Yes, this design system integration supports shadcn/ui component primitives while ensuring WCAG 2.1 AA compliance. It enforces semantic HTML and accessibility standards across all breakpoints for React projects.

What is the best way to manage color and typography tokens for a React UI?▼

The best way to manage color and typography tokens for a React UI is by centralizing them as design tokens mapped to Tailwind configurations. This skill provides documentation and guidance for token usage and component interfaces to ensure consistency.

Can I use this for design reviews and component implementation conformance?▼

Yes, you can use this for design reviews, component implementation, and design-code conformance. It helps teams inspect Tailwind configs and design tokens to implement starter UI components that follow the established system.

Related Skills

Explore More Design & Creative Skills→
HeatMarieHeatMarie

design-guide

Document Paperclip UI components, design principles, and tokens for React projects.

Community
Intermediate
vobasevobase
59

react:components

Convert Stitch HTML designs into modular React components with shadcn/ui and Tailwind.

Official
Advanced
solrac97grsolrac97gr
2

new-component

Generate React components with TypeScript, Tailwind CSS, unit tests, and Storybook stories.

Community
Intermediate
iAmAdheiliAmAdheil

react-shadcn-tailwind-builder

Automate React UI construction with shadcn-ui and Tailwind.

Community
Advanced