OpenSkillIndex← back to search
claude-code

Agnosticui check-accessibility

Review component for accessibility issues

install
source · Clone the upstream repo
git clone https://github.com/AgnosticUI/agnosticui
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/AgnosticUI/agnosticui "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/check-accessibility" ~/.claude/skills/agnosticui-agnosticui-check-accessibility && rm -rf "$T"
manifest: .claude/skills/check-accessibility/SKILL.md
source content

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:

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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