Skip to content
UXClaim
Design Systems

UX UI Mastery

A 19-skill design mastery plugin covering typography, colour systems, spacing scales, component APIs, and full WCAG 2.2 compliance.

UX UI Mastery is a large-scale plugin that ships 19 distinct skills, 55 reference documents, and 10 slash commands focused on design system work. It is built for teams that maintain component libraries and need Claude Code to understand the rules governing their system.

What makes it different

Most design skills teach Claude about general UX principles. This one goes deeper into the mechanical side of design systems. It understands type scales, spacing tokens, colour ramps with perceptual uniformity, component API contracts, and the relationship between design tokens and their CSS custom property outputs.

When you ask Claude to add a new component to your library, it will follow your existing naming conventions, use your token vocabulary, and generate variants that are consistent with the rest of the system. It does not invent new patterns when existing ones apply.

WCAG coverage

The plugin includes full WCAG 2.2 coverage along with an early preview of WCAG 3.0 criteria. This is useful for teams that want to stay ahead of evolving standards. The accessibility skills check contrast ratios against both the current and draft algorithms, flag target size issues, and verify focus management in complex widgets.

Scope and tradeoffs

This is a large plugin. The 55 reference documents add meaningful context to Claude’s responses but also consume token budget. Teams working on small projects may prefer a lighter skill. Teams maintaining production design systems with strict governance will find the depth worthwhile.

Frequently asked questions

What is UX UI Mastery used for?
UX UI Mastery is a design system plugin that helps Claude understand your team's typography, colour systems, spacing scales, and component APIs. It's designed for teams maintaining component libraries who need Claude to follow existing design patterns and naming conventions rather than inventing new ones.
Does this plugin include accessibility standards?
Yes. UX UI Mastery includes full WCAG 2.2 compliance coverage plus early WCAG 3.0 criteria. It checks contrast ratios, verifies target sizes, and validates focus management in complex widgets using both current and draft accessibility algorithms.
How many design skills and documents does it include?
The plugin ships 19 distinct skills, 55 reference documents, and 10 slash commands. The extensive documentation helps Claude understand your design system's rules, but also uses more tokens than lighter alternatives.
Can Claude generate components using my design tokens?
Yes. When you ask Claude to add a new component, it will follow your existing naming conventions, use your token vocabulary, and generate variants consistent with your system. It understands type scales, spacing tokens, and colour ramps with perceptual uniformity.
Is this plugin suitable for small projects?
UX UI Mastery is best for teams maintaining production design systems with strict governance. Small projects may prefer lighter skills since the 55 reference documents consume significant token budget.
What are design tokens and how does this plugin use them?
Design tokens are reusable design values (like colours, spacing, or font sizes) stored as variables. This plugin understands how tokens map to CSS custom properties and ensures new components use your token vocabulary consistently.
How does it handle component naming conventions?
The plugin learns your existing naming patterns and applies them to new components. Instead of inventing new names or patterns, Claude references your established conventions to maintain consistency across your library.

Glossary

Design tokens
Reusable design values (colours, spacing, typography, shadows) stored as variables that map to CSS custom properties and maintain consistency across component libraries.
Type scale
A system of harmonious font sizes that follow a mathematical ratio, ensuring typography hierarchy is consistent and predictable across all components.
Colour ramps
Systematic variations of a single colour that maintain perceptual uniformity—ensuring shades appear evenly spaced in perceived brightness regardless of hue.
Component API
The set of props, variants, and configuration options that define how a component can be used, modified, and integrated into other designs.
WCAG compliance
Meeting Web Content Accessibility Guidelines standards for contrast ratios, target sizes, keyboard navigation, and focus management to ensure designs are usable by all people.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.