ui-a11y
Audits and fixes UI accessibility issues in StyleSeed-based components.
Install
mkdir -p .claude/skills/ui-a11y && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15644" && unzip -o skill.zip -d .claude/skills/ui-a11y && rm skill.zipInstalls to .claude/skills/ui-a11y
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe.Key capabilities
- →Audit components and pages for WCAG 2.2 AA issues
- →Identify issues with touch targets, focus states, and contrast
- →Apply practical code fixes for identified accessibility issues
- →Provide a prioritized list of issues and fixable items
- →Summarize the accessibility risk level of a component or page
How it works
This skill audits StyleSeed components and pages for WCAG 2.2 AA issues, focusing on mobile UI patterns, and suggests practical code fixes.
Inputs & outputs
When to use ui-a11y
- →Auditing UI accessibility
- →Improving touch target sizes
- →Fixing contrast issues
- →Improving keyboard navigation
About this skill
UI Accessibility Audit
Overview
Part of StyleSeed, this skill audits components and pages for accessibility issues with an emphasis on the Toss seed's mobile UI patterns. It combines WCAG 2.2 AA checks with practical code fixes for touch targets, focus states, contrast, labels, and reduced motion.
When to Use
- Use when reviewing a page or component for accessibility regressions
- Use when a StyleSeed UI looks polished but has uncertain keyboard or contrast behavior
- Use when adding new interactive controls to a mobile-first screen
- Use when you want a prioritized list of issues and fixable items
Audit Areas
Perceivable
- text contrast
- non-text contrast for controls and graphics
- alt text for images
- labels for meaningful icons
- no information conveyed by color alone
Operable
- touch targets at least 44x44px
- keyboard reachability for all interactive controls
- logical tab order
- visible focus indicators
- reduced-motion support for nonessential animation
Understandable
- visible labels or
aria-labelon inputs - error text associated with the correct field
- clear wording for errors and validation
- document language set appropriately
Robust
- semantic HTML where possible
- correct use of ARIA when semantics alone are insufficient
- no faux buttons or links without the right roles and behavior
Output
Return:
- Issues found, grouped by severity
- Safe autofixes that can be applied directly
- Items that need manual review or product judgment
- A short summary of the accessibility risk level
Best Practices
- Fix semantics before layering on ARIA
- Use the design system tokens only if they still meet contrast requirements
- Treat touch target failures as real usability defects, not polish issues
- Prefer partial, verified fixes over speculative accessibility changes
Additional Resources
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
When not to use it
- →For accessibility decisions that require manual review or product judgment
- →For speculative changes that cannot be verified as safe
Limitations
- →Some findings require manual review or product judgment rather than an automatic fix
- →Code changes are limited to safe autofixes; speculative accessibility changes are excluded
How it compares
This skill combines WCAG 2.2 AA checks with practical code fixes, unlike a manual audit that only identifies issues.
Compared to similar skills
ui-a11y side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ui-a11y (this skill) | 0 | 3mo | No flags | Beginner |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
| ui | 4 | 1mo | Review | Intermediate |
| reusable-ui-components | 1 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by TJSNDHU
View all by TJSNDHU →You might also like
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
ui
nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
reusable-ui-components
EvanBacon
Guidelines for creating reusable, portable UI components with native-first design, compound patterns, and accessibility
verify-bulk-action-bar
junnv93
BulkActionBar 패턴 SSOT 검증 — count chip aria-live, role=toolbar, Esc clear, indeterminate Radix, focus management, IME guard. 일괄 작업 UI 변경 시 트리거. canonical = components/common/BulkActionBar.tsx (도메인 무관 generic), components/approvals/BulkActionBar.tsx는 approvals 특화 wrapper.
gpui-focus-handle
reviu-dev
Focus management and keyboard navigation in GPUI. Use when handling focus, focus handles, or keyboard navigation. Enables keyboard-driven interfaces with proper focus tracking and navigation between focusable elements.
frontend-patterns
forgivesam168
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.