Marketplace for trusted AI agent skills

Skill Detail

Add Claude design-system and accessibility workflows with UX/UI Agent Skills

Use UX/UI Agent Skills when Claude should generate tokens, component specs, accessibility audits, and framework-specific UI code from a repeatable design workflow.

Developer ToolsClaude Code
Developer Tools Claude Code Security Reviewed
⭐ 694 GitHub stars ⬇ 1k/wk npm
COPY SKILL INSTRUCTIONS (OPTIONAL)
npx skills add agentskillexchange/skills --skill add-claude-design-system-and-accessibility-workflows-with-ux-ui-agent-skills Copy
Uses the third-party skills CLI, not an ASE-owned installer. Check your agent’s compatibility. This copies instructions; complete the upstream tool setup below separately.
View source
At a glance
Tools required
Claude Code or Claude-powered IDE, ux-ui-agent-skills package or cloned repository, optional Node and Python validators for render, token, and accessibility checks
Install & setup
Run npx ux-ui-agent-skills init in the target project for the full kit, or npx ux-ui-agent-skills add tokens taste design-systems to install selected areas. Alternatively, clone the repository and copy the desired skill and workflow folders into the project.
Author
plugin87
Publisher
Individual
Last updated
Aug 24, 2026
Quick brief

Use UX/UI Agent Skills when an operator wants Claude to handle product UI work through explicit design-system workflows rather than ad hoc visual suggestions. The agent can generate DTCG design tokens, specify component anatomy, variants and states, run WCAG 2.2 accessibility gates, map across design systems, produce framework-specific UI code, and use packaged slash-command skills such as brandkit, redesign, image-to-code, prototype, migration, and governance. Invoke this inside Claude Code or a Claude-powered IDE when design tokens, component quality, accessibility, or design-to-code handoff need repeatable checks. The boundary is Claude-driven UX/UI production and review workflows; it is not a generic design inspiration library or a standalone frontend framework.

How it works

What this skill actually does

Inputs and prerequisites: Claude Code or Claude-powered IDE, ux-ui-agent-skills package or cloned repository, optional Node and Python validators for render, token, and accessibility checks.

Setup notes: Run npx ux-ui-agent-skills init in the target project for the full kit, or npx ux-ui-agent-skills add tokens taste design-systems to install selected areas. Alternatively, clone the repository and copy the desired skill and workflow folders into the project.

Source and verification boundary: use https://github.com/plugin87/ux-ui-agent-skills as the canonical reference before running the workflow; keep commands, API calls, CLI usage, and generated outputs reviewable against that upstream source.

Framework fit: publish this as a Claude Code workflow only when the operator can invoke the documented toolchain directly, rather than treating the upstream project as a generic product listing.