skills.rest
williamgarciadev
williamgarciadevCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Apply design tokens and WCAG 2.1 AA patterns to HTML and React interfaces.

Updated Nov 1, 2025
Search Tags:#typography#accessibility#react#tokens#design-system#ui-patterns
One-click install
npx skills add https://github.com/williamgarciadev/Registro-participantes --skill design-guide-williamgarciadev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/williamgarciadev/Registro-participantes/tree/main/.claude/skill/design-guide
Command: npx skills add https://github.com/williamgarciadev/Registro-participantes --skill design-guide-williamgarciadev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A production-ready UI design system that ensures accessibility, consistency, and professional polish across interfaces, eliminating design drift and rework.

Core Features & Use Cases

  • Tokens & Semantics for all UI surfaces, including typography, color, spacing, and borders.
  • UX Patterns and components for dashboards, forms, and admin panels.
  • Accessibility First with WCAG 2.1 AA coverage and inclusive language.
  • Motion System and responsive design for modern, polished experiences.
  • Use Cases: Build enterprise dashboards, SaaS apps, landing pages, or marketing sites with a single design language.

Quick Start

Import the design tokens into your project, start building UI with the included components, and apply the design system to ensure consistency and accessibility.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I build an accessible React design system that meets WCAG 2.1 AA?▼

Build an accessible React design system by applying production-ready design tokens for typography, color, and spacing to enforce WCAG 2.1 AA compliance and eliminate design drift across UI components.

What design tokens do I need for a scalable SaaS UI?▼

Design tokens for a scalable SaaS UI include semantic definitions for typography, color, spacing, and borders. These tokens ensure consistent visual language and professional polish across all user interface surfaces.

Can I use this design system to build enterprise dashboards and admin panels?▼

Yes, you can use this design system to build enterprise dashboards and admin panels. It provides pre-configured UX patterns, responsive layouts, and motion systems specifically tailored for these complex interfaces.

How do I eliminate design drift across multiple React components?▼

Eliminate design drift across React components by importing a unified set of design tokens and semantic rules. This enforces a single source of truth for typography, color, and spacing across your team.

Does this design system include responsive patterns and motion guidelines?▼

Yes, the design system includes comprehensive responsive patterns and a motion system. These features enable modern, polished user experiences while maintaining strict accessibility standards across all devices.

What is the best way to ensure fast handoffs when building landing pages?▼

Ensure fast handoffs for landing pages by applying a shared design language with pre-established tokens, typography, and accessible UI patterns. This reduces rework and maintains visual consistency across marketing sites.

Related Skills

Explore More Design & Creative Skills→
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
Jofr3Jofr3

frontend-design

Generates HTML/CSS/JS or React/Vue components and pages from a design brief.

Community
Basic
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced