How do I install the Ss A11Y skill?

Run npx skillmds add majiayu000/ss-a11y in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Ss A11Y skill do?

Audit a component or page for accessibility issues and fix them It is listed under Web & Frontend on SkillMD.

Is Ss A11Y safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ss A11Y?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ss A11Y free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ss A11Y?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ss A11Y by majiayu000 — Agent Skill

Name: Ss A11Y
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

File contents

Accessibility Audit

When NOT to use

For general design system compliance review → use /ss-review
For Nielsen UX heuristics → use /ss-audit
For non-StyleSeed code (no data-slot, no semantic tokens) — assumes StyleSeed conventions
For runtime testing — this is a static code audit, not a screen-reader simulation

Target: $ARGUMENTS

Audit Criteria

WCAG 2.2 AA Compliance

1. Perceivable

Color contrast: Text must meet 4.5:1 (normal) or 3:1 (large/bold text)
- Check text-muted-foreground (#717182) on bg-background (#FFFFFF) = 4.6:1 (passes)
- Check text-brand on white (verify contrast with your skin's brand color)
- Flag any custom colors that don't meet ratio
Non-text contrast: UI controls/graphics must meet 3:1
Text alternatives: All <img> need alt, icons need aria-label when meaningful
Color independence: Don't convey info by color alone (add icons/text)

2. Operable

Touch targets: Minimum 44x44px (min-h-11 min-w-11)
- Common violation: h-9 (36px) buttons — should be h-11
- Icon buttons need explicit size: w-11 h-11
Keyboard navigation: All interactive elements must be keyboard-accessible
- Tab order should be logical
- focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

Motion: Animations must respect prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

3. Understandable

Labels: Form inputs must have visible labels or aria-label
Error messages: Form errors must be programmatically associated (aria-describedby)
Language: <html lang="en"> (or appropriate language code for your project)

4. Robust

Semantic HTML: Use appropriate elements (<button>, <nav>, <main>, <header>)
ARIA: Use Radix UI components (they handle ARIA automatically)
Roles: Custom interactive elements need proper role attributes

Design System Token Reference

Token	Minimum Contrast	Note
`--foreground`	7:1+	Body text — verify with your skin
`--muted-foreground`	4.5:1+	Secondary text — verify with your skin
`--brand`	4.5:1+	Accent — verify with your skin's brand color
`--destructive`	4.5:1+	Error — verify with your skin
`--success`	3:1+	Large text/icons only — verify with your skin
`--warning`	4.5:1+	Warning text — some skins need a darker variant

Output

Issues found: List with severity (Critical/Major/Minor)
Auto-fixes: Apply fixes directly where possible
Manual review needed: Flag items that need human judgment

---name: ss-a11ydescription: Audit a component or page for accessibility issues and fix them--- # Accessibility Audit ## When NOT to use - For general design system compliance review → use `/ss-review` - For Nielsen UX heuristics → use `/ss-audit` - For non-StyleSeed code (no `data-slot`, no semantic tokens) — assumes StyleSeed conventions - For runtime testing — this is a static code audit, not a screen-reader simulation Target: **$ARGUMENTS** ## Audit Criteria ### WCAG 2.2 AA Compliance #### 1. Perceivable - **Color contrast**: Text must meet 4.5:1 (normal) or 3:1 (large/bold text) - Check `text-muted-foreground` (#717182) on `bg-background` (#FFFFFF) = 4.6:1 (passes) - Check `text-brand` on white (verify contrast with your skin's brand color) - Flag any custom colors that don't meet ratio - **Non-text contrast**: UI controls/graphics must meet 3:1 - **Text alternatives**: All `<img>` need `alt`, icons need `aria-label` when meaningful - **Color independence**: Don't convey info by color alone (add icons/text) #### 2. Operable - **Touch targets**: Minimum 44x44px (`min-h-11 min-w-11`) - Common violation: `h-9` (36px) buttons — should be `h-11` - Icon buttons need explicit size: `w-11 h-11` - **Keyboard navigation**: All interactive elements must be keyboard-accessible - Tab order should be logical - `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2` - **Motion**: Animations must respect `prefers-reduced-motion` ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` #### 3. Understandable - **Labels**: Form inputs must have visible labels or `aria-label` - **Error messages**: Form errors must be programmatically associated (`aria-describedby`) - **Language**: `<html lang="en">` (or appropriate language code for your project) #### 4. Robust - **Semantic HTML**: Use appropriate elements (`<button>`, `<nav>`, `<main>`, `<header>`) - **ARIA**: Use Radix UI components (they handle ARIA automatically) - **Roles**: Custom interactive elements need proper `role` attributes ## Design System Token Reference | Token | Minimum Contrast | Note | |-------|-----------------|------| | `--foreground` | 7:1+ | Body text — verify with your skin | | `--muted-foreground` | 4.5:1+ | Secondary text — verify with your skin | | `--brand` | 4.5:1+ | Accent — verify with your skin's brand color | | `--destructive` | 4.5:1+ | Error — verify with your skin | | `--success` | 3:1+ | Large text/icons only — verify with your skin | | `--warning` | 4.5:1+ | Warning text — some skins need a darker variant | ## Output 1. **Issues found**: List with severity (Critical/Major/Minor) 2. **Auto-fixes**: Apply fixes directly where possible 3. **Manual review needed**: Flag items that need human judgment

Frequently asked questions