Accessibility Remediation Skill

Analyze React/Vue/Svelte components for WCAG 2.2 violations and generate remediation options.

9|2|Updated Jan 9, 2026
One-click install
npx skills add https://github.com/flight505/storybook-assistant --skill accessibility-remediation-skill
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Accessibility Remediation Skill
Source: https://github.com/flight505/storybook-assistant/tree/main/skills/accessibility-remediation
Command: npx skills add https://github.com/flight505/storybook-assistant --skill accessibility-remediation-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Developers often ship UI components with accessibility issues that hinder usability and slow down delivery. This skill automates detection and remediation of WCAG 2.2 violations, turning accessibility into a reliable, repeatable workflow.

Core Features & Use Cases

  • Real-time analysis of React/Vue/Svelte components to identify common a11y issues such as missing labels, poor color contrast, keyboard navigation gaps, and ARIA misuse.
  • Context-aware remediation suggestions with ready-to-apply code snippets and explanations, including one-click application in the development flow.
  • Integration with Storybook, component tests, and CI pipelines to enforce accessibility by default during design-to-code workflows.
  • Use Case: A developer runs the skill on Button.tsx to automatically add an accessible name, fix contrast, and enable keyboard interactions.

Quick Start

Run the command to analyze a component file (e.g., Button.tsx), review the recommended fixes, and apply the chosen remediation with a single CLI action.

Frequently Asked Questions about Accessibility Remediation Skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automatically fix WCAG 2.2 violations in React components?

Automatically fix WCAG 2.2 violations in React components by running local Python scripts that analyze your UI files, detect accessibility issues like missing labels or ARIA misuse, and generate ready-to-apply remediation code snippets.

Can I integrate automated accessibility testing into my Storybook and CI pipelines?

Yes, you can integrate automated accessibility testing into Storybook and CI pipelines to enforce a11y compliance by default during your design-to-code workflow, applying context-aware fixes with a single action.

Does this accessibility remediation tool support Vue and Svelte alongside React?

This accessibility remediation tool supports Vue and Svelte alongside React, analyzing your component files to identify keyboard navigation gaps and poor color contrast before applying context-aware remediation suggestions.

What is the best way to detect and resolve ARIA misuse and color contrast issues in UI components?

The best way to detect and resolve ARIA misuse and color contrast issues is to analyze UI components with local Python scripts that flag WCAG 2.2 violations and provide one-click remediation options within your development environment.

Do I need external services or axe-core to run AI-powered accessibility remediation?

You do not need external services to run AI-powered accessibility remediation because it operates via local Python scripts, while offering optional axe-core testing integration for extended validation capabilities.