UX/UI Mastery Plugin for Claude Code

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

v3.0.0 | 19 Skills | 55 References | 10 Commands | 310,000+ Words | 87 Files

"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

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

Requirements

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

10 Commands at Your Fingertips

19 Skills — The Complete Design Brain

Foundations: The Science Behind Every Decision

Implementation: Code That Ships

Platforms: Every Screen, Every Context

Experience: Craft That Users Feel

Emerging Tech: What's Next

How It Works

The plugin uses progressive disclosure — the same cognitive principle it teaches. Only the relevant skill and its references load based on your query, keeping Claude's context lean while providing deep expertise on demand.

Ask about "cognitive load" and Claude loads the cognitive psychology skill with 25+ Laws of UX. Ask about "React button component" and Claude loads the component patterns skill with the full React cookbook. Ask about "iOS 26" and Claude loads mobile UX with the Liquid Glass deep-dive.

Every skill cross-references every other skill. Critique methodology connects to heuristic evaluation. Component code connects to accessibility. Figma workflows connect to design tokens. Cognitive biases connect to ethics. It's a web of knowledge, not a stack of silos.

Design Philosophy

Built on the shoulders of giants:

Architecture

ux-ui-mastery/                          310K+ words across 87 files
├── .claude-plugin/
│   └── plugin.json                     v3.0.0 manifest
├── marketplace.json                    Distribution metadata
│
├── skills/                             19 skill domains
│   ├── cognitive-psychology-ux/        Laws of UX, biases, neurodesign
│   │   ├── SKILL.md                    2K words — overview + cross-refs
│   │   └── references/
│   │       ├── laws-of-ux-encyclopedia.md       25+ laws with formulas
│   │       ├── cognitive-biases-design-patterns.md  50+ biases + dark pattern alerts
│   │       └── neurodesign-engagement-science.md    Eye tracking, flow, dopamine
│   │
│   ├── component-patterns-code/        Production component code
│   │   ├── SKILL.md                    State matrix methodology
│   │   └── references/
│   │       ├── react-component-cookbook.md    15 React/TS components
│   │       ├── swiftui-component-cookbook.md  10 SwiftUI views + iOS 26
│   │       └── css-modern-patterns.md        12 modern CSS patterns
│   │
│   ├── design-critique-case-studies/   Critique + real-world analysis
│   │   ├── SKILL.md                    Liz Lerman, 30/60/90 framework
│   │   └── references/
│   │       ├── critique-methodology.md       Session formats + frameworks
│   │       ├── product-deep-dives.md         10 product analyses
│   │       └── redesign-failure-analysis.md  10 failure post-mortems
│   │
│   ├── figma-design-tool-workflows/    Figma MCP + design-to-code
│   │   ├── SKILL.md                    Figma mastery overview
│   │   └── references/
│   │       ├── figma-mastery-workflows.md    Auto Layout, variables, Dev Mode
│   │       ├── figma-mcp-ai-flywheel.md      MCP pipeline + 50-70% time savings
│   │       └── design-to-code-pipeline.md    Style Dictionary, CI/CD, visual regression
│   │
│   ├── performance-states-patterns/    Loading, errors, notifications
│   ├── cross-cultural-i18n-ux/        i18n, RTL, cultural dimensions
│   ├── ambient-calm-zero-ui/          Calm technology, ambient computing
│   ├── nng-ux-heuristics/            Nielsen's 10 heuristics
│   ├── ux-research-methods/          Research methodology
│   ├── mobile-ux-design/             iOS 26, M3 Expressive, wearable
│   ├── desktop-app-design/           Dashboards, data viz, keyboard-first
│   ├── ui-visual-design-system/      Typography, color, spacing, modern CSS
│   ├── accessibility-inclusive-design/ WCAG 2.2 + 3.0, ARIA, neurodiversity
│   ├── interaction-motion-design/    Animation, haptics, spring physics
│   ├── ai-spatial-voice-ux/         AI, AR/VR, voice, multimodal
│   ├── design-systems-architecture/  Tokens, governance, multi-brand
│   ├── ux-ethics-content-strategy/  Ethics, microcopy, sustainable UX
│   ├── agentic-ai-generative-ux/   Agentic AI, generative UI, hallucinations
│   └── ux-metrics-measurement/      HEART, SUS, A/B testing, AI metrics
│
├── commands/                          10 executable commands
│   ├── ux-audit.md                    NNG heuristic audit
│   ├── design-review.md              Full design review
│   ├── accessibility-check.md        WCAG 2.2 compliance
│   ├── generate-design-tokens.md     W3C token generation
│   ├── ai-ux-audit.md               AI trust/safety audit
│   ├── ux-metrics-plan.md           HEART metrics plan
│   ├── component-build.md           Production component builder
│   ├── design-critique.md           Liz Lerman critique
│   ├── figma-to-code.md            Design-to-code pipeline
│   └── cognitive-check.md          Cognitive psychology audit
│
└── README.md                         This file

Knowledge Base by the Numbers

Research Sources

Every claim in this plugin traces back to authoritative research:

Cognitive Science Kahneman (Peak-End Rule, System 1/2), Sweller (Cognitive Load Theory), Cowan (Working Memory), Iyengar & Lepper (Choice Overload), Fitts, Hick, Miller, Gestalt school, Simon (Satisficing), Csikszentmihalyi (Flow)

Academic Research arXiv: UX 3.0 Paradigm, GenAI for UX Research, EvAlignUX, Emotion-Aware Interaction, LLM Hallucination Detection | ACM CHI 2025: Designing UIs with AI, Screen Reader + AI Coding, Multi-Agent GenAI, AI Literacy

Industry Standards W3C: WCAG 3.0 April 2026 Draft, Design Tokens Oct 2025 Stable, WAI-ARIA | NNG Group 2025-2026: State of UX, AI Literacy, "AI Slop" Quality Gates, iOS 26 Usability Critique

Platform Sources Apple WWDC 2025 (iOS 26 Liquid Glass) | Google I/O 2025 (Material 3 Expressive) | Figma Config 2025 (MCP, Code Connect)

Industry Voices Smashing Magazine Feb 2026 (Agentic UX) | Microsoft Copilot Framework | OpenAI Apps SDK | Sparkbox (Design System ROI) | Amber Case (Calm Technology) | Liz Lerman (Critical Response Process)

Case Studies Stripe, Linear, Notion, Airbnb, Figma, Arc Browser, Duolingo, Vercel, Apple Health, Discord | Failures: Snapchat 2018, Windows 8, Digg v4, Sonos 2024, Healthcare.gov, Twitter/X, Google Plus, Reddit API, YouTube Dislikes, Skype

License

MIT

Built with obsessive attention to detail by Design Tribe Republic. Powered by Claude Opus 4.6.