Component-Level Accessibility Audits for Design Systems

Where this fits

A developer has just finished a new Dialog component in the design system. Before opening a PR, they ask: 'Is this accessible?' Running a full page audit would miss the real issue—the component's markup and keyboard behavior. This skill audits that single component against WCAG 2.1 AA, so the fix happens at the source, not in every consumer later.

Why agents benefit

• Can execute a structured audit across five dimensions: keyboard navigation, screen reader experience, color and contrast, focus management, and ARIA implementation.
• Produces PASS/FAIL/WARN per criterion with specific remediation guidance, enabling the agent to suggest exact code changes instead of generic advice.
• Detects accessibility bugs at the component level, preventing them from propagating to every product that uses the component.
• Handles trigger phrases like 'check accessibility' or 'does this meet WCAG' directly, so developers can ask casually and still get a consistent audit.
• Supports a documented baseline (WCAG 2.1 AA) with references included, so output discipline is part of the skill's design.

Practical scenarios

Auditing a Button before handoff

A designer asks whether the primary Button meets screen reader support. The agent runs the skill, identifies missing aria-pressed state, and returns a WARN plus the exact attribute to add.

Reviewing a new Accordion in code review

A maintainer runs a 'keyboard navigation check' on the Accordion. The agent flags missing arrow-key handling and verifies that focus moves into and traps correctly inside the expanded panel.

Refactoring a legacy component

An engineer needs to upgrade an old Tooltip to WCAG 2.1 AA. The skill audits the current implementation, highlights contrast failures and dismiss behavior gaps, and prioritizes the fixes in dependency order.

Add it to your agent workflow

Install the skill:

npx skills add murphytrueman/design-system-ops --skill accessibility-per-component

Then ask naturally:

Agent: audit the Badge component for WCAG compliance and list remediation steps.

The agent will load the skill, run the five-dimension audit, and return a PASS/FAIL/WARN table with concrete fixes for the Badge.

Compare before adopting

Before making it a permanent part of your workflow, compare it against other accessibility audit skills and in-house prompts. Look at whether the skill's output includes references and remediation, not just a checklist. Check maintenance freshness: does the repo receive updates and community contributions? Also verify that the five dimensions match the failure modes your team actually encounters, and that it can slot into your existing PR or agent review process without extra manual steps.

Why it is worth tracking

This skill is worth tracking because it addresses accessibility at the component boundary, where a single fix has outsized impact across every product using the design system. With 174 stars and an active-looking GitHub repository under the Design System Ops umbrella, it shows early community momentum. Track it alongside your other agent skills and evaluate it when your design system team starts formalizing accessibility checks. You can monitor its quality signals at https://www.openagentskill.com/skills/murphytrueman-accessibility-per-component.