ux-ui-agent-skills

Transform Claude into a senior design architect with design tokens, components, accessibility, and more.

Agent SkillDesignOpen source

Type: Agent Skill
Open source: Yes
GitHub Stars: ★ 1.1k
Source: skill-github
Repository: github.com/plugin87/ux-ui-agent-skills

Overview

UX/UI Agent Skills is a comprehensive toolkit featuring structured instructions, design tokens, executable skills, and 138 brand-grade design systems, turning Claude into a UX/UI expert agent. It supports any framework and design system, ideal for projects requiring consistent, accessible, and token-based design outputs. Easily integrated with a simple installation command, it's suitable for development teams needing high-quality design and accessibility.

Capabilities

▪Generate design tokens in DTCG format
▪Design components from atomic to templates
▪Generate code for any framework
▪Interoperability across design systems
▪17 callable skills and 4 slash commands
▪WCAG 2.2 AA/AAA accessibility audit

Use cases

Design notification components with accessibility ensuredAudit accessibility and usability of login pagesGenerate code for data tables with sorting and paginationCreate color token palettes for fintech brands

Setup

Requires: API Key

npx ux-ui-agent-skills init or git clone https://github.com/plugin87/ux-ui-agent-skills.git

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.

FAQ

How do I get started?

Install or clone the repository using npx, then open the project in Claude Code or another Claude-supported IDE.

Which frameworks are supported?

Supports multiple frameworks including React, Next.js, SwiftUI, Vue, Svelte, and more.

Related skills

lemo-opuscar

43 film styles, each accompanied by a short film entirely created with code.

Agent Skill

manim_skill

An Agent skill for creating 3Blue1Brown-style animations with Manim.

Agent Skill

drawio-skill

Generate draw.io diagrams from natural language, supporting multiple presets and export formats.

Agent Skill

sprite-gen

Generate clean 2D game sprites and animation atlases.

Agent Skill

logo-generator-skill

Professional SVG logo generator with multiple design variants and presentation backgrounds.

Agent Skill

claude-skill-aso-appstore-screenshots

Generate high-quality App Store screenshots to boost app download rates.

Agent Skill