🎨 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
2. The "Do Not" List (Anti-Patterns)
3. Anti-AI Slop Protocol
4. Modern Layout Patterns
5. Tactile Visual Styles (Optional)
6. Design-to-Code Protocol
7. 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: High-fidelity design standards.
• Bento Grid Architecture: Modular layout design.
• Neumorphism v2: Modern tactile aesthetics.
• Glassmorphism v3: Smart functional depth.
• AI-Adaptive Layouts: The future of personalized UI.

---

Updated: January 22, 2026 - 20:00