Skills
.Work. You
Rest

design-accessibility

Official

Make web interfaces accessible and WCAG-ready.

Design & Creative#accessibility#semantic HTML#ARIA#WCAG#color contrast#focus management#UI auditing
Authorravnhq
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill guides frontend teams to meet WCAG and ARIA best practices, ensuring accessible interfaces and compliant components from design to implementation.

Core Features & Use Cases

  • Enforces semantic HTML, proper heading structure, and meaningful alt text for images.
  • Checks for accessible labels on all form controls, visible focus indicators, and keyboard navigation.
  • Useful for UI audits, component library reviews, and accessibility remediation in live projects.

Quick Start

Analyze a React UI library to identify missing ARIA attributes, labels, or color contrast issues, and propose fixes.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-accessibility
Download link: https://github.com/ravnhq/ai-toolkit/archive/main.zip#design-accessibility

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.