# UI/UX Excellence Prover MCP

> UI/UX Excellence Prover enforces 2026-era design standards on generated interfaces. This tool checks for semantic spatial hierarchy, spring physics motion systems, mandatory 8-state microinteractions, and WCAG AAA accessibility compliance. It flags everything from arbitrary padding to dark patterns, giving your AI client a critical review that goes beyond basic functionality.

## Overview
- **Category:** productivity
- **Price:** Free
- **Tags:** uiux, design-system, microinteractions, accessibility, motion-design, spring-animations, structured-reasoning, agentic-pipeline

## Description

Look, your AI client can spit out a bunch of code fast. But speed ain't quality. The interfaces it builds often fall way short of what senior designers use every day—they look cheap, they feel clunky, and they fail basic usability checks.

That’s where the `validate_uiux_excellence` tool comes in. It doesn't just glance at your design; it forces your AI client to run everything through six rigorous industry pillars. You get a critical review that goes way deeper than just making sure buttons work. It finds things like weird shadows, confusing depth, or motion that don’t mean anything.

**Spatial Structure and Depth:** This tool validates component placement by checking its semantic elevation level—you'll see it uses a system from 0 to 5 to communicate depth, not just throwing random `box-shadow` values on everything. It enforces principles like Liquid Glass materiality, making sure the layout communicates hierarchy through structure itself.

**Motion Physics and Interaction:** The tool checks your animations hard. It verifies that any motion uses proper spring physics models—specifically checking for stiffness and damping ratios at a consistent 60 frames per second (fps). If the animation doesn't serve a clear function, like guiding the user or confirming an action, it fails. You won't get decorative wobble; you'll get purposeful movement.

**Element States and Lifecycle:** Every interactive component must pass through a full lifecycle test. This includes checking for eight mandatory states: idle, hover (when the mouse’s over it), active (when you press it down), focus (for keyboard navigation), disabled (if it can't be used yet), loading, success, and error. It won't let you launch anything without all those pieces.

**Grid System and Spacing:** The tool enforces structure across the whole layout. You’ll see it checks against a strict 8px modular grid system for alignment and consistently scales your typography. This means no arbitrary padding—everything has to fit the established rhythm, or it gets flagged.

**Accessibility Compliance (WCAG AAA):** It runs comprehensive tests against WCAG 2.2 AAA standards. These aren't just suggestions; they are hard requirements. The tool ensures proper `aria` roles for screen readers and implements keyboard focus traps so that when a user navigates with the Tab key, their focus never gets lost in the design. This is non-negotiable.

**Dark Pattern Auditing:** Finally, it actively hunts down dark patterns—those sneaky tricks like infinite scroll mechanisms or fake urgency timers. It forces intentional friction and transparency into your UI, making sure the user experience isn't misleading or manipulative.

When you use this tool, you get a complete architectural review that ensures your output doesn't just *function* but looks like it belongs in a real product at the top tier of the industry. It handles everything from semantic depth levels and spring physics models to WCAG AAA compliance and eight-state microinteractions.

## Tools

### validate_uiux_excellence
Validates any UI/UX design against six pillars: spatial hierarchy, spring motion physics, 8 element states, 8px rhythm, WCAG AAA accessibility, and zero dark patterns.

## Prompt Examples

**Prompt:** 
```
I'll build a dashboard with cards using box-shadow, CSS ease-in-out animations, buttons with hover color change only, random padding values, and a dark mode toggle.
```

**Response:** 
```
Verdict: FLAT_DECORATION. Shadows are decorative — define elevation 0-5 with semantic roles. Replace ease-in-out with spring physics. Buttons need 8 states (idle/hover/active/focus/disabled/loading/success/error). Standardize to 8px grid. Dark mode needs surface lightness, not just color swap.
```

**Prompt:** 
```
KPI cards: elevation 1→2 on hover (spring stiffness 400). Chart: skeleton loading with pulse, error state with retry button. Sidebar: spring slide from right (300ms, damping 20). 8px grid. WCAG 2.2 AAA. prefers-reduced-motion: fade fallback. No infinite scroll — paginated data table.
```

**Response:** 
```
Verdict: DESIGN_PROVEN. Spatial hierarchy (elevation 1→2 with spring). Motion system (spring physics, skeleton loading, reduced-motion fallback). 8-state interactions (loading, error+retry). 8px rhythm. WCAG AAA. Calm UI (paginated, no infinite scroll). Ship it.
```

**Prompt:** 
```
I'll add parallax scrolling background, particle effects, auto-playing hero video, infinite scroll feed, and confetti animation on every form submission.
```

**Response:** 
```
Verdict: DARK_PATTERN_DETECTED. Parallax/particles = decorative noise without communicative purpose. Auto-play violates user agency. Infinite scroll is an attention trap (add 'Load more' or pagination). Confetti on every submit = cognitive overload. Every animation must EXPLAIN, GUIDE, or CONFIRM — nothing else.
```

## Capabilities

### Check Spatial Structure
Validates component depth and materiality using semantic elevation levels (0-5) and Liquid Glass principles.

### Analyze Motion Physics
Verifies that animations use spring physics models (stiffness/damping) at 60fps, ensuring motion is purposeful rather than decorative.

### Verify Element States
Confirms interactive components include all necessary states: idle, hover, active, focus, disabled, loading, success, and error.

### Enforce Grid and Spacing
Checks the entire layout against an 8px modular grid system and consistent typographic scaling.

### Audit Accessibility Compliance
Tests for WCAG 2.2 AAA compliance, including proper aria roles and keyboard focus trap implementation.

## Use Cases

### Building a complex dashboard UI
The architect needs to ensure the new KPI cards don't just *look* good. They run `validate_uiux_excellence` which instantly catches that the elevation change on hover is too simple, forcing them to implement spring physics and proper 8-state microinteractions.

### Integrating a settings panel
A developer adds a new section for user preferences. The server flags inconsistent spacing (rhythm collapse) and warns that the modal doesn't have focus traps or clear keyboard navigation, forcing compliance with WCAG AAA.

### Designing an onboarding flow
The team wants to use a particle background video. The tool immediately flags this as 'decorative noise without communicative purpose,' preventing the adoption of a dark pattern and guiding them toward intentional, guided motion.

### Refining checkout button states
Before release, `validate_uiux_excellence` checks the primary CTA. It confirms that when the user clicks (active press) and if an error occurs (error state), the button behaves according to all 8 required microstates.

## Benefits

- **Stops Flat Design:** The tool forces proper spatial hierarchy (Elevation 0-5) and Liquid Glass materiality. You stop using shadows just for decoration; they now communicate depth.
- **Guarantees Interaction Polish:** It requires every button and component to define all 8 states (idle, hover, active, focus, etc.). Your agent won't ship a button with only a color change on hover.
- **Enforces Smooth Motion Physics:** Instead of simple CSS ease-in-out, the tool mandates spring physics (stiffness/damping) at 60fps. Animations now feel deliberate, not random.
- **Builds Truly Accessible Systems:** It runs WCAG 2.2 AAA checks and handles `prefers-reduced-motion` fallbacks automatically. Your UI works for keyboard users and screen readers.
- **Eliminates Cognitive Traps:** The Prover actively scans for dark patterns—infinite scroll, auto-play videos, fake urgency. You build systems that respect user agency.

## How It Works

The bottom line is that this tool forces your AI client to think like a senior design architect, catching the structural flaws most generators miss.

1. Feed the tool your design wireframe or code snippet (e.g., a component structure).
2. The `validate_uiux_excellence` tool runs its full audit across six pillars, checking for deviations from 2026 standards.
3. You receive a verdict: DESIGN_PROVEN (it passed) or FLAT_DECORATION/DARK_PATTERN_DETECTED (it failed), with specific failure points listed.

## Frequently Asked Questions

**How does validate_uiux_excellence handle motion?**
It enforces spring physics (stiffness/damping) over simple CSS transitions. It verifies that movement only serves to explain, guide, or confirm an action, preventing decorative 'fluff' animations.

**Does UI/UX Excellence Prover check for accessibility?**
Yes. The tool runs checks against WCAG 2.2 AAA standards. It specifically audits keyboard focus traps and ensures proper handling of `prefers-reduced-motion` settings.

**What is the difference between this and a standard design checker?**
A standard checker looks for basic rules. The Prover checks architectural patterns, like ensuring all interactive elements have 8 defined states (idle through error), which goes far beyond simple visual compliance.

**Can I use validate_uiux_excellence on existing code?**
Yes. You feed it your component structure or code snippet, and the tool provides a technical verdict listing exactly where spatial hierarchy fails or where dark patterns are detected.

**What format should I provide when using validate_uiux_excellence?**
Focus on describing components or providing isolated code snippets for best results. The tool analyzes design decisions, so detailed context about the intended user flow helps it check all six pillars.

**Are there any rate limits when I run validate_uiux_excellence?**
Vinkius manages usage rates, and specific throttling details are listed in the documentation. Since this tool is for iterative design, repeated validation across multiple components is expected.

**Can I integrate validate_uiux_excellence into a CI/CD pipeline?**
Yes. The MCP standard allows you to call `validate_uiux_excellence` via API endpoints. This lets you enforce design compliance automatically before merging code.

**If my prompt isn't about a user interface, will validate_uiux_excellence still give feedback?**
The tool is specialized for UI/UX patterns. If the input falls outside visual or interactive design scope, it returns an error stating that the content is unrelated to its defined pillars.

**Does it generate UI designs or code?**
No. The agent designs or codes the interface. The tool VALIDATES that it meets 2026-era standards across six pillars: spatial hierarchy, spring motion, 8-state microinteractions, 8px rhythm, WCAG 2.2 AAA neuro-inclusive accessibility, and Calm UI principles. It coaches — not generates.

**Why 8 states per interactive element?**
Because a button without feedback is a dead rectangle. The 8 states (idle, hover, active, focus-visible, disabled, loading, success, error) cover every moment of interaction. Each state uses spring physics for natural transitions. Without all 8, users cannot perceive affordance, progress, or outcome.

**What is Calm UI and why does it matter?**
Calm UI is the 2026 shift from 'time on page' to 'time well spent'. It rejects dark patterns: infinite scroll without end states, auto-play media, fake urgency, hidden opt-outs. It implements intentional friction for destructive actions, progressive disclosure, and natural stopping points. Respect > engagement.