design-guide

Name: design-guide
Availability: InStock
Author: williamgarciadev

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

Ready to run

npx skills add https://github.com/williamgarciadev/Registro-participantes --skill design-guide-williamgarciadev

💬 Prompt for ChatGPT / Claude Chat▼

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.