scan-code-accessibility-figma
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.
Works with
---
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.
license: MIT
---
# scan-code-accessibility-figma — axe-core + JSDOM scan of HTML
Run [axe-core](https://github.com/dequelabs/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
1. **Install deps once** (in this skill's `scripts/` dir):
```bash
cd scripts && npm install
```
Installs `axe-core` and `jsdom`.
2. **Run the scan** against an HTML file or an inline string:
```bash
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`.
3. **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
```jsonc
{
"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 Accessibility skills
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.
ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
