Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Audit a component or page for accessibility issues and fix them
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-05 | ✗→✓ | ▲ Improved | -14% | 0% |
| case-22 | ✗→✓ | ▲ Improved | 14% | 0% |
| case-01 | ✗→✓ | ▲ Improved | 18% | 0% |
| case-04 | ✗→✓ | ▲ Improved | -8% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -10% | 0% |
/ss-review/ss-auditdata-slot, no semantic tokens) — assumes StyleSeed conventionsTarget: $ARGUMENTS
text-muted-foreground (#717182) on bg-background (#FFFFFF) = 4.6:1 (passes)text-brand on white (verify contrast with your skin's brand color)<img> need alt, icons need aria-label when meaningfulmin-h-11 min-w-11)h-9 (36px) buttons — should be h-11w-11 h-11focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2prefers-reduced-motioncss @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
aria-labelaria-describedby)<html lang="en"> (or appropriate language code for your project)<button>, <nav>, <main>, <header>)role attributes| 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 |
Other measured skills in the registry, with their headline benchmark lift.