Use this skill when you need audit a component or page for accessibility issues and fix them.
/ss-review
/ss-audit
data-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-11
w-11 h-11
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
aria-label
aria-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 |