원클릭으로 Manus에서 모든 스킬 실행

audit-accessibility-figma

스타10

포크0

업데이트2026년 6월 1일 19:24

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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

southleft

southleft/skills-for-figma

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

audit-accessibility-figma — per-component a11y scorecard

Run a deep accessibility audit on a single component or component set and get a weighted 0–100 scorecard with prioritized fixes. Where lint-design-figma sweeps a whole tree for many rule violations, this skill goes deep on one component: it understands variant axes, classifies the component as interactive vs presentational, and scores each a11y dimension accordingly.

All via use_figma, on any plan — it inspects the real variant tree, fills, strokes, effects, and the component description.

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).
Tree-wide WCAG + design-system lint → use lint-design-figma.
CODE-side a11y (axe-core over HTML) → use scan-code-accessibility-figma.
Design-vs-code drift → use check-design-parity-figma.

Workflow

Target a component. Set NODE_ID to a COMPONENT_SET, COMPONENT, or INSTANCE id (the script walks INSTANCE → main component → parent set automatically). Leave it null to audit the current single selection.
Set the tap-target minimum. TARGET_SIZE defaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48 for stricter mobile targets.
Run scripts/audit-accessibility.js via use_figma (skillNames: "audit-accessibility-figma").
Read the scorecard. overallScore is a classification-weighted blend of the six category scores. See references/audit-categories.md for each category, its weight, and how to raise it.
Work the recommendations. recommendations[] is already sorted by priority (high/medium/low) with the WCAG SC named. Fix, then re-run to confirm the score moved.

Key rules

Interactive vs presentational is auto-detected from the component name and variant axes. It changes which categories are scored and their weights — a badge is not penalized for lacking a focus state; a button is.
Colors are 0–1 floats. Contrast uses sRGB luminance; color-blind simulation uses Brettel/Viénot dichromat matrices.
Coverage means interaction states for interactive components, and variant-axis completeness (actual variants ÷ expected combinations) for presentational ones.
The audit is read-only — apply fixes with manage-variables-figma / figma-use, then re-audit.

이 저장소의 다른 Skills

같은 저장소

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

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

component-properties-figma

southleft/skills-for-figma

Add, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) on a COMPONENT or COMPONENT_SET, and instantiate a component then set its instance properties. Use when authoring or wiring up a component's API in Figma — triggers: 'add a component property', 'add a boolean prop to this component', 'make this text a component property', 'add an instance-swap slot', 'create a variant property', 'rename/delete a component property', 'place an instance of this component', 'instantiate this component and set its label/state', 'set properties on this instance'. Properties must be added to the parent COMPONENT_SET, not individual variants. NOT covered by the native MCP's read-only get_design_context/get_metadata.

2026-06-0110

name	audit-accessibility-figma
description	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.
disable-model-invocation	false

audit-accessibility-figma — per-component a11y scorecard

All via use_figma, on any plan — it inspects the real variant tree, fills, strokes, effects, and the component description.

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).
Tree-wide WCAG + design-system lint → use lint-design-figma.
CODE-side a11y (axe-core over HTML) → use scan-code-accessibility-figma.
Design-vs-code drift → use check-design-parity-figma.

Workflow

Target a component. Set NODE_ID to a COMPONENT_SET, COMPONENT, or INSTANCE id (the script walks INSTANCE → main component → parent set automatically). Leave it null to audit the current single selection.
Set the tap-target minimum. TARGET_SIZE defaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48 for stricter mobile targets.
Run scripts/audit-accessibility.js via use_figma (skillNames: "audit-accessibility-figma").
Read the scorecard. overallScore is a classification-weighted blend of the six category scores. See references/audit-categories.md for each category, its weight, and how to raise it.
Work the recommendations. recommendations[] is already sorted by priority (high/medium/low) with the WCAG SC named. Fix, then re-run to confirm the score moved.

Key rules

Interactive vs presentational is auto-detected from the component name and variant axes. It changes which categories are scored and their weights — a badge is not penalized for lacking a focus state; a button is.
Colors are 0–1 floats. Contrast uses sRGB luminance; color-blind simulation uses Brettel/Viénot dichromat matrices.
Coverage means interaction states for interactive components, and variant-axis completeness (actual variants ÷ expected combinations) for presentational ones.
The audit is read-only — apply fixes with manage-variables-figma / figma-use, then re-audit.