🎨 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
- Core Design Philosophies
- The "Do Not" List (Anti-Patterns)
- Anti-AI Slop Protocol
- Modern Layout Patterns
- Tactile Visual Styles (Optional)
- Design-to-Code Protocol
- Reference Library
🏛️ Core Design Philosophies
- Impeccable DNA: Adhere to the standards in
IMPECCABLE_DNA.md. Prioritize uniqueness over templates.
- Intentional Tonality: Choose a bold extreme (e.g., Brutally Minimal, Editorial, Industrial) and stay consistent.
- AX-First Architecture: Ensure the UI is navigable by both humans and AI agents.
- Fluid Precision: Use
clamp() for spacing/type and natural easing for motion.
- 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:
💧 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:
Updated: January 22, 2026 - 20:00
1---2name: ui-ux-pro3description: Senior UI/UX Architect & Design Systems Specialist. Expert in Anti-AI Slop aesthetics, Bold Minimalism, and Production-Grade Interfaces.4---56# 🎨 Skill: UI/UX Pro (v1.2.0)78## Executive Summary9The `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).1011---1213## 📋 Table of Contents141. [Core Design Philosophies](#core-design-philosophies)152. [The "Do Not" List (Anti-Patterns)](#the-do-not-list-anti-patterns)163. [Anti-AI Slop Protocol](#anti-ai-slop-protocol)174. [Modern Layout Patterns](#modern-layout-patterns)185. [Tactile Visual Styles (Optional)](#tactile-visual-styles-optional)196. [Design-to-Code Protocol](#design-to-code-protocol)207. [Reference Library](#reference-library)2122---2324## 🏛️ Core Design Philosophies25261. **Impeccable DNA**: Adhere to the standards in `IMPECCABLE_DNA.md`. Prioritize uniqueness over templates.272. **Intentional Tonality**: Choose a bold extreme (e.g., Brutally Minimal, Editorial, Industrial) and stay consistent.283. **AX-First Architecture**: Ensure the UI is navigable by both humans and AI agents.294. **Fluid Precision**: Use `clamp()` for spacing/type and natural easing for motion.305. **Resilient Craft**: Design for the "Unideal" (long text, slow networks, RTL).3132---3334## 🚫 The "Do Not" List (Anti-Patterns)3536| Anti-Pattern | Why it fails in 2026 | Modern Alternative |37| :--- | :--- | :--- |38| **AI Slop Aesthetics** | Generic purple gradients, glassmorphism-by-default. | **Distinctive Brand Direction**. |39| **Inter/Roboto Default**| Looks like a generic template/AI output. | **High-Character Typography**. |40| **Identical Card Grids**| Lazy layout shorthand; visually monotonous. | **Asymmetric/Varied Spacing**. |41| **Emoji-Only UI** | Lacks professional depth and scalability. | **SVG Systems / Custom Icons**. |42| **Fixed Constraints** | Breaks on non-standard viewports. | **Container Queries & Flex**. |4344---4546## 💎 Anti-AI Slop Protocol4748Before shipping any UI, perform the **Quality Audit**:49- [ ] **Typography**: Is this font overused (Inter/Roboto)? If so, replace with a distinctive pairing.50- [ ] **Color**: Are we using the "AI Purple/Cyan" palette? If so, shift to a purposeful `oklch()` palette.51- [ ] **Layout**: Does it look like a generic dashboard? If so, introduce asymmetry or "Bolder" contrast.52- [ ] **The Test**: Would a human believe an AI made this immediately? If yes, REWORK.5354---5556## 💧 Tactile Visual Styles (Use Sparingly)5758Styles 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.5960### Glassmorphism v361- **Backdrop Blur**: Use `backdrop-blur-xl` for depth, not just "vibes".62- **Edge Light**: 1px semi-transparent borders to define structure.6364### Neumorphism v265- **Muted Tactility**: Subtle, low-contrast "pressed" effects.66- **Hybrid Style**: Combining glass and neumorphism for maximum depth.6768---6970## 🤖 AI-Adaptive Interfaces7172- **Dynamic Themes**: Adapting color and tone based on session sentiment.73- **Component Swapping**: Replacing UI elements based on user struggle signals.7475---7677## 📖 Reference Library7879Detailed deep-dives into UI/UX Excellence:8081- [**Impeccable DNA**](../expert-instruction/references/IMPECCABLE_DNA.md): High-fidelity design standards.82- [**Bento Grid Architecture**](./references/bento-grid-architecture.md): Modular layout design.83- [**Neumorphism v2**](./references/neumorphism-v2-clean.md): Modern tactile aesthetics.84- [**Glassmorphism v3**](./references/glassmorphism-v3-functional.md): Smart functional depth.85- [**AI-Adaptive Layouts**](./references/ai-adaptive-layouts.md): The future of personalized UI.8687---8889*Updated: January 22, 2026 - 20:00*
yuniorglez