figma-lint-designlisted

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 figma-audit-accessibility; for CODE-side (HTML) checks use figma-scan-code-accessibility.
whiskfernlowdensitylipoprotein154/figma-console-mcp-skills · ★ 0 · Web & Frontend · score 75

Install: claude install-skill whiskfernlowdensitylipoprotein154/figma-console-mcp-skills

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