figma-audit-accessibility
Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia), all rolled into per-category 0–100 scores and prioritized recommendations. Use when the user wants to vet ONE component before shipping it: triggers 'audit this component', 'accessibility score for this button', 'is this component set accessible', 'check the states on this compone
npx skills add southleft/figma-console-mcp-skills --skill figma-audit-accessibility --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# figma-audit-accessibility — per-component a11y scorecard Run a deep accessibility audit on a **single component or component set** and get a weighted 0–100 scorecard with prioritized fixes. Where `figma-lint-design` sweeps a whole tree for many rule violations, this skill goes deep on one component: it understands variant axes, classifies the component as interactive vs presentational, and scores each a11y dimension accordingly. All via `use_figma`, on any plan — it inspects the real variant tree, fills, strokes, effects, and the component description. ## Skill boundaries - **`use_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at the top of each script, colors in 0–1 range, load fonts before any text op, `await figma.getNodeByIdAsync(...)`, and **atomic errors** (a failed script applies nothing — read the error, fix, retry). - **Tree-wide WCAG + design-system lint** → use `figma-lint-design`. - **CODE-side a11y** (axe-core over HTML) → use `figma-scan-c
- Skill boundaries
- Workflow
- Key rules
What does the figma-audit-accessibility skill do?
Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia), all rolled into per-category 0–100 scores and prioritized recommendations. Use when the user wants to vet ONE component before shipping it: triggers 'audit this component', 'accessibility score for this button', 'is this component set accessible', 'check the states on this compone
How do I install it?
Run `npx skills add southleft/figma-console-mcp-skills --skill figma-audit-accessibility --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From southleft/figma-console-mcp-skills, a repository with 67 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.