skills.rest
hieutrtr
hieutrtrCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Apply design tokens and UI primitives to React/TypeScript projects.

8|1|Updated Feb 3, 2026
Search Tags:#accessibility#React#WCAG#Tailwind#UI components#design-system#design-tokens
One-click install
npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system-hieutrtr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/hieutrtr/ai1-skills/tree/main/skills/ui-design-system
Command: npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system-hieutrtr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured approach to creating and maintaining a consistent UI design system across React/TypeScript projects, reducing design drift and accelerating UI delivery.

Core Features & Use Cases

  • Enforce and apply design tokens (colors, typography, spacing) across components and pages.
  • Provide reusable UI primitives (buttons, cards, inputs) aligned to the design system and WCAG 2.1 AA guidelines.
  • Support design-to-code workflow: guide token setup, breakpoints, semantic HTML, and shadcn/ui integration for rapid UI composition.
  • Use Case: When starting a new React project, generate a cohesive component library scaffold and token config to ensure visual consistency from day one.

Quick Start

Install and configure the design system in your React project by following the guidelines in the repository README and the references/design-tokens-reference.md. Then begin integrating tokens and primitives into your components.

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 consistent UI design system in a React project?▼

To enforce a consistent UI design system in a React project, apply structured design tokens for spacing, color, and typography, and integrate reusable UI primitives aligned with WCAG 2.1 AA standards to prevent visual drift across components.

Does this design system skill work with Tailwind and shadcn/ui?▼

Yes, this design system skill works with Tailwind and shadcn/ui by guiding token setup and integrating shadcn/ui primitives, enabling rapid UI composition while maintaining semantic HTML and accessibility standards in React and TypeScript projects.

What's the best way to set up design tokens for React and TypeScript components?▼

The best way to set up design tokens for React and TypeScript components is to follow a structured reference guide that defines color, typography, and spacing configurations, ensuring semantic HTML and WCAG compliance from the initial project scaffold.

How do I ensure my UI components meet WCAG 2.1 AA accessibility standards?▼

To ensure UI components meet WCAG 2.1 AA accessibility standards, enforce semantic HTML structure and apply predefined design tokens for accessible color contrast and typography, integrating these rules directly into your React component development workflow.

Can I use this to generate a UI component library scaffold for a new web app?▼

Yes, you can use this to generate a cohesive UI component library scaffold and token configuration for new web apps, ensuring visual consistency and accessibility compliance from day one by applying predefined design tokens and shadcn/ui primitives.

Related Skills

Explore More Design & Creative Skills→
kazdenckazdenc
42

nextjs-init

Scaffold a Next.js project with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
rbaumierrbaumier
4

frontend

Build responsive React UI components with accessibility and performance patterns.

Community
Advanced
erikstmartinerikstmartin
16

tailwind-design-system

Implement a Tailwind v4 design system with semantic tokens and CVA components.

Community
Advanced
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate