Design System

community-access/accessibility-agents

This is a reference sheet for validating design tokens against WCAG contrast requirements before they ship. It walks through the actual luminance math, gives you copy-paste JavaScript for checking ratios, and lists the exact config paths where tokens live in Tailwind, shadcn, MUI, and Chakra. The framework sections call out common failures like MUI's warning.main at 2.94:1 and Chakra's gray.400 at 2.85:1. It also covers focus ring requirements from WCAG 2.4.13, which need 3:1 contrast and at least 2px width. Use this when you're auditing a design system at the token level, not when you're fixing individual UI bugs. The HSL-to-hex converter is there because shadcn stores everything as HSL triplets without the wrapper function.

skills.sh installs

259

GitHub stars

442

last updated

Aug 21, 2026

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Design & UI/UX

1figma-create-design-system-rulesopenai/skillsGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r3.1Kskills.sh installs

2figma-create-design-system-rulesnexu-io/open-designGenerate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.2.9Kskills.sh installs

3figma-create-design-system-rulesfigma/mcp-server-guideGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r1.6Kskills.sh installs

4design-systemnextlevelbuilder/ui-ux-pro-max-skillToken architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales,50.5Kskills.sh installs

5migrate-design-systemplugin87/ux-ui-agent-skillsMap this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) —531skills.sh installs

6stitch-design-tasteleonxlnx/taste-skillSemantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, ca394.9Kskills.sh installs