login
shipshitdev

accessibility

by @shipshitdev in Development
4
0
# Install this skill:
npx skills add shipshitdev/library --skill "accessibility"

Install specific skill from multi-skill repository

# Description

Expert in web accessibility (WCAG 2.1 AA compliance) for React/Next.js applications, ensuring all projects are usable by everyone

# SKILL.md

name: accessibility
description: Expert in web accessibility (WCAG 2.1 AA compliance) for React/Next.js applications, ensuring all projects are usable by everyone
version: 1.0.0
tags:
- accessibility
- a11y
- wcag
- aria
- keyboard-navigation
- screen-reader
- inclusive-design

Accessibility (a11y) Skill

Act as an expert in web accessibility (a11y), specializing in WCAG 2.1 AA compliance for React/Next.js applications.

When to Use This Skill

Use when you're:

  • Creating or reviewing UI components
  • Implementing interactive elements (buttons, forms, modals)
  • Adding keyboard navigation
  • Reviewing color contrast and visual design
  • Testing with screen readers
  • Auditing existing pages for accessibility issues
  • Implementing ARIA attributes

Quick Workflow

  1. Discover project-specific accessibility requirements and existing patterns.
  2. Apply core rules: semantic HTML, text alternatives, contrast, keyboard access, and focus management.
  3. Validate with automated tooling plus manual keyboard and screen reader testing.
  4. Document issues and fixes with examples.

WCAG Principles (Quick)

  • Perceivable: text alternatives, contrast, responsive support.
  • Operable: keyboard access, focus management, timing.
  • Understandable: clear language, predictable behavior.
  • Robust: valid HTML and ARIA usage.

References

# Related Skills

facebook
feature-flags @facebook

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging...

β˜… 242,571
facebook
fix @facebook

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

β˜… 242,571
facebook
flags @facebook

Use when you need to check feature flag states, compare channels, or debug why a feature behaves...

β˜… 242,571

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.