Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From skills-for-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.
npx claudepluginhub southleft/skills-for-figma --plugin skills-for-figmaHow this skill is triggered — by the user, by Claude, or both
Slash command
/skills-for-figma:audit-accessibility-figmaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Run a deep accessibility audit on a **single component or component set** and get a weighted 0–100
Measures whether skills, rules, and agent definitions are actually followed by auto-generating test scenarios at 3 strictness levels and reporting compliance rates with full tool call timelines.
Share bugs, ideas, or general feedback.
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.
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).lint-design-figma.scan-code-accessibility-figma.check-design-parity-figma.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.TARGET_SIZE defaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48
for stricter mobile targets.scripts/audit-accessibility.js via use_figma
(skillNames: "audit-accessibility-figma").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.recommendations[] is already sorted by priority
(high/medium/low) with the WCAG SC named. Fix, then re-run to confirm the score moved.manage-variables-figma / figma-use, then re-audit.