Run any Skill in Manus with one click

scan-code-accessibility-figma

Stars10

Forks0

UpdatedJune 1, 2026 at 19:24

Scan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic rules: ARIA attributes and roles, accessible names, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more. Use on the CODE side of a Figma-to-code workflow: triggers 'scan this HTML for accessibility', 'run axe on my component', 'check the generated code for a11y', 'axe-core scan', 'accessibility lint my markup', 'WCAG check on code', 'is this HTML accessible'. This is a standalone Node script — NO Figma connection required. Visual rules (color-contrast, focus-visible, link-in-text-block, target-size) are DISABLED because JSDOM has no layout — use lint-design-figma for visual a11y on the design side. The two together give full design+code coverage.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

southleft

southleft/skills-for-figma

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software Quality Assurance Analysts and TestersComputer and Mathematical Occupations·SOC 15-1253

File Explorer

3 files

SKILL.md

readonly

name	scan-code-accessibility-figma
description	Scan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic rules: ARIA attributes and roles, accessible names, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more. Use on the CODE side of a Figma-to-code workflow: triggers 'scan this HTML for accessibility', 'run axe on my component', 'check the generated code for a11y', 'axe-core scan', 'accessibility lint my markup', 'WCAG check on code', 'is this HTML accessible'. This is a standalone Node script — NO Figma connection required. Visual rules (color-contrast, focus-visible, link-in-text-block, target-size) are DISABLED because JSDOM has no layout — use lint-design-figma for visual a11y on the design side. The two together give full design+code coverage.
disable-model-invocation	false

scan-code-accessibility-figma — axe-core + JSDOM scan of HTML

Run axe-core (Deque's accessibility engine) against an HTML string using JSDOM. This is the code side of the accessibility story: it checks the markup your Figma-to-code workflow produced. It pairs with lint-design-figma (design side) to cover both ends.

Not a use_figma skill. This runs in plain Node — no Figma file, no Plugin API. axe-core owns the rule database; this skill never invents rules.

Skill boundaries

Design-side visual a11y (contrast, focus rings, target size, color-only) → use lint-design-figma. Those rules are intentionally disabled here.
Per-component design scorecard → use audit-accessibility-figma.
Design-vs-code parity → use check-design-parity-figma (feed it the codeSpec.accessibility this scan can emit).
This skill does not use use_figma, so the figma-use conventions do not apply.

Why visual rules are disabled

JSDOM provides a DOM but no layout engine and no computed visual styles — there is nothing to measure pixels or rendered colors against. So axe's visual rules would always be "incomplete" or wrong. The scan disables them explicitly:

color-contrast and color-contrast-enhanced — need rendered colors.
link-in-text-block — needs surrounding text layout.
target-size — needs rendered box dimensions.

Everything structural/semantic (ARIA, roles, names, labels, alt, headings, landmarks, lang, dup IDs, tabindex, ~50 rules total) runs normally. For the visual half, run lint-design-figma on the design.

Usage

Install deps once (in this skill's scripts/ dir):
```
cd scripts && npm install
```
Installs axe-core and jsdom.
Run the scan against an HTML file or an inline string:
```
node scan.mjs path/to/component.html
node scan.mjs --html '<button>Save</button>'
```
Optional flags:
- --tags wcag22aa — filter to a WCAG tag set (wcag2a, wcag2aa, wcag21aa, wcag22aa, best-practice). Repeatable / comma-separated.
- --context '#my-component' — scope the scan to a CSS selector.
- --include-passing — include counts of passing / incomplete / inapplicable rules.
- --map-to-codespec — also emit a codeSpecAccessibility object (semantic element, role, aria-label, focusVisible, keyboard interactions, disabled/error support) ready to drop into check-design-parity-figma's codeSpec.accessibility.
Read the JSON on stdout: violations grouped by rule with severity (critical/warning/info from axe impact), wcagTags, helpUrl, and up to 10 offending nodes each, plus a summary.

A bare HTML fragment is auto-wrapped in <!DOCTYPE html><html lang="en">…<body>… before scanning.

Output shape

{
  "engine": "axe-core", "version": "4.x", "mode": "jsdom-structural",
  "note": "JSDOM mode: structural/semantic checks only. Visual rules disabled — use lint-design-figma.",
  "categories": [ { "rule": "button-name", "severity": "critical", "count": 1, "description": "...", "wcagTags": ["wcag2a","wcag412"], "helpUrl": "...", "nodes": [ { "html": "...", "target": ["button"], "failureSummary": "..." } ] } ],
  "summary": { "critical": 1, "warning": 0, "info": 0, "total": 1 }
}

Severity mapping: axe critical/serious → critical, moderate → warning, minor → info.

More from this repository

same repository

analyze-component-set-figma

southleft/skills-for-figma

Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this component set', 'turn these variants into CSS states', 'generate a button/input/checkbox from Figma variants', 'what changes between the hover and default state', 'map Figma variants to component props', 'extract the state machine for this component'. Resolves bound variables to token names. NOT covered by the native MCP's get_design_context/get_metadata, which don't give you a variant-axis→CSS-state machine.

2026-06-0110

annotations-figma

southleft/skills-for-figma

Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document or inspect interaction specs, animation timings, easing, accessibility requirements, or implementation notes attached directly to a node. Triggers: 'add an annotation', 'annotate this node/component', 'read the annotations on…', 'what specs are pinned to this element', 'list annotation categories', 'document the focus behavior on this button in Figma'. Annotations are distinct from comments (they pin to design properties) and from the description field. Requires the Figma Desktop app (Plugin API).

2026-06-0110

arrange-component-set-figma

southleft/skills-for-figma

Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants with labels', 'make a variant matrix', 'clean up my component set layout', 'add row/column headers to my variants'. Picks the last property (usually State) as columns and the rest as rows by default. NOT something the native MCP's read-only tools do — this writes a new organized layout to the canvas.

2026-06-0110

audit-accessibility-figma

southleft/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.

2026-06-0110

build-slides-figma

southleft/skills-for-figma

Author Figma Slides presentations — list/create/duplicate/reorder/delete slides, read the slide grid, add text and shapes to a slide, set slide background color, set or read slide transitions (dissolve, slide-from, push-from, smart-animate), focus a slide, and toggle skip. Use when the user wants to build or edit a Figma Slides deck. Triggers: 'create a slide', 'add a slide to the deck', 'reorder slides', 'set the slide background', 'add a transition between slides', 'add text/shape to slide 3', 'read what's on this slide', 'skip this slide in the presentation'. Figma Slides files only (figma.editorType === 'slides'). Requires the Figma Desktop app (Plugin API).

2026-06-0110

check-design-parity-figma

southleft/skills-for-figma

Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detect design-to-code DRIFT: triggers 'check design parity', 'does my code match the Figma', 'compare this component to the design', 'is my implementation faithful', 'find differences between design and code', 'verify the build matches Figma', 'design QA against code', 'parity score'. Reads the node's visual / typography / spacing / token / accessibility specs via use_figma (any plan) and diffs them against a codeSpec you provide. Complements the native get_design_context: instead of GENERATING code, it VALIDATES that existing code stayed in sync with the design.

2026-06-0110

name	scan-code-accessibility-figma
description	Scan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic rules: ARIA attributes and roles, accessible names, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more. Use on the CODE side of a Figma-to-code workflow: triggers 'scan this HTML for accessibility', 'run axe on my component', 'check the generated code for a11y', 'axe-core scan', 'accessibility lint my markup', 'WCAG check on code', 'is this HTML accessible'. This is a standalone Node script — NO Figma connection required. Visual rules (color-contrast, focus-visible, link-in-text-block, target-size) are DISABLED because JSDOM has no layout — use lint-design-figma for visual a11y on the design side. The two together give full design+code coverage.
disable-model-invocation	false

scan-code-accessibility-figma — axe-core + JSDOM scan of HTML

Not a use_figma skill. This runs in plain Node — no Figma file, no Plugin API. axe-core owns the rule database; this skill never invents rules.

Skill boundaries

Design-side visual a11y (contrast, focus rings, target size, color-only) → use lint-design-figma. Those rules are intentionally disabled here.
Per-component design scorecard → use audit-accessibility-figma.
Design-vs-code parity → use check-design-parity-figma (feed it the codeSpec.accessibility this scan can emit).
This skill does not use use_figma, so the figma-use conventions do not apply.

Why visual rules are disabled

color-contrast and color-contrast-enhanced — need rendered colors.
link-in-text-block — needs surrounding text layout.
target-size — needs rendered box dimensions.

Usage

Install deps once (in this skill's scripts/ dir):
```
cd scripts && npm install
```
Installs axe-core and jsdom.
Run the scan against an HTML file or an inline string:
```
node scan.mjs path/to/component.html
node scan.mjs --html '<button>Save</button>'
```
Optional flags:
- --tags wcag22aa — filter to a WCAG tag set (wcag2a, wcag2aa, wcag21aa, wcag22aa, best-practice). Repeatable / comma-separated.
- --context '#my-component' — scope the scan to a CSS selector.
- --include-passing — include counts of passing / incomplete / inapplicable rules.
- --map-to-codespec — also emit a codeSpecAccessibility object (semantic element, role, aria-label, focusVisible, keyboard interactions, disabled/error support) ready to drop into check-design-parity-figma's codeSpec.accessibility.
Read the JSON on stdout: violations grouped by rule with severity (critical/warning/info from axe impact), wcagTags, helpUrl, and up to 10 offending nodes each, plus a summary.

A bare HTML fragment is auto-wrapped in <!DOCTYPE html><html lang="en">…<body>… before scanning.

Output shape

{
  "engine": "axe-core", "version": "4.x", "mode": "jsdom-structural",
  "note": "JSDOM mode: structural/semantic checks only. Visual rules disabled — use lint-design-figma.",
  "categories": [ { "rule": "button-name", "severity": "critical", "count": 1, "description": "...", "wcagTags": ["wcag2a","wcag412"], "helpUrl": "...", "nodes": [ { "html": "...", "target": ["button"], "failureSummary": "..." } ] } ],
  "summary": { "critical": 1, "warning": 0, "info": 0, "total": 1 }
}

Severity mapping: axe critical/serious → critical, moderate → warning, minor → info.