Help us improve
Share bugs, ideas, or general feedback.
Lints Figma node trees for WCAG 2.2 accessibility and design-system quality. Walks frames or whole pages to surface contrast, target size, hardcoded colors, missing text styles, detached components, and more with severity and WCAG level.
npx claudepluginhub southleft/figma-console-mcp-skills --plugin figma-console-mcp-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/figma-console-mcp-skills:figma-lint-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Walk a Figma node (or the whole current page) and report accessibility and design-quality problems
Audits a single Figma component/component set for accessibility: state coverage, focus indicators, target size, color-blind simulation, annotation completeness. Returns per-category 0–100 scores and prioritized recommendations.
Scans UI components for WCAG AA violations, evaluates severity against design strictness, generates reports, and applies automated fixes for mechanical issues.
Audits visual design for red flags in typography, color, layout; classifies severity (critical/major/minor) with scorecard. Use for design QA, visual quality checks, pre-launch reviews.
Share bugs, ideas, or general feedback.
Walk a Figma node (or the whole current page) and report accessibility and design-quality problems
in one pass. Runs entirely through use_figma, so it works on any Figma plan and inspects the
real design (true colors, real auto-layout, actual variant names) rather than generated code.
Why this is unique: the native Figma MCP (get_design_context, get_metadata, etc.) reads
designs for code generation but does not lint them. There is no built-in "is this accessible /
token-clean?" check on the design side. This skill fills that gap with a faithful port of 14 WCAG 2.2
rules plus 6 design-system/layout rules.
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).figma-audit-accessibility.figma-scan-code-accessibility.figma-check-design-parity.NODE_ID (a frame, component set, or screen) from the user's
selection or a URL. Leave it null to lint the entire current page.RULES defaults to ['all']. Narrow it to a group ('wcag',
'design-system', 'layout') or a specific rule id (e.g. 'wcag-contrast') to cut noise. The
full catalog is in references/lint-rules.md.scripts/lint-design.js via use_figma
(skillNames: "figma-lint-design"). Edit the const inputs at the top first.severity
(critical/warning/info) and wcagLevel (a/aa/aaa/best-practice/design-system).
Lead with critical (contrast, target size, focus, color-only).figma-manage-variables, figma-use, etc.) and re-run the
same scope to confirm summary.total dropped. Each finding includes the offending node.id so
you can jump straight to it.approximate: true.MAX_DEPTH (default 10) and MAX_FINDINGS (default 100) bound the walk. If truncated is
set, narrow the scope or raise the cap.best-practice, not a hard WCAG failure — see lint-rules.md for the exact reasoning per rule.