Does this skill support React and TypeScript components?

Yes, it is designed to validate standard HTML as well as JSX and TSX files, making it compatible with React, Next.js, and other modern frontend frameworks.

What level of WCAG compliance does this skill target?

The skill specifically aims for WCAG 2.1 AA compliance, which is the standard requirement for most commercial and public-facing web applications.

Can I use this to audit existing files in my project?

Yes, you can run the /a11y-audit command on any existing file in your repository to trigger a full accessibility analysis and fixing process.

How does the self-validation process work?

Claude writes code to a temporary file, runs a linting script, analyzes the JSON output for violations, and applies fixes based on WCAG documentation before you ever see the code.

Accessibility Self-Check

Name: Accessibility Self-Check
Author: naporin0624

bynaporin0624

•

セキュリティとテスト

Validates generated UI code against WCAG 2.1 AA standards to ensure highly accessible and compliant web components.

Accessibility Self-Check is a specialized quality assurance skill that enables Claude Code to proactively audit its own HTML, JSX, and TSX output before presenting it to the user. By utilizing industry-standard tools like Axe and Markuplint in a temporary environment, this skill identifies accessibility violations such as missing ARIA labels, improper heading hierarchies, and invalid form structures. It automates a 'fix-and-revalidate' loop, ensuring that the final code delivered to developers is production-ready and inclusive by design.

主な機能

01Contextual WCAG/ARIA reference lookup for rapid fixing

022 GitHub stars

03Real-time linting for HTML, JSX, and TSX snippets

04Integrated Axe and Markuplint diagnostic reporting

05Automated WCAG 2.1 AA compliance validation

06Pre-flight mental checks for decorative images and contrast

ユースケース

01Auditing legacy UI templates for accessibility regressions during refactoring

02Ensuring complex forms and modals meet screen-reader requirements

03Building accessible React components and design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add naporin0624/claude-web-audit-plugins a11y-self-check

For use in Claude.ai and ChatGPT

主な機能

01Contextual WCAG/ARIA reference lookup for rapid fixing

022 GitHub stars

03Real-time linting for HTML, JSX, and TSX snippets

04Integrated Axe and Markuplint diagnostic reporting

05Automated WCAG 2.1 AA compliance validation

06Pre-flight mental checks for decorative images and contrast

ユースケース

01Auditing legacy UI templates for accessibility regressions during refactoring

02Ensuring complex forms and modals meet screen-reader requirements

03Building accessible React components and design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add naporin0624/claude-web-audit-plugins a11y-self-check

For use in Claude.ai and ChatGPT