From magic-powers
Use when implementing or reviewing accessibility - WCAG compliance, screen reader support, keyboard navigation, a11y testing
npx claudepluginhub kienbui1995/magic-powers --plugin magic-powersThis skill uses the workspace's default tool permissions.
Accessibility isn't optional — it's a legal requirement in many jurisdictions and affects ~15% of users. Build it in from the start, not as an afterthought.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Accessibility isn't optional — it's a legal requirement in many jurisdictions and affects ~15% of users. Build it in from the start, not as an afterthought.
alt="" for decorative)outline: none without replacement)<label><html lang="en"> set correctly<button>, <nav>, <main>, not <div onclick>aria-label, aria-expanded, role for custom widgets# Automated
npx axe-core # or browser extension
npx pa11y http://localhost:3000
# Manual
- Tab through entire page — can you reach everything?
- Screen reader test (VoiceOver/NVDA) — does it make sense?
- Zoom to 200% — does layout break?
- Disable CSS — is content still readable?
| Issue | Fix |
|---|---|
| Missing alt text | Add descriptive alt attribute |
| Low contrast | Increase to 4.5:1 ratio minimum |
| No focus styles | Add :focus-visible styles |
| Click-only interactions | Add keyboard handlers (onKeyDown) |
<div> as button | Replace with <button> |
| Missing form labels | Add <label htmlFor="..."> |