YuniorGlez

ui-ux-pro

3
3
# Install this skill:
npx skills add YuniorGlez/gemini-elite-core --skill "ui-ux-pro"

Install specific skill from multi-skill repository

# Description

Senior UI/UX Architect & Design Systems Specialist. Expert in Bento Grid, Neumorphism v2, Glassmorphism v3, and AI-Adaptive Layouts for 2026.

# SKILL.md


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
  2. The "Do Not" List (Anti-Patterns)
  3. Modern Layout Patterns (Bento Grid)
  4. Tactile Visual Styles (Neumorphism & Glassmorphism)
  5. AI-Adaptive Interfaces
  6. Design-to-Code Protocol
  7. 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 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:


Updated: January 22, 2026 - 20:00

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.