Ss A11y
- 253 installs
- 868 repo stars
- Updated August 3, 2026
- bitjaru/styleseed
ss-a11y is a skill that audits a component or page for accessibility issues against WCAG 2.2 AA and fixes them.
About
ss-a11y is an accessibility audit skill that reviews a component or page against WCAG 2.2 AA criteria and fixes issues. It checks color contrast, touch-target size, keyboard navigation, form labels, and semantic HTML, applying auto-fixes where possible. A developer uses it as a static code audit on StyleSeed components before shipping.
- Audits a component or page against WCAG 2.2 AA and applies accessibility fixes
- Checks color contrast, 44x44px touch targets, keyboard focus, and semantic HTML
- Static code audit tuned for StyleSeed conventions with data-slot and semantic tokens
Ss A11y by the numbers
- 253 all-time installs (skills.sh)
- Ranked #866 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ss-a11y capabilities & compatibility
- Use cases
- ui design · code review · web design
What ss-a11y says it does
Audit a component or page for accessibility issues and fix them
Touch targets**: Minimum 44x44px (`min-h-11 min-w-11`)
this is a static code audit, not a screen-reader simulation
npx skills add https://github.com/bitjaru/styleseed --skill ss-a11yAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 253 |
|---|---|
| repo stars | ★ 868 |
| Last updated | August 3, 2026 |
| Repository | bitjaru/styleseed ↗ |
What it does
Audit a StyleSeed component or page for WCAG 2.2 AA accessibility issues and apply fixes.
Who is it for?
Developers auditing StyleSeed components or pages for WCAG 2.2 AA accessibility
Skip if: Non-StyleSeed code without data-slot or semantic tokens, or runtime screen-reader testing
When should I use this skill?
Auditing a component or page for accessibility issues and fixing them
What you get
A severity-ranked list of accessibility issues with auto-fixes applied where possible.
- A severity-ranked list of accessibility issues with auto-fixes
By the numbers
- WCAG 2.2 AA across 4 principles
- 44x44px minimum touch target
- 4.5:1 normal-text contrast requirement
Files
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) onbg-background(#FFFFFF) = 4.6:1 (passes) - Check
text-brandon 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>needalt, icons needaria-labelwhen 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 beh-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
roleattributes
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k