playbooks

home / skills / yuniorglez / gemini-elite-core / ui-ux-pro

ui-ux-pro skill

/skills/ui-ux-pro

This skill helps you design high-end, AI-adaptive UIs with modular Bento Grid layouts, tactile Glassmorphism and Neumorphism styles for 2026.

npx playbooks add skill yuniorglez/gemini-elite-core --skill ui-ux-pro

Review the files below or copy the command above to add this skill to your agents.

Files (34)
SKILL.md
3.6 KB
---
name: ui-ux-pro
id: ui-ux-pro
version: 1.1.0
description: "Senior UI/UX Architect & Design Systems Specialist. Expert in Bento Grid, Neumorphism v2, Glassmorphism v3, and AI-Adaptive Layouts for 2026."
---

# 🎨 Skill: UI/UX Pro (v1.1.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 **Modular Intelligence**, **Tactile Depth**, and **Dynamic Adaptation**. This skill focuses on building high-end, responsive, and accessible interfaces that feel both modern and integrated. From **Bento Grid** layouts to **AI-Driven Adaptive UIs**, we design for both human delight and machine readability.

---

## 📋 Table of Contents
1. [Core Design Philosophies](#core-design-philosophies)
2. [The "Do Not" List (Anti-Patterns)](#the-do-not-list-anti-patterns)
3. [Modern Layout Patterns (Bento Grid)](#modern-layout-patterns-bento-grid)
4. [Tactile Visual Styles (Neumorphism & Glassmorphism)](#tactile-visual-styles-neumorphism--glassmorphism)
5. [AI-Adaptive Interfaces](#ai-adaptive-interfaces)
6. [Design-to-Code Protocol](#design-to-code-protocol)
7. [Reference Library](#reference-library)

---

## 🏛️ Core Design Philosophies

1.  **Modular by Default**: Every component should live in a well-defined cell or container.
2.  **Tactile Intuition**: Use depth, blurs, and shadows to guide the user's hand.
3.  **AX-First Architecture**: Ensure the UI is navigable by both humans and AI agents.
4.  **Extreme Rounding**: In 2026, 24px+ rounding is the standard for cards and grids.
5.  **Performance as Design**: If it's not fluid (120fps), it's not a good design.

---

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

| Anti-Pattern | Why it fails in 2026 | Modern Alternative |
| :--- | :--- | :--- |
| **Fixed Width Grids** | Inflexible for modern screen sizes. | Use **Adaptive Bento Grids**. |
| **Emoji UI Icons** | Looks unprofessional and non-scalable. | Use **SVG Icon Systems**. |
| **Instant State Jumps**| Jarring and lacks "liquid" feel. | Use **150-300ms Transitions**. |
| **Static Dashboards** | Overwhelms users with noise. | Use **Intent-Based Reordering**. |
| **Ignoring Contrast** | Fails modern a11y audits. | Follow **WCAG 2.2 AA Standards**. |

---

## 🍱 Modern Layout Patterns

### Bento Grid Mastery
-   **Structure**: 4-column or 12-column modular cells.
-   **Visual**: Exaggerated rounding (`rounded-3xl`) and consistent gaps.
-   **Responsiveness**: Intelligent single-column collapse.

*See [References: Bento Grid Architecture](./references/bento-grid-architecture.md) for blueprints.*

---

## 💧 Tactile Visual Styles

### Glassmorphism v3
-   **Backdrop Blur**: `backdrop-blur-xl`.
-   **Edge Light**: 1px semi-transparent white borders.

### 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:

- [**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*

Overview

This skill is a Senior UI/UX Architect and Design Systems specialist focused on high-end, modular interfaces for 2026. It combines Bento Grid layout mastery, Neumorphism v2, Glassmorphism v3, and AI-Adaptive Layout patterns to produce accessible, performant, and tactile user experiences. The goal is pragmatic design-to-code guidance that scales across products and agentic environments.

How this skill works

The skill inspects interface structure and recommends modular Bento Grid layouts, tactile visual treatments, and adaptive component behaviors. It evaluates accessibility (WCAG 2.2 AA), performance targets (fluid UX at ~120fps), and anti-patterns, then outputs concrete design specs, tokens, and component swap rules. It also provides protocols for AI-driven theme adaptation and intent-based reordering to respond to user signals.

When to use it

  • Designing or refactoring large component libraries and design systems
  • Building responsive dashboards, admin tools, or multi-panel apps
  • Implementing tactile visual languages (neumorphism/glassmorphism) with performance constraints
  • Adding AI-adaptive behaviors that change layout or components by user intent
  • Auditing accessibility and performance for modern 2026 UI standards

Best practices

  • Make components modular by default—each lives in a discrete Bento Grid cell
  • Prioritize AX-first patterns: keyboard focus, semantic markup, and readable token names
  • Use exaggerated rounding (24px+) for cards and consistent gap systems for rhythm
  • Favor subtle, low-contrast tactile effects; avoid heavy drop shadows that harm contrast
  • Target fluid interactions (150–300ms transitions, sustained 120fps where possible)
  • Implement intent-based reordering rather than static dashboards to reduce noise

Example use cases

  • Rebuilding a legacy admin UI into a 12-column Bento Grid with intelligent collapse rules
  • Creating a product card system that uses Neumorphism v2 for tactile affordance and Glassmorphism v3 for overlays
  • Adding AI-adaptive themes that shift color tone and component density based on session sentiment
  • Designing accessible, high-performance mobile web flows that hit WCAG 2.2 AA and maintain 60–120fps
  • Authoring a design-to-code protocol that outputs tokens, CSS utility rules, and component swap instructions

FAQ

Does this approach work on low-powered devices?

Yes—designs are optimized for performance; tactile effects are muted and GPU-friendly, and fallbacks are defined for limited-capability devices.

How do AI-Adaptive Interfaces protect privacy?

Adaptive behaviors rely on ephemeral session signals and configurable heuristics; all data-handling should follow product privacy policies and opt-in controls.