agentsclimarketplace
Sign in

Audit accessibility figma

Skill southleft/skills-for-figma/skills/audit-accessibility-figma

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 lint-design-figma; for CODE-side (HTML) checks use scan-code-accessibility-figma.From its SKILL.md

Install
npx -y skills add southleft/skills-for-figma --skill audit-accessibility-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.8 KB, 717 tokens by cl100k_base, as published. Nobody here has run it

audit-accessibility-figma — 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 lint-design-figma 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 lint-design-figma.
  • CODE-side a11y (axe-core over HTML) → use scan-code-accessibility-figma.
  • Design-vs-code drift → use check-design-parity-figma.

Workflow

  1. 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 via use_figma (skillNames: "audit-accessibility-figma").
  4. 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.
  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 manage-variables-figma / figma-use, then re-audit.

What ships with it: 2 files

22.2 KB alongside SKILL.md, 1 of them executable

references/

scripts/

Gives 0 of the 12 instructions most audit compliance skills give in 717 tokens

Counted across 960 of the 1,589 authors here whose files we hold, read 2026-09-06

  • Read product marketing context before asking questionsin 29 of 960, across 11 files
  • Rank findings by severityin 29 of 960, across 22 files
  • Generate audit reportin 22 of 960
  • Run the audit scriptin 20 of 960, across 19 files
  • Generate a prioritized action plan reportin 19 of 960, across 11 files
  • Ensure one H1 per pagein 15 of 960, across 5 files
  • Ensure sitemap exists and is accessiblein 14 of 960, across 4 files
  • Verify alt text on all imagesin 12 of 960, across 3 files
  • Determine the audit scope before startingin 12 of 960, across 4 files
  • Verify important pages allowed in robots.txtin 11 of 960, across 2 files
  • Detect business type from homepage signalsin 11 of 960, across 7 files
  • Delegate specialized tasks to subagentsin 11 of 960, across 7 files

Said here and by no other author read

  • Load the figma-use skill first
  • Target a component using NODE_ID
  • Set the tap-target minimum using TARGET_SIZE
  • Read the scorecard and recommendations

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.