Does it support languages other than TypeScript?

Currently, this specific gate is optimized for TypeScript and React-based frontend development environments.

What happens if a violation is found?

The skill marks the gate as FAILED and can automatically dispatch a fix request to a frontend engineer agent to resolve the issue before re-testing.

Can I skip accessibility testing for internal-only tools?

No. The skill follows an anti-rationalization policy where WCAG compliance is mandatory for all applications regardless of the target audience to ensure universal usability.

How does it verify keyboard navigation?

It validates that automated tests exist for Tab, Enter, Escape, and Arrow key interactions, ensuring focus moves correctly and stays trapped within interactive elements like modals.

What standards does this skill enforce?

The skill enforces mandatory WCAG 2.1 AA compliance standards across all frontend components using axe-core scanning.

Frontend Accessibility Guardrail

Name: Frontend Accessibility Guardrail
Author: luanrodrigues

byluanrodrigues

•

Security & Testing

Ensures WCAG 2.1 AA compliance in frontend components through automated axe-core scanning and keyboard navigation validation.

This skill serves as a mandatory quality gate (Gate 1) in the frontend development lifecycle, designed to eliminate accessibility debt early. It orchestrates a specialized QA agent to perform automated axe-core scans, verify semantic HTML usage, and validate complex interactions like keyboard navigation and focus management. By enforcing a zero-tolerance policy for WCAG 2.1 AA violations, it ensures that all application components are usable by everyone, including those relying on screen readers and assistive technologies.

Key Features

01Automated axe-core scanning for zero-violation WCAG 2.1 AA compliance

02Semantic HTML and ARIA attribute integrity checking

03Validation of keyboard navigation patterns (Tab, Enter, Escape, Arrows)

042 GitHub stars

05Iterative feedback loop to automatically fix violations during development

06Verification of focus management and focus traps for modals and dialogs

Use Cases

01Automating the detection of color contrast and screen reader compatibility issues

02Validating new UI components for accessibility before proceeding to unit testing

03Enforcing strict inclusive design standards across enterprise frontend projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add luanrodrigues/ia-frmwrk dev-frontend-accessibility

For use in Claude.ai and ChatGPT

Key Features

01Automated axe-core scanning for zero-violation WCAG 2.1 AA compliance

02Semantic HTML and ARIA attribute integrity checking

03Validation of keyboard navigation patterns (Tab, Enter, Escape, Arrows)

042 GitHub stars

05Iterative feedback loop to automatically fix violations during development

06Verification of focus management and focus traps for modals and dialogs

Use Cases

01Automating the detection of color contrast and screen reader compatibility issues

02Validating new UI components for accessibility before proceeding to unit testing

03Enforcing strict inclusive design standards across enterprise frontend projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add luanrodrigues/ia-frmwrk dev-frontend-accessibility

For use in Claude.ai and ChatGPT