Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

ss-a11y Accessibility Audit

Statically audits a component or page against WCAG 2.2 AA and auto-fixes what it safely can.

Design & UIIntermediate★ 880⑂ 77AI score 6/10Last updated: Aug 6, 2026

What it does

Reads the file you point it at and flags accessibility problems using WCAG 2.2 AA criteria:

  • Perceivable: 4.5:1 text contrast (3:1 for large/bold), 3:1 non-text contrast, missing alt / aria-label, information conveyed by color alone
  • Operable: 44x44px touch targets (the classic h-9 → h-11 violation), keyboard reachability, focus-visible:ring-2 focus rings, prefers-reduced-motion handling
  • Understandable: input labels, error messages wired with aria-describedby, <html lang>
  • Robust: semantic elements, ARIA via Radix UI primitives, role on custom interactive widgets

Output is a severity-tagged issue list (Critical/Major/Minor), applied auto-fixes, and items flagged for human judgment. A design-token contrast table is included as reference.

Who it's for

  • React/Tailwind frontend devs who want accessibility checks in their normal loop
  • Teams on a design system following StyleSeed conventions (data-slot, semantic tokens)
  • Reviewers catching a11y regressions before merge

Note: this is a static code audit, not a screen-reader simulation. Use /ss-review for design-system compliance and /ss-audit for Nielsen UX heuristics.

Examples

  1. /ss-a11y src/components/ui/button.tsx — catches an icon button missing w-11 h-11 sizing and a missing aria-label, then fixes both.
  2. /ss-a11y app/settings/page.tsx — reports unlabeled inputs and error text not associated via aria-describedby.
  3. /ss-a11y src/components/Toast.tsx — marks as Major an animation that ignores prefers-reduced-motion plus a low-contrast --warning token.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/ss-a11y/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the engine/.claude/skills/ss-a11y folder from the GitHub repo bitjaru/styleseed into my ~/.claude/skills/ss-a11y/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed && mkdir -p ~/.claude/skills && cp -r /tmp/styleseed/engine/.claude/skills/ss-a11y ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo into a temp folder: git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
  3. Create the skills folder if needed: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r /tmp/styleseed/engine/.claude/skills/ss-a11y ~/.claude/skills/
  5. Verify that ~/.claude/skills/ss-a11y/SKILL.md exists.
  6. Restart Claude Code and run it with a file path, e.g. /ss-a11y src/components/Button.tsx.
  7. If you are not using StyleSeed, edit the token contrast table (--brand, --warning, etc.) in SKILL.md to match your own color values.
View source on GitHub ↗License: MIT