ui-ux-pro-max

name	ui-ux-pro-max
description	Advanced UI/UX design intelligence for creating exceptional, production-grade interfaces. Use when designing or reviewing user interfaces, user experiences, design systems, or when you need expert-level guidance on layout, visual design, interaction design, accessibility, and design quality. Covers design principles, component design, design systems, and UI styling.
license	MIT
metadata	{"author":"nextlevelbuilder","version":"1.0.0"}

UI/UX Pro Max

Advanced UI/UX design intelligence to create exceptional, production-grade interfaces that stand out.

When to Use This Skill

Apply when:

• Designing new user interfaces or user experiences
• Reviewing and improving existing UI/UX
• Building design systems or component libraries
• Making high-stakes design decisions
• Creating interfaces that need to be both beautiful and functional

Core Design Intelligence

1. Design Principles

• Clarity over cleverness — users should understand the interface instantly
• Consistency — similar elements behave and look the same
• Feedback — every action has a visible response
• Affordance — elements look like what they do
• Progressive disclosure — show what's needed, reveal more on demand

2. Visual Design

• Establish strong visual hierarchy through scale, weight, and color
• Use a cohesive, intentional color palette
• Apply consistent spacing and alignment
• Design with a clear focal point per screen
• Use typography as a design element, not just content

3. Layout & Composition

• Use grids for structure and rhythm
• Balance content with whitespace
• Group related elements; separate unrelated ones
• Consider the "F-pattern" and "Z-pattern" reading flows
• Design responsive layouts that adapt gracefully

4. Interaction Design

• Design clear states: default, hover, active, focus, disabled, loading, error
• Use motion to communicate, not decorate
• Ensure touch targets are large enough (44px minimum)
• Provide clear navigation paths
• Design for both novice and expert users

5. Accessibility

• Meet WCAG 2.1 AA standards
• Ensure keyboard navigability
• Provide sufficient color contrast
• Support screen readers with proper semantics
• Don't rely on color alone to convey meaning

6. Design Quality Checklist

• Is the hierarchy clear at a glance?
• Is the spacing consistent and intentional?
• Are colors used with purpose?
• Is the typography readable and distinctive?
• Are all states designed?
• Does it work on all screen sizes?
• Is it accessible?
• Does it avoid the generic "template" look?

Design System Thinking

• Define design tokens (color, spacing, typography, radius, shadow)
• Build reusable components from tokens
• Document component variants and states
• Ensure consistency across the system
• Design for scalability and maintenance

Related Skills

• brand — brand identity and guidelines
• design — general design guidance
• design-system — building design systems
• ui-styling — UI styling techniques
• slides — presentation design

Resources

• UI/UX Pro Max — source repository