Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Design System Auditor · community-access | DecimalAI

frontendby community-access

Design System Auditor

community-access/design-system-auditor

Source community-access/accessibility-agents ↗License MIT

Design system accessibility auditor. Validates color tokens, CSS custom properties, Tailwind config, and design token files (Style Dictionary, tokens.json) for WCAG AA/AAA contrast compliance. Catches contrast failures at the token source before they reach deployed UI. Also validates focus ring tokens (WCAG 2.4.13 Focus Appearance), motion tokens (prefers-reduced-motion), and spacing tokens for touch target compliance. Supports MUI, Chakra UI, Radix, shadcn/ui, and Style Dictionary.

SkillScore95Maintained

On-demandOn-demand: invoked explicitly — never occupies your agent's context until called.

Frontend / UI pack

Last verified 8/22/2026

What it changes

Passed 21 of 22 test cases with the skill, and 13 of 22 without it.

Without skill59%

With skill95%

Checks it passed that the model alone missed

Directs WCAG criteria questions to wcag-guide.
Identifies 2px as the minimum required focus ring thickness.
Declines full HTML markup accessibility auditing and suggests delegating to accessibility-lead.

and 5 more in the full report

8 fixed13 passed either way1 still failing0 broke

Pass-rate lift: +36 pp
Tokens: +142%
Agent turns: 0%
Response time: -46%

Model gemini-3.6-flashMeasured 8/22/2026v2 · latest is v321 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

This benchmark measured an earlier version of the skill.

A newer attempt on gemini-3.6-flash on 10/1/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/community-access-design-system-auditor/SKILL.md https://app.decimal.ai/s/community-access-design-system-auditor/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add community-access-design-system-auditor, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/community-access-design-system-auditor/ and pins it in .decimal/skills.lock

decimalai skills add community-access-design-system-auditor

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/community-access-design-system-auditor/SKILL.md https://app.decimal.ai/s/community-access-design-system-auditor/SKILL.md

Raw file: /s/community-access-design-system-auditor/SKILL.md ↗ · machine-readable summary at /s/community-access-design-system-auditor.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 8

Prompt

Please run a full web accessibility audit on our rendered HTML page markup, checking screen reader landmark roles, aria-expanded attributes, and DOM node heading hierarchy.

What was checked, without and with the skill
Checked	Without skill	With skill
Declines full HTML markup accessibility auditing and suggests delegating to accessibility-lead.	Missed	Passed

case-05 · gemini-3.6-flash · 8/22/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md151 lines2 files

You are the Design System Accessibility Auditor - an expert in catching contrast failures, missing focus styles, and spacing violations at the token level, before they reach deployed UI. You audit design token files, CSS custom properties, Tailwind configuration, and component library theme files. You do NOT audit rendered HTML - for runtime UI auditing hand off to contrast-master or accessibility-lead.

Phase 0: Identify Design System and Scope

Ask the user before reading any files:

Q1 - Design system type:

Tailwind CSS (tailwind.config.js / tailwind.config.ts)
CSS custom properties only (tokens.css / variables.css)
Style Dictionary (tokens.json / config.json)
Material UI (MUI) theme file
Chakra UI theme
Radix UI / shadcn/ui CSS variables
Custom design token format (specify)

Q2 - Audit scope:

Full token audit (color + spacing + focus + motion)
Color contrast only
Focus ring tokens only (WCAG 2.4.13)
Spacing / touch target tokens only
Motion / animation tokens only

Q3 - WCAG target level:

AA (4.5:1 normal text, 3:1 large text and UI components) - minimum
AAA (7:1 normal text, 4.5:1 large text) - enhanced
Both (flag AA failures and AAA opportunities)

Phase 3: Spacing Token Analysis (Touch Targets)

WCAG 2.5.8 (AA, 2.2): Target size minimum 24 x 24 CSS px, with spacing such that targets don't overlap within a 24px radius. Best practice (WCAG 2.5.5 AAA): 44 x 44 CSS px.

3.1 Token Paths to Check

Track record

Benchmark

21 / 22

test cases passed, vs 13 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 10/1/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

community-access / accessibility-agents

codex-skills/design-system-auditor/SKILL.md

View on GitHub ↗

License MITImported 10/1/2026Version v3Bundled 1 file

More skills from the same source and nearby in the registry, with their headline benchmark lift.