How do I install the Figma Audit Accessibility skill?

Run npx skillmds@latest add southleft/figma-audit-accessibility in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Audit Accessibility safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Audit Accessibility?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Audit Accessibility free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Audit Accessibility?

southleft (@southleft) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Audit Accessibility by southleft

Name: Figma Audit Accessibility
Author: southleft

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 component', 'does my button have a focus state', 'color blind check', 'rate this component for a11y', 'component accessibility scorecard'. Works on ANY Figma plan. For a broad sweep over a whole page/frame use figma-lint-design; for CODE-side (HTML) checks use figma-scan-code-accessibility.

southleft 5c5522e 3 files · 26.0 KB Updated Sep 17, 2026

File contents

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-code-accessibility.
Design-vs-code drift → use figma-check-design-parity.

Workflow

Target a component. Set NODE_ID to a COMPONENT_SET, COMPONENT, or INSTANCE id (the script walks INSTANCE → main component → parent set automatically). Leave it null to audit the current single selection.
Set the tap-target minimum. TARGET_SIZE defaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48 for stricter mobile targets.
Run scripts/audit-accessibility.js via use_figma (skillNames: "figma-audit-accessibility").
Read the scorecard. overallScore is a classification-weighted blend of the six category scores. See references/audit-categories.md for each category, its weight, and how to raise it.
Work the recommendations. recommendations[] is already sorted by priority (high/medium/low) with the WCAG SC named. Fix, then re-run to confirm the score moved.

Key rules

Interactive vs presentational is auto-detected from the component name and variant axes. It changes which categories are scored and their weights — a badge is not penalized for lacking a focus state; a button is.
Colors are 0–1 floats. Contrast uses sRGB luminance; color-blind simulation uses Brettel/Viénot dichromat matrices.
Coverage means interaction states for interactive components, and variant-axis completeness (actual variants ÷ expected combinations) for presentational ones.
The audit is read-only — apply fixes with figma-manage-variables / figma-use, then re-audit.

---name: figma-audit-accessibilitydescription: 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 component', 'does my button have a focus state', 'color blind check', 'rate this component for a11y', 'component accessibility scorecard'. Works on ANY Figma plan. For a broad sweep over a whole page/frame use figma-lint-design; for CODE-side (HTML) checks use figma-scan-code-accessibility.---# figma-audit-accessibility — per-component a11y scorecardRun a deep accessibility audit on a **single component or component set** and get a weighted 0–100scorecard with prioritized fixes. Where `figma-lint-design` sweeps a whole tree for many ruleviolations, this skill goes deep on one component: it understands variant axes, classifies thecomponent 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, andthe 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-code-accessibility`.- **Design-vs-code drift** → use `figma-check-design-parity`.## Workflow1. **Target a component.** Set `NODE_ID` to a COMPONENT_SET, COMPONENT, or INSTANCE id (the script walks INSTANCE → main component → parent set automatically). Leave it `null` to audit the current single selection.2. **Set the tap-target minimum.** `TARGET_SIZE` defaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48 for stricter mobile targets.3. **Run** [`scripts/audit-accessibility.js`](scripts/audit-accessibility.js) via `use_figma` (`skillNames: "figma-audit-accessibility"`).4. **Read the scorecard.** `overallScore` is a classification-weighted blend of the six category scores. See [references/audit-categories.md](references/audit-categories.md) for each category, its weight, and how to raise it.5. **Work the recommendations.** `recommendations[]` is already sorted by `priority` (`high`/`medium`/`low`) with the WCAG SC named. Fix, then re-run to confirm the score moved.## Key rules- **Interactive vs presentational** is auto-detected from the component name and variant axes. It changes which categories are scored and their weights — a badge is not penalized for lacking a focus state; a button is.- **Colors are 0–1 floats.** Contrast uses sRGB luminance; color-blind simulation uses Brettel/Viénot dichromat matrices.- **Coverage** means interaction states for interactive components, and variant-axis completeness (actual variants ÷ expected combinations) for presentational ones.- The audit is read-only — apply fixes with `figma-manage-variables` / `figma-use`, then re-audit.

Frequently asked questions