메뉴
Audit a component or page for accessibility issues and fix them
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
The VISUAL gate — render the UI, screenshot it, and score what you actually SEE, not what the code says. Catches the tells that only show up in pixels (dead whitespace, cramping, a hero that doesn't dominate, fonts that didn't load, real rendered color, the squint "does this look AI-made" test) — the things /ss-score can't read from source. Renders empty/loading/error states too, then fixes and re-renders until it passes. Use as the final gate on any screen you can render.
Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid, a11y floors, single accent, nested-radius), updates the lock, and re-runs the gate. Use this when a human saying "more X" would otherwise get an inconsistent one-off.
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.
Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial.
Build a screen the way the StyleSeed reference demo was built — one command that ENFORCES the full loop (lock the look → build → score → fix to ≥80 → only then show). Use this instead of building UI free-hand; it closes the gap between "knows the rules" and "actually followed them."
| name | ss-a11y |
| description | Audit a component or page for accessibility issues and fix them |
| argument-hint | [file-path] |
| allowed-tools | Read, Write, Edit, Grep, Glob |
/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-motion
@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 |