skills.rest
f-campana
f-campanaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility/component

Identify accessibility issues in React components and generate remediation reports.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#react#validation#components#aria#web-standards
One-click install
npx skills add https://github.com/f-campana/bifrost --skill accessibility-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility/component
Source: https://github.com/f-campana/bifrost/tree/main/skills/accessibility/accessibility-component
Command: npx skills add https://github.com/f-campana/bifrost --skill accessibility-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies accessibility issues in React components, enabling teams to address semantic and ARIA gaps before deployment.

Core Features & Use Cases

  • Reads a component file and its specification to identify accessibility gaps.
  • Generates a remediation-focused report to guide fixes and ensure compliance.
  • Use Case: QA engineers can run this during reviews to ensure new components meet accessibility standards.

Quick Start

Assign the accessibility/component skill to a React component to verify its compliance.

Frequently Asked Questions about accessibility/component

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

FAQPage Schema
How do I check my React component for accessibility issues?▼

To check React component accessibility, assign the skill to a component file. It evaluates semantic HTML, ARIA attributes, focus management, and React Aria integration, then outputs a structured markdown remediation report.

What is the best way to validate ARIA attributes in React components?▼

Validating ARIA attributes in React components involves checking semantic HTML and focus management against web standards. This skill reads component files and specifications to identify ARIA gaps and generate remediation guidance.

Does this accessibility validation work with standard React component libraries?▼

Yes, this accessibility validation targets interactive widgets like buttons, dialogs, lists, and form fields across typical React component libraries. It enforces web standards and React Aria integration checks for these components.

How do I audit focus management in my React dialogs and form fields?▼

Auditing focus management in React dialogs and form fields requires evaluating interactive widgets against web standards. This skill identifies focus management gaps and produces a structured report to guide remediation fixes.

What accessibility issues are commonly found in React component libraries?▼

Common accessibility issues in React component libraries include missing semantic HTML, incorrect ARIA attributes, and poor focus management. This skill identifies these gaps in interactive widgets and outputs a remediation-focused report.

Related Skills

Explore More Software Engineering Skills→
wangx7wangx7

web-artifacts-builder

Bundle React and TypeScript projects into single-file HTML artifacts for claude.ai.

Community
Intermediate
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
starrank-softstarrank-soft

frontend-a11y

Implements WCAG-compliant React and Next.js UI patterns with ARIA, keyboard navigation, and focus management.

Official
Intermediate
blackgirlbytesblackgirlbytes

audit-a11y

Audit React/Next.js components for WCAG 2.1 AA accessibility violations.

Community
Intermediate