Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
This skill provides a structured audit of UI designs to ensure compliance with WCAG 2.2 AA/AAA and ARIA patterns. It helps designers and developers identify accessibility gaps by returning criterion-referenced findings with assigned severity levels.
The process transforms a visual or structural review into a set of specific fixes, focusing on contrast verification, keyboard navigation, and screen-reader compatibility to meet POUR principles.
WHO IT'S FOR
UX/UI Designers
generate accessible brand design systems from briefs
Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.
Follow the documented setup, then try a first task.
I’m using
Claude Code plugin
Installs: Complete ux-ui-agent-skills plugin bundle: 19 skills, 5 commands, and the design-critic agent, available across projects without copying files into each repository. · Claude Code
Before you start
Claude Code
Enter these two commands in a Claude Code session. If the installed skills do not appear immediately, start a new session.
Installs: Complete UX/UI Agent Skills kit installed into the current project folder, including its runnable skills and project context. · Claude Code, Claude-powered IDE
Before you start
Run from: Target project directory
In a terminal, change to the target project directory, then install the full kit into that current folder.
npx ux-ui-agent-skills init # full kit into the current folder
Open the resulting project in Claude Code or another Claude-powered IDE; the installed CLAUDE.md loads automatically and exposes the kit's files and runnable skills.
Component name, such as notification, button, tabs, or modal
Product or interface context
Any existing token or component files that should be matched
Use the design-component skill to create a complete specification for [component name] in [product or interface context]. Include anatomy, variants, sizes, all applicable states, token mappings, and role/keyboard/screen-reader requirements. Treat the bracketed values as inputs to replace; produce a specification only unless I separately request code.
Use the a11y-audit skill to audit [screen, component, or rendered HTML path] against WCAG 2.2 and the documented ARIA patterns. Return a prioritized findings table with the WCAG criterion, P0/P1/P2 severity, what fails, and a specific fix. Replace the bracketed placeholder with the artifact to inspect, and report measured contrast results only when the relevant checks can actually be run.
Optional existing tokens whose structure must be matched
Use the design-tokens skill to create a DTCG color-token starter palette for [brand or product], using [primary color or color direction]. Replace both bracketed placeholders with the brand context and desired primary direction. Include primitive, semantic, and component tiers, preserve a $description on every token, and clearly mark any contrast claims as unverified unless they were measured.
Claude