Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Accessibility

@TheophilusChinomona/theochinomona.tech
0
0

Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dynamic content, modals, and SPAs.

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 guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dynamic content, modals, and SPAs.

Frontend Accessibility

When to use this skill:

  • When creating new UI components or interactive elements
  • When implementing form inputs, buttons, or controls
  • When building navigation menus, headers, or footers
  • When creating modals, dialogs, or overlays with Shadcn/ui
  • When implementing custom interactive widgets
  • When adding images, icons, or media content
  • When working with color schemes and visual design
  • When managing focus states in single-page applications
  • When implementing keyboard shortcuts or hotkeys
  • When testing components with screen readers
  • When working on component files (.tsx, .jsx, components/.)
  • When reviewing designs for accessibility compliance
  • When adding visible focus indicators using Tailwind classes
  • When implementing screen-reader-only content with srOnly utility class

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.

Instructions

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