Claude Code Plugins

Community-maintained marketplace

Feedback

Frontend Accessibility

@overtimepog/rpg-mcp
1
0

Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and inclusive design patterns. Use this skill when creating or modifying UI components, page layouts, forms, interactive elements, or any frontend code that users interact with. Apply when working with HTML files, component files (React, Vue, Svelte, etc.), form markup, navigation elements, modal dialogs, dropdown menus, tabs, carousels, or custom interactive widgets. Use when implementing keyboard navigation, focus management, ARIA attributes, color contrast requirements, alternative text for images, form labels, heading structures, or screen reader compatibility. Apply when ensuring interactive elements are keyboard accessible, testing with assistive technologies, managing focus in dynamic content, or creating inclusive user experiences for users with disabilities.

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 inclusive design patterns. Use this skill when creating or modifying UI components, page layouts, forms, interactive elements, or any frontend code that users interact with. Apply when working with HTML files, component files (React, Vue, Svelte, etc.), form markup, navigation elements, modal dialogs, dropdown menus, tabs, carousels, or custom interactive widgets. Use when implementing keyboard navigation, focus management, ARIA attributes, color contrast requirements, alternative text for images, form labels, heading structures, or screen reader compatibility. Apply when ensuring interactive elements are keyboard accessible, testing with assistive technologies, managing focus in dynamic content, or creating inclusive user experiences for users with disabilities.

When to use this skill:

  • When creating or modifying UI components, page layouts, or interactive elements
  • When working with HTML markup, JSX, Vue templates, or other component template files
  • When implementing forms, buttons, links, or any interactive UI elements
  • When adding keyboard navigation support and visible focus indicators
  • When using ARIA attributes to enhance accessibility for complex components
  • When ensuring proper color contrast ratios for text and UI elements
  • When adding alternative text to images, icons, and visual content
  • When creating heading structures with proper semantic hierarchy (h1-h6)
  • When implementing modal dialogs, dropdowns, or dynamic content that requires focus management
  • When testing with screen readers or other assistive technologies
  • When building navigation menus, breadcrumbs, or wayfinding elements
  • When refactoring existing UI code to improve accessibility

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