Search everything...

Stats

Actions

Available In

ux-ui-mastery

Name: ux-ui-mastery
Author: phazurlabs

By phazurlabs

The definitive UX/UI design mastery plugin — 19 skills, 55 references, 10 commands, 300K+ words. Covers cognitive psychology, component code (React/SwiftUI/CSS), heuristic evaluation, design critique with case studies, Figma workflows with MCP design-to-code, research methods, mobile/desktop/web design (iOS 26 Liquid Glass, Material 3 Expressive), visual systems, accessibility (WCAG 2.2 + 3.0), motion and haptics, AI/spatial/voice UX, agentic AI and generative UI, performance states, cross-cultural i18n, ambient/calm technology, UX metrics, design systems architecture, and ethics/content strategy. Built on NNG Group methodology, 50+ cognitive biases, 25+ Laws of UX, and research from arXiv, ACM CHI 2025, W3C, Smashing Magazine 2026, and industry sources.

npx claudepluginhub phazurlabs/ux-ui-mastery --plugin ux-ui-mastery

Popularity

Stars

Top 25%

Med: 0·Avg: 285

Installs

Med: 0·Avg: 1

What's Inside

Slash Commands10

accessibility-check

/accessibility-check

Deep WCAG 2.2 compliance audit on code with specific fixes for every violation found.

ai-ux-audit

/ai-ux-audit

Audit AI-powered features against agentic, trust, safety, and interaction best practices with scoring and specific fix recommendations.

cognitive-check

/cognitive-check

Audit an interface against Laws of UX, Gestalt principles, and cognitive bias analysis. Evaluates cognitive load, decision architecture, and attention management with scored findings.

component-build

/component-build

Build a production-ready UI component with full state matrix, accessibility, design tokens, and platform code (React/SwiftUI/CSS).

design-critique

/design-critique

Conduct a structured design critique using the Liz Lerman Critical Response Process, scoring across 10 dimensions with heuristic-grounded feedback.

Skills19

Accessibility & Inclusive Design

/accessibility-inclusive-design

Comprehensive accessibility expertise covering WCAG 2.2 compliance, ARIA patterns, screen reader optimization, keyboard navigation, motor and cognitive accommodations, neurodiversity considerations, and inclusive design methodology.

Agentic AI & Generative UX

/agentic-ai-generative-ux

Design patterns for agentic AI systems, multi-agent orchestration, generative UI, RAG interfaces, AI safety guardrails, trust calibration, and the paradigm shift from tool-based to agent-based interfaces. Covers AI copilot frameworks, prompt engineering UX, and AI anti-patterns.

AI, Spatial & Voice UX

/ai-spatial-voice-ux

Design patterns for AI-native interfaces, conversational UX, spatial computing (AR/VR/MR), voice interfaces, multimodal interaction design, and emerging interaction paradigms for 2025-2030.

Ambient Computing & Calm Technology

/ambient-calm-zero-ui

Calm technology principles, zero-UI patterns, ambient computing interfaces, proactive intelligence UX, screenless interaction design, and background intelligence systems

cognitive-psychology-ux

/cognitive-psychology-ux

Cognitive psychology foundations for UX design — Laws of UX, Gestalt principles, cognitive biases, mental models, attention, memory, and perception science applied to interface design

README

UX/UI Mastery Plugin for Claude Code

The most comprehensive UX/UI design intelligence ever built for an AI coding assistant.

"Every pixel on a screen is ultimately processed by a human brain. This plugin ensures Claude understands that brain."

Why This Exists

Most design tools give you components. Most AI assistants give you opinions. Neither gives you the science of why users behave the way they do — and the production code to act on it.

This plugin gives Claude Code the equivalent of a senior UX designer's entire career knowledge: cognitive psychology, battle-tested heuristics, platform-native component code, real product case studies, and the latest 2025-2026 research — all activated automatically when you need it.

The result: Claude doesn't just suggest "make the button bigger." It tells you Fitts's Law predicts a 23% improvement at 48px, generates the accessible React component with all 10 states, and flags that your 14-option dropdown violates Hick's Law.

What Changed in v3.0

Before (v2.0)	After (v3.0)
12 skills, 30 references	19 skills, 55 references
~170K words of theory	310K+ words of theory AND implementation
Zero code examples	40+ production React, SwiftUI, and CSS components
Zero case studies	18+ product deep-dives and failure analyses
No cognitive science	25+ Laws of UX, 50+ cognitive biases, neurodesign
No Figma integration	Full Figma MCP design-to-code flywheel
Outdated platforms	iOS 26 Liquid Glass, Material 3 Expressive, modern CSS
No design critique tools	Structured critique with Liz Lerman methodology
6 commands	10 commands

Installation

Prerequisites

Claude Code CLI installed and authenticated
No other dependencies — the plugin is pure markdown, zero config

Method 1: Install from GitHub Marketplace (Recommended for End Users)

This is the standard way to install Claude Code plugins. Run these commands inside a Claude Code session:

/plugin marketplace add phazurlabs/ux-ui-mastery
/plugin install ux-ui-mastery@ux-ui-mastery-marketplace

That's it. The plugin is now permanently installed and available in every session.

To choose installation scope:

User scope (all projects): Plugin is registered in ~/.claude/settings.json
Project scope (team-shared): Plugin is registered in .claude/settings.json in your project
Local scope (personal, gitignored): Plugin is registered in .claude/settings.local.json

Method 2: Clone + Load Directly (For Development / Testing)

Clone the repo anywhere, then load it with the --plugin-dir flag:

git clone https://github.com/phazurlabs/ux-ui-mastery.git
claude --plugin-dir ./ux-ui-mastery

This loads the plugin for that session only. Great for testing or development.

Method 3: Clone + Register Permanently (Manual)

Step 1: Clone into the plugins directory:

mkdir -p ~/.claude/plugins
cd ~/.claude/plugins
git clone https://github.com/phazurlabs/ux-ui-mastery.git

Step 2: Register the plugin in your Claude Code settings. Edit ~/.claude/settings.json:

{
  "enabledPlugins": {
    "ux-ui-mastery": true
  }
}

Step 3: Restart Claude Code. The plugin loads automatically every session.

Verify Installation

Start Claude Code and run any slash command:

/ux-audit
/cognitive-check
/component-build
/design-critique
/figma-to-code

Commands appear as /ux-ui-mastery:command-name (e.g., /ux-ui-mastery:ux-audit).

You can also test skill activation by asking about any trigger topic:

"What does Fitts's Law say about button sizing?"
"Audit this component for cognitive load"
"Build me a React modal with all states"
"What went wrong with the Snapchat 2018 redesign?"

The relevant skill and deep references load automatically based on your query.

Troubleshooting

Problem	Solution
Commands not showing up	Restart Claude Code after installation
`/plugin` command not recognized	Update Claude Code to the latest version
Skills not activating on topics	Verify `plugin.json` exists at `.claude-plugin/plugin.json`
Want to uninstall	Run `/plugin uninstall ux-ui-mastery` or remove from `settings.json`

Requirements

Claude Code CLI (latest version)
No external dependencies — pure markdown, zero config, works offline

10 Commands at Your Fingertips

View full README on GitHub

Similar Plugins

ui-design

35.7k·318·

Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns

3mo

v1.0.3

wshobson

designpowers

187·2·

Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically

v1.0.0

Owl-Listener

ui-designer

53·8·

Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design

3mo

v1.0.0

devsforge

agents-design-experience

2.9k·7·

Agents for UI/UX design, accessibility, and user experience optimization

5mo

v1.0.0

davepoon

designer-skill

16·

Plug-and-play MCP that gives your agent UI superpowers. One install: design skill + MCP server, zero config.

v0.10.0

Pythoughts-labs

ux

34·1·

Design intelligence engine for AI coding. v3 ships THE BRAIN: a deterministic 7-axis synthesizer (warmth, contrast, density, geometry, formality, motion, type_personality) that compiles a novel design language per brief — no LLM calls, fully offline, closed-loop learning via a local decisions ledger. 1,243 structured entries, 160 real brand specs treated as training data, 152 anti-pattern rules, 25 slash commands, 18 MCP tools (incl. ux_synthesize, ux_decisions_query, ux_decisions_stats), 5 sub-agents. Three auto-dispatched modes: strict_brand (100% reference brand tokens), brand_anchor (70/30 blend), pure_synthesis (8 axis-distilled exemplars). /ux-evolve runs lint→polish→re-lint to score ≥ 90. Cross-IDE via pip/npx — runs in 17 environments including Claude Code, Cursor, Windsurf, Copilot, Gemini CLI, Codex, Cline, Continue, Aider, Zed. Anti-AI-slop by default. 0 telemetry.

v3.1.0

Laith0003

More by phazurlabs

chef-sumi

2·

Chef Sumi — vibe coded slop into visual cuisine. UX/UI design mastery plugin — 42 skills, 34 commands (19 MAKE + 6 REVIEW + 6 PLAN + 3 utility) across 3 tiers. Action-first design intelligence with anti-slop engine, AI UI quality transformation, and design memory (.sumi/ directory). Design Quality Score (0-100 DQS), platform-aware generation (iOS 26/M3/web), project-wide consistency audit, cognitive load analysis, starter recipes. Commands: /fix, /style, /palette, /type, /layout, /wireframe, /screen, /component, /page, /tokens, /form, /nav, /animate, /icon, /dark, /responsive, /onboard, /generate, /remix, /audit, /roast, /grade, /qa, /a11y, /before-after, /brief, /research, /benchmark, /map, /measure, /preflight, /sumi, /next, /status. Covers user research, information architecture, wireframing, visual design mastery (36+ designers, 70 rules, Awwwards scoring), platform standards (iOS 26, M3 Expressive, CSS 2025-2026, 9 device types), AI design generation (Stitch MCP, Fal.ai, Recraft V3, Veo 3.1), UI pattern intelligence (200+ patterns, 50+ benchmarks), usability testing, design QA, pre-launch checklist, production code (React/SwiftUI/CSS), Figma MCP, WCAG 2.2+3.0, and 20+ industry verticals.

3mo

v9.0.0

phazurlabs

ux-ui-mastery

Popularity

Confidence

What's Inside

README

UX/UI Mastery Plugin for Claude Code

The most comprehensive UX/UI design intelligence ever built for an AI coding assistant.

Why This Exists

What Changed in v3.0

Installation

Prerequisites

Method 1: Install from GitHub Marketplace (Recommended for End Users)

Method 2: Clone + Load Directly (For Development / Testing)

Method 3: Clone + Register Permanently (Manual)

Verify Installation

Troubleshooting

Requirements

10 Commands at Your Fingertips

Similar Plugins

ui-design

designpowers

ui-designer

agents-design-experience

designer-skill

ux

More by phazurlabs

chef-sumi

UX/UI Mastery Plugin for Claude Code

The most comprehensive UX/UI design intelligence ever built for an AI coding assistant.

Why This Exists

What Changed in v3.0

Installation

Prerequisites

Method 1: Install from GitHub Marketplace (Recommended for End Users)

Method 2: Clone + Load Directly (For Development / Testing)

Method 3: Clone + Register Permanently (Manual)

Verify Installation

Troubleshooting

Requirements

10 Commands at Your Fingertips

Popularity

Health & Quality

More by phazurlabs

chef-sumi

Similar Plugins

ui-design

designpowers

ui-designer

agents-design-experience

designer-skill

ux