Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Accessibility

@grimmolf/mga-soap-calculator
0
0

Ensure UI components are accessible to all users including those using assistive technologies through semantic HTML, keyboard navigation, ARIA attributes, color contrast, and screen reader compatibility. Use this skill when building UI components, forms, interactive elements, modals, or any frontend code in React, Vue, or plain HTML that needs WCAG compliance. Applies when adding navigation elements, buttons, inputs, focus management, alternative text, or testing with screen readers to ensure inclusive user experiences.

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 Ensure UI components are accessible to all users including those using assistive technologies through semantic HTML, keyboard navigation, ARIA attributes, color contrast, and screen reader compatibility. Use this skill when building UI components, forms, interactive elements, modals, or any frontend code in React, Vue, or plain HTML that needs WCAG compliance. Applies when adding navigation elements, buttons, inputs, focus management, alternative text, or testing with screen readers to ensure inclusive user experiences.

Frontend Accessibility

When to use this skill

  • When creating UI components in files like components/, Button.tsx, Form.jsx, or any React/Vue/Angular component
  • When building forms with input fields, labels, error messages, and validation feedback
  • When implementing keyboard navigation for interactive elements (tabs, modals, dropdowns, menus)
  • When adding semantic HTML elements like <nav>, <main>, <button>, <header>, <footer>, <article>
  • When ensuring proper color contrast ratios (4.5:1 minimum) and not relying solely on color to convey information
  • When adding alternative text for images using alt attributes or ARIA labels for icon buttons
  • When implementing focus indicators and managing focus for modals, dialogs, or single-page app navigation
  • When using ARIA attributes (role, aria-label, aria-describedby, aria-live) for complex components
  • When creating proper heading hierarchies (h1-h6) that screen readers can navigate through
  • When testing components with screen readers (NVDA, JAWS, VoiceOver) to verify accessibility
  • When building custom interactive widgets that need ARIA roles and keyboard event handlers

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.

Instructions

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