Lint design figma

Skill southleft/skills-for-figma/skills/lint-design-figma

Lint a Figma node tree for WCAG 2.2 accessibility AND design-system quality — contrast, target size, focus indicators, color-only signaling, hardcoded colors, missing text styles, detached components, and more. Use when the user wants a design-side audit BEFORE handoff: triggers 'lint this frame', 'check accessibility', 'WCAG audit', 'is my design accessible', 'find contrast issues', 'check color contrast', 'find hardcoded colors', 'are my components using tokens', 'design QA', 'a11y check on this page', 'audit my design for issues'. Walks the tree from a node (or the whole page) and returns findings with severity (critical/warning/info) and WCAG level (A/AA/AAA/best-practice). The native Figma MCP has NO design-side linting — this is unique to this collection. For the deep per-component a11y scorecard use audit-accessibility-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 lint-design-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

4.3 KB, 900 tokens by cl100k_base, as published. Nobody here has run it

lint-design-figma — WCAG 2.2 + design-system lint over a node tree

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.

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).
Per-component deep scorecard (state coverage, color-blind sim, 0–100 scores) → use audit-accessibility-figma.
CODE-side a11y (axe-core over generated HTML) → use scan-code-accessibility-figma.
Design-vs-code drift → use check-design-parity-figma.

Workflow

Pick the scope. Get the target 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.
Pick the rules. 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.
Run scripts/lint-design.js via use_figma (skillNames: "lint-design-figma"). Edit the const inputs at the top first.
Triage by severity. The result groups findings by rule, each carrying severity (critical/warning/info) and wcagLevel (a/aa/aaa/best-practice/design-system). Lead with critical (contrast, target size, focus, color-only).
Fix + re-lint. Apply fixes (via manage-variables-figma, 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.

Key rules

Colors are 0–1 floats. Contrast math uses sRGB linearization + relative luminance; the script ships its own helpers (no hex needed for input).
Background is inferred by walking ancestors for the nearest solid fill (defaults to white). Contrast on semi-transparent fills is flagged 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.
WCAG-honest severity: some rules (text size, line height, letter/paragraph spacing) are labelled best-practice, not a hard WCAG failure — see lint-rules.md for the exact reasoning per rule.
Findings are descriptive, not auto-fixed. Confirm intent before bulk-editing a design.

What ships with it: 2 files

30.9 KB alongside SKILL.md, 1 of them executable

references/

lint-rules.md5.0 KB

scripts/

lint-design.jsruns25.9 KB

Gives 1 of the 12 instructions most quality gates skills give in 900 tokens

Counted across 1,524 of the 2,830 authors here whose files we hold, read 2026-09-06

Read full output and check exit codein 45 of 1524, across 40 files
Verify output confirms the claimin 44 of 1524, across 39 files
Identify the command that proves the claimin 43 of 1524, across 39 files
Execute the full verification commandin 36 of 1524, across 30 files
Produce a verification reportin 34 of 1524, across 18 files
Review git diff changesin 30 of 1524, across 16 files
Fix build failures immediatelyin 29 of 1524, across 9 files
Group findings by severityhere, and in 28 of 1524
State claim only with evidencein 27 of 1524, across 22 files
Verify regression tests with red-green cyclein 26 of 1524, across 22 files
Run the full test suitein 26 of 1524, across 25 files
Run test suite with coveragein 25 of 1524, across 10 files

Said here and by no other author read

load the figma-use skill first
Pick target node ID or null for page
Run lint-design.js via use_figma
Fix issues and re-lint to confirm
Confirm intent before bulk editing
Set rules to all or specific groups

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.