Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Accessibility

@overtimepog/AgentTheo
0
0

Build accessible user interfaces following WCAG 2.2 standards with proper semantic HTML, ARIA attributes, keyboard navigation, and screen reader support. Use this skill when creating or modifying UI components, forms, interactive elements, navigation menus, modals, or any frontend code that users interact with. Apply this skill when implementing keyboard navigation, focus management, color contrast requirements, alternative text for images, form labels, ARIA roles and landmarks, or when ensuring components work with assistive technologies like screen readers. This skill is essential when working with React, Vue, or other framework components, HTML templates, JSX files, or any UI implementation to ensure inclusive design that serves users with visual, auditory, motor, or cognitive disabilities and meets legal compliance standards (ADA, WCAG 2.2 Level AA).

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name Frontend Accessibility
description Build accessible user interfaces following WCAG 2.2 standards with proper semantic HTML, ARIA attributes, keyboard navigation, and screen reader support. Use this skill when creating or modifying UI components, forms, interactive elements, navigation menus, modals, or any frontend code that users interact with. Apply this skill when implementing keyboard navigation, focus management, color contrast requirements, alternative text for images, form labels, ARIA roles and landmarks, or when ensuring components work with assistive technologies like screen readers. This skill is essential when working with React, Vue, or other framework components, HTML templates, JSX files, or any UI implementation to ensure inclusive design that serves users with visual, auditory, motor, or cognitive disabilities and meets legal compliance standards (ADA, WCAG 2.2 Level AA).

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 modifying UI components, forms, buttons, or interactive elements
  • When implementing keyboard navigation and focus management in SPAs or modals
  • When adding semantic HTML elements (nav, main, article, section, button, etc.)
  • When implementing ARIA roles, landmarks, labels, and live regions
  • When ensuring proper color contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • When adding alternative text (alt attributes) for images and meaningful labels for form inputs
  • When creating navigation menus, dropdowns, accordions, tabs, or complex widgets
  • When implementing screen reader-only content or visually hidden elements
  • When managing focus in dynamic content updates, modals, or route changes
  • When testing components with keyboard-only navigation (Tab, Enter, Space, Arrow keys)
  • When implementing proper heading hierarchy (h1-h6) for document structure
  • When working with form validation and accessible error messages
  • When ensuring touch targets meet minimum size requirements (44x44px) for mobile accessibility

Instructions

For details, refer to the information provided in this file: frontend accessibility