Skill library / Cursor

Accessibility Audit skill for Cursor

Accessibility bugs are easy to ship and hard to spot. This skill makes Cursor check components against WCAG 2.2 and fix issues in place.

What it's good for

• Pre-launch checks on new pages
• Fixing issues raised in an external audit
• Building accessible design-system components

How the skill works

1. Scan for images without alt text and inputs without labels
2. Check interactive elements are keyboard reachable with visible focus
3. Review ARIA usage (prefer native elements)
4. Flag colour contrast issues in styles
5. Fix issues and list each with its WCAG criterion

Built-in rules

• Prefer semantic HTML over ARIA
• Never remove focus outlines without a replacement
• Cite the WCAG success criterion for each fix

Example

You: “Audit the checkout form”
Result: 7 issues fixed: 3 missing labels, 1 div-button, 2 contrast failures, 1 missing error announcement.

SKILL.md template

Save as accessibility-audit/SKILL.md.

---
name: accessibility-audit
description: "Audits UI code for WCAG 2.2 accessibility issues (labels, contrast, keyboard access, ARIA) and fixes them. Use when the user asks for an accessibility check, a11y audit or WCAG compliance."
---

# Accessibility Audit

## Workflow
1. Scan for images without alt text and inputs without labels
2. Check interactive elements are keyboard reachable with visible focus
3. Review ARIA usage (prefer native elements)
4. Flag colour contrast issues in styles
5. Fix issues and list each with its WCAG criterion

## Rules
- Prefer semantic HTML over ARIA
- Never remove focus outlines without a replacement
- Cite the WCAG success criterion for each fix

How to install in Cursor

Put the folder in .cursor/skills/ (or .agents/skills/), or copy the included .mdc file into .cursor/rules/.

Pro tip

Set globs to your components and pages so it applies during UI work only.

FAQ

Related skills

• React Component Generator skill for Cursor
• Unit Test Writer skill for Cursor
• SQL Query Helper skill for Cursor