lint-design-figma

Installation
SKILL.md

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

Installs
7
GitHub Stars
4
First Seen
Jun 1, 2026
lint-design-figma — southleft/skills-for-figma