From all-skills
Implements WCAG web accessibility (POUR principles) for UI components, forms, navigation, and multimedia. Use when designing, reviewing, or refactoring web interfaces for compliance.
npx claudepluginhub vinnie357/claude-skills --plugin alliumThis skill uses the workspace's default tool permissions.
Apply W3C Web Accessibility Initiative (WAI) principles when working on web interfaces to ensure usability for people with disabilities.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Apply W3C Web Accessibility Initiative (WAI) principles when working on web interfaces to ensure usability for people with disabilities.
Use this skill when:
Web accessibility is organized around four foundational principles:
Information must be presentable to users in ways they can perceive.
Key requirements:
Quick example:
<img src="chart.png" alt="Sales increased 40% in Q4 2024">
<button aria-label="Close dialog">
<span class="icon-close" aria-hidden="true"></span>
</button>
For detailed guidance on text alternatives, multimedia, and color contrast, see references/perceivable.md.
User interface components must be operable by all users.
Key requirements:
Quick example:
<button>Click me</button> <!-- Already keyboard accessible -->
<!-- Custom interactive element needs keyboard support -->
<div role="button" tabindex="0"
onclick="handleClick()"
onkeydown="handleKeyDown(event)">
Custom Button
</div>
For keyboard patterns, focus management, and navigation, see references/operable.md.
Information and UI operation must be understandable.
Key requirements:
Quick example:
<html lang="en">
<label for="email">Email address</label>
<input type="email" id="email"
aria-describedby="email-help"
required>
<div id="email-help">We'll never share your email</div>
For form patterns, error handling, and content clarity, see references/understandable.md.
Content must work reliably across user agents and assistive technologies.
Key requirements:
Quick example:
<!-- Use semantic HTML first -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
<!-- ARIA for custom components when needed -->
<div role="dialog" aria-labelledby="title" aria-modal="true">
<h2 id="title">Dialog Title</h2>
</div>
For ARIA patterns and custom components, see references/robust.md.
Consult references/forms.md for comprehensive form accessibility including:
See references/aria.md for:
Consult references/testing.md for:
See references/patterns.md for accessible implementations of:
Every page should have:
<html>For interactive components: