skills.rest
josephblais
josephblaisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Validate design system tokens against WCAG AA/AAA accessibility standards.

Updated Mar 10, 2026
Search Tags:#accessibility#WCAG#design tokens#tailwind#mui#contrast ratio#focus indicators
One-click install
npx skills add https://github.com/josephblais/jeeby-cms --skill design-system-josephblais
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/josephblais/jeeby-cms/tree/main/.github/skills/design-system
Command: npx skills add https://github.com/josephblais/jeeby-cms --skill design-system-josephblais

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the critical challenge of ensuring design system tokens meet accessibility standards, specifically WCAG AA/AAA contrast ratios, focus appearance, and touch target compliance, before they are implemented in UI.

Core Features & Use Cases

  • Contrast Ratio Computation: Calculates WCAG contrast ratios for color token pairs.
  • Framework Token Paths: Provides reference paths for design tokens in Tailwind CSS, shadcn/ui, Material UI, Chakra UI, and Style Dictionary.
  • Focus Appearance Validation: Details WCAG 2.4.13 Focus Appearance requirements and provides compliant implementation examples.
  • Use Case: Before releasing a new design system update, use this Skill to audit all color pairs against WCAG AA contrast requirements, identify any failing focus ring implementations, and ensure spacing tokens meet touch target minimums.

Quick Start

Use the design-system skill to audit the contrast ratio between the color tokens '#6B7280' and '#FFFFFF'.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I check WCAG AA contrast ratios for design tokens?▼

To check WCAG AA contrast ratios for design tokens, input specific color token pairs like '#6B7280' and '#FFFFFF'. The validator computes the exact contrast ratio and confirms whether the pair meets WCAG AA or AAA accessibility standards for your UI.

What are the WCAG 2.4.13 focus appearance requirements?▼

WCAG 2.4.13 focus appearance requirements dictate specific size and contrast metrics for focus indicators. The validator details these requirements and provides compliant focus ring implementation examples to ensure keyboard accessibility in your design system.

Can I validate design tokens for Tailwind CSS and Material UI?▼

Yes, you can validate design tokens for Tailwind CSS, Material UI, Chakra UI, and shadcn/ui. The validator identifies the correct framework token paths, ensuring your color and spacing tokens are correctly mapped and audited for accessibility compliance.

How do I ensure spacing tokens meet touch target compliance?▼

To ensure spacing tokens meet touch target compliance, reference the motion and spacing token data provided by the validator. This reference data confirms your spacing values satisfy minimum touch target sizes for interactive UI elements.

What is the best way to audit a design system for WCAG AAA compliance?▼

The best way to audit a design system for WCAG AAA compliance is to validate all color token pairs against contrast requirements, check focus ring implementations against WCAG 2.4.13, and verify spacing tokens meet touch target minimums before releasing the UI update.

Related Skills

Explore More Design & Creative Skills→
LinusConradMLinusConradM

ux-designer

Define CSS visual specifications for the CRPD Dashboard with WCAG 2.2 AA compliance.

Community
Advanced
ngocp-0847ngocp-0847
1

ui-styling

Compose React UIs using shadcn/ui components with Tailwind CSS styling.

Community
Advanced
ForgePlanForgePlan
3

canvas-port

Port Pencil design systems to web frameworks with token contracts and visual regression tests.

Official
Advanced
Higashi-KotaHigashi-Kota

accessibility-review

Audit design system tokens and components for WCAG compliance.

Community
Intermediate