frontend-accessibility
Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.
Best use case
frontend-accessibility is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.
Teams using frontend-accessibility should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-accessibility/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-accessibility Compares
| Feature / Agent | frontend-accessibility | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Frontend Accessibility This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility. ## When to use this skill - When creating or editing React components in `.tsx` or `.jsx` files - When implementing semantic HTML elements (nav, main, button, article, section, etc.) - When building forms and ensuring all inputs have associated labels - When implementing keyboard navigation and focus management - When adding interactive elements like buttons, links, modals, or menus - When choosing colors and verifying contrast ratios meet WCAG standards (4.5:1 minimum) - When adding alternative text to images or icons - When implementing ARIA attributes for complex UI patterns - When testing components with screen readers - When creating logical heading hierarchies (h1-h6) - When implementing visible focus indicators for keyboard navigation - When managing focus in dynamic content, modals, or single-page applications - When ensuring touch targets are appropriately sized for accessibility ## Instructions For details, refer to the information provided in this file: [frontend accessibility](../../../agent-os/standards/frontend/accessibility.md)
Related Skills
scanning-for-accessibility-issues
This skill enables Claude to perform comprehensive accessibility audits. It uses the accessibility-test-scanner plugin to identify WCAG 2.1/2.2 compliance issues, validate ARIA attributes, check keyboard navigation, and assess screen reader compatibility. Use this skill when the user requests an accessibility scan, audit, or compliance check, or when terms like "WCAG", "ARIA", "screen reader", "accessibility testing", or "a11y" are mentioned. It provides actionable insights for improving web application accessibility.
accessibility-audit-runner
Accessibility Audit Runner - Auto-activating skill for Frontend Development. Triggers on: accessibility audit runner, accessibility audit runner Part of the Frontend Development skill category.
premium-frontend-ui
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
accessibility-compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
frontend-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.
frontend-mobile-security-xss-scan
You are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection poi
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
frontend-developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
accessibility-compliance-accessibility-audit
You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
frontend-code-review
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.