# UI UX Pro

> Senior UI/UX Architect & Design Systems Specialist. Expert in Anti-AI Slop aesthetics, Bold Minimalism, and Production-Grade Interfaces.

- Skill: `yuniorglez/ui-ux-pro` (Agent Skill, multi-file: 34 files)
- Install (CLI): `npx skillmds@latest add yuniorglez/ui-ux-pro`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yuniorglez/ui-ux-pro/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yuniorglez (https://skillmd.com/u/yuniorglez)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yuniorglez/ui-ux-pro

---


# 🎨 Skill: UI/UX Pro (v1.2.0)

## Executive Summary
The `ui-ux-pro` is the visionary architect of the user experience. In 2026, design is no longer just about aesthetics; it is about **Impeccable Craftsmanship**, **Intentionality**, and **Human-Grade Production**. This skill focuses on building high-end interfaces that eradicate "AI Slop" by choosing bold, distinctive directions and executing them with technical precision (OKLCH, Container Queries, Fluid Motion).

---

## 📋 Table of Contents
1. [Core Design Philosophies](#core-design-philosophies)
2. [The "Do Not" List (Anti-Patterns)](#the-do-not-list-anti-patterns)
3. [Anti-AI Slop Protocol](#anti-ai-slop-protocol)
4. [Modern Layout Patterns](#modern-layout-patterns)
5. [Tactile Visual Styles (Optional)](#tactile-visual-styles-optional)
6. [Design-to-Code Protocol](#design-to-code-protocol)
7. [Reference Library](#reference-library)

---

## 🏛️ Core Design Philosophies

1.  **Impeccable DNA**: Adhere to the standards in `IMPECCABLE_DNA.md`. Prioritize uniqueness over templates.
2.  **Intentional Tonality**: Choose a bold extreme (e.g., Brutally Minimal, Editorial, Industrial) and stay consistent.
3.  **AX-First Architecture**: Ensure the UI is navigable by both humans and AI agents.
4.  **Fluid Precision**: Use `clamp()` for spacing/type and natural easing for motion.
5.  **Resilient Craft**: Design for the "Unideal" (long text, slow networks, RTL).

---

## 🚫 The "Do Not" List (Anti-Patterns)

| Anti-Pattern | Why it fails in 2026 | Modern Alternative |
| :--- | :--- | :--- |
| **AI Slop Aesthetics** | Generic purple gradients, glassmorphism-by-default. | **Distinctive Brand Direction**. |
| **Inter/Roboto Default**| Looks like a generic template/AI output. | **High-Character Typography**. |
| **Identical Card Grids**| Lazy layout shorthand; visually monotonous. | **Asymmetric/Varied Spacing**. |
| **Emoji-Only UI** | Lacks professional depth and scalability. | **SVG Systems / Custom Icons**. |
| **Fixed Constraints** | Breaks on non-standard viewports. | **Container Queries & Flex**. |

---

## 💎 Anti-AI Slop Protocol

Before shipping any UI, perform the **Quality Audit**:
- [ ] **Typography**: Is this font overused (Inter/Roboto)? If so, replace with a distinctive pairing.
- [ ] **Color**: Are we using the "AI Purple/Cyan" palette? If so, shift to a purposeful `oklch()` palette.
- [ ] **Layout**: Does it look like a generic dashboard? If so, introduce asymmetry or "Bolder" contrast.
- [ ] **The Test**: Would a human believe an AI made this immediately? If yes, REWORK.

---

## 💧 Tactile Visual Styles (Use Sparingly)

Styles like Glassmorphism and Neumorphism should be used only when they serve a clear **Functional Purpose** (e.g., depth in complex layering), never as decorative filler.

### Glassmorphism v3
- **Backdrop Blur**: Use `backdrop-blur-xl` for depth, not just "vibes".
- **Edge Light**: 1px semi-transparent borders to define structure.

### Neumorphism v2
-   **Muted Tactility**: Subtle, low-contrast "pressed" effects.
-   **Hybrid Style**: Combining glass and neumorphism for maximum depth.

---

## 🤖 AI-Adaptive Interfaces

-   **Dynamic Themes**: Adapting color and tone based on session sentiment.
-   **Component Swapping**: Replacing UI elements based on user struggle signals.

---

## 📖 Reference Library

Detailed deep-dives into UI/UX Excellence:

- [**Impeccable DNA**](../expert-instruction/references/IMPECCABLE_DNA.md): High-fidelity design standards.
- [**Bento Grid Architecture**](./references/bento-grid-architecture.md): Modular layout design.
- [**Neumorphism v2**](./references/neumorphism-v2-clean.md): Modern tactile aesthetics.
- [**Glassmorphism v3**](./references/glassmorphism-v3-functional.md): Smart functional depth.
- [**AI-Adaptive Layouts**](./references/ai-adaptive-layouts.md): The future of personalized UI.

---

*Updated: January 22, 2026 - 20:00*