Sign in

/Catalogue/Prompt/bitjaru/bitjaru-styleseed-ss-a11y-2

Origin: github
Communityv0.1.0PromptLicense: MIT github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-a11y

ss-a11y

Audit a component or page for accessibility issues and fix them

by bitjaru · updated 7d ago · imported from GitHub

Watch · 0 Send for moderation
Installs0+0/7d
Security score100/100
Retention 14d0%
GitHub stars962

Skill logic

Execution graph
User message
Prompt rewrites behaviour
Response

SKILL.md

View on GitHub ↗

Accessibility Audit

Registry-first artifact boundary

When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.

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) on touch surfaces
    • Flag undersized touch hit areas, not approved pointer-first desktop controls merely for being 36–40px tall
    • Pointer-first controls follow the resolved contract; preserve keyboard access and applicable accessibility floors
    • Icon buttons need an explicit hit area appropriate to the input mode
  • 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

TokenMinimum ContrastNote
--foreground7:1+Body text — verify with your skin
--muted-foreground4.5:1+Secondary text — verify with your skin
--brand4.5:1+Accent — verify with your skin's brand color
--destructive4.5:1+Error — verify with your skin
--success3:1+Large text/icons only — verify with your skin
--warning4.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

Discussion

No comments yet — start the thread.

Sign in to join the discussion.

/More from bitjaru/styleseed

bitjaru· 7d agoCommunity
ss-flow

Prompts · JavaScript · v0.1.0

Design user flows and navigation structure following proven UX patterns

#agent-skills#ai-coding#ai-design

0 962
bitjaru· 7d agoCommunity
ss-audit

Prompts · JavaScript · v0.1.0

Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices

#agent-skills#ai-coding#ai-design

0 962
bitjaru· 7d agoCommunity
ss-a11y

Prompts · JavaScript · v0.1.0

Audit a component or page for accessibility issues and fix them

#agent-skills#ai-coding#ai-design

0 962
bitjaru· 7d agoCommunity
ss-build

Prompts · JavaScript · v0.1.0

Build a screen with StyleSeed's composed method, then run the code and pixel gates before presenting. Use when building or rebuilding a screen; sets up the project first if needed.

#agent-skills#ai-coding#ai-design

0 962