ui-ux-pro-max

UI/UX Pro Max — Intelligent Interface Design Assistant

Skill Overview

UI/UX Pro Max is a professional intelligent interface design assistant. It offers 50+ design styles, 21 color schemes, 50 font pairings, and 20 chart types. Supporting 9 major technology stacks, it helps developers quickly build beautiful, usable, and responsive user interfaces.

Use Cases

1. Rapid Prototyping and Landing Page Development

When you need to design a landing page for a new product or quickly build a prototype, UI/UX Pro Max can intelligently recommend matching design styles, color schemes, and page structure based on the product type (SaaS, e-commerce, portfolio, etc.), avoiding trial-and-error from scratch.

2. UI Code Review and Optimization

When you need to check the accessibility, responsive layout, or interaction experience of existing UI code, this skill provides a systematic review checklist covering key metrics such as touch target size, color contrast, and focus states—helping you quickly find and fix common issues.

3. Selecting Components Across Multiple Tech Stacks

When you develop with React, Vue, Next.js, Svelte, SwiftUI, React Native, Flutter, or Tailwind CSS, this skill provides design guidelines and best practices for specific technology stacks, and integrates shadcn/ui component search.

Core Features

1. Intelligent Design System Generation

Enter the product type and industry keywords, and it automatically generates a complete design system, including compatible design styles, primary color scheme suggestions, typography pairing recommendations, interface effects, and anti-patterns to avoid. It supports multiple styles such as glassmorphism, neo-morphism, minimalism, brutalism, and “bento box” layouts.

2. Design Guidelines and Best Practices

Provides UX design guidelines categorized by priority, covering areas such as accessibility (CRITICAL), touch and interaction (CRITICAL), performance (HIGH), layout and responsiveness (HIGH), typography and color (MEDIUM), and animation (MEDIUM). Each rule includes clear implementation recommendations.

3. Component and Resource Search

Integrates shadcn/ui MCP to support component search and example viewing. Provides design guidelines and implementation references for common UI elements such as buttons, modals, navbars, sidebars, cards, tables, forms, and charts.

Frequently Asked Questions

What tech stacks does UI/UX Pro Max support?

This skill supports 9 major tech stacks: React, Next.js, Vue, Svelte, SwiftUI (iOS), React Native (cross-platform mobile), Flutter, Tailwind CSS, and the shadcn/ui component library. If you don’t specify a tech stack, it defaults to HTML + Tailwind CSS.

How do I generate a glassmorphism-style interface design?

Run:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "product type industry keywords" --design-system
For example:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness elegant" --design-system -p "Serenity Spa".

Are there special considerations for mobile UI design?

Mobile design requires special attention to: minimum touch target size of 44×44px, body text no smaller than 16px, avoiding horizontal scrolling, using prefers-reduced-motion to reduce animations, reserving space for asynchronous content to prevent content jumping, and optimizing performance by using WebP images with lazy loading.