How do I install the Check Accessibility skill?

Run npx skillmds add majiayu000/check-accessibility-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Check Accessibility skill do?

Review component for accessibility issues It is listed under Web & Frontend on SkillMD.

Is Check Accessibility safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Check Accessibility?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Check Accessibility free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Check Accessibility?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Check Accessibility by majiayu000 — Agent Skill

Name: Check Accessibility
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Usage: /check-accessibility COMPONENT_NAME

Examples:

/check-accessibility button
/check-accessibility alert
/check-accessibility v2/lib/src/components/Button.ts

Check accessibility for: $ARGUMENTS

Setup:

Read .claude/PROJECT_CONTEXT.md for AgnosticUI structure and accessibility principles

Process:

Search for latest standards:
- Use WebSearch for "WCAG 2.2 [component-type] accessibility"
- Use WebSearch for "ARIA [specific-pattern] best practices"
- Fetch W3C WAI-ARIA documentation if needed for specific patterns
Locate component files:
- Core component: v2/lib/src/components/$ARGUMENTS*
- Framework implementations if relevant: v2/playgrounds/*/src/stories/*$ARGUMENTS*
- Check PROJECT_CONTEXT for AgnosticUI's accessibility standards location
Analyze against current standards:
- Semantic HTML: Proper element usage for meaning and structure
- ARIA attributes: Correct, necessary, and following latest specs
- Keyboard navigation: Tab order, focus management, keyboard shortcuts
- Focus indicators: Visible focus styles meeting contrast requirements
- Screen reader support: Meaningful labels, descriptions, live regions
- Color contrast: WCAG 2.2 AA requirements (4.5:1 text, 3:1 UI)
- Touch targets: Minimum 44x44px for interactive elements
- Motion/animation: Respects prefers-reduced-motion
Framework-specific considerations:
- Check if accessibility differs across Lit, React, Vue implementations
- Verify ARIA is applied correctly in each framework's rendering
- Test that events work with keyboard in all frameworks
Report findings:
- List issues with severity (Critical/High/Medium/Low)
- Reference specific WCAG 2.2 success criteria
- Provide remediation steps with code examples
- Link to current W3C/MDN documentation
- Note AgnosticUI-specific patterns to follow
If fixes requested:
- Propose changes that work across all frameworks
- Ensure fixes align with AgnosticUI's CSS-first approach
- WAIT FOR USER APPROVAL before implementing

AgnosticUI Accessibility Requirements:

WCAG 2.1 AA compliance minimum
Framework-agnostic solutions preferred
CSS custom properties for focus indicators
Consistent behavior across Lit, React, Vue

---name: check-accessibility-2description: Review component for accessibility issues--- **Usage:** `/check-accessibility COMPONENT_NAME` **Examples:** - `/check-accessibility button` - `/check-accessibility alert` - `/check-accessibility v2/lib/src/components/Button.ts` Check accessibility for: $ARGUMENTS **Setup:** 1. Read `.claude/PROJECT_CONTEXT.md` for AgnosticUI structure and accessibility principles **Process:** 2. **Search for latest standards:** - Use WebSearch for "WCAG 2.2 [component-type] accessibility" - Use WebSearch for "ARIA [specific-pattern] best practices" - Fetch W3C WAI-ARIA documentation if needed for specific patterns 3. **Locate component files:** - Core component: `v2/lib/src/components/$ARGUMENTS*` - Framework implementations if relevant: `v2/playgrounds/*/src/stories/*$ARGUMENTS*` - Check PROJECT_CONTEXT for AgnosticUI's accessibility standards location 4. **Analyze against current standards:** - **Semantic HTML:** Proper element usage for meaning and structure - **ARIA attributes:** Correct, necessary, and following latest specs - **Keyboard navigation:** Tab order, focus management, keyboard shortcuts - **Focus indicators:** Visible focus styles meeting contrast requirements - **Screen reader support:** Meaningful labels, descriptions, live regions - **Color contrast:** WCAG 2.2 AA requirements (4.5:1 text, 3:1 UI) - **Touch targets:** Minimum 44x44px for interactive elements - **Motion/animation:** Respects prefers-reduced-motion 5. **Framework-specific considerations:** - Check if accessibility differs across Lit, React, Vue implementations - Verify ARIA is applied correctly in each framework's rendering - Test that events work with keyboard in all frameworks 6. **Report findings:** - List issues with severity (Critical/High/Medium/Low) - Reference specific WCAG 2.2 success criteria - Provide remediation steps with code examples - Link to current W3C/MDN documentation - Note AgnosticUI-specific patterns to follow 7. **If fixes requested:** - Propose changes that work across all frameworks - Ensure fixes align with AgnosticUI's CSS-first approach - **WAIT FOR USER APPROVAL** before implementing **AgnosticUI Accessibility Requirements:** - WCAG 2.1 AA compliance minimum - Framework-agnostic solutions preferred - CSS custom properties for focus indicators - Consistent behavior across Lit, React, Vue

Frequently asked questions