| name | ui-ux-pro-max |
| description | Front-end UI/UX design intelligence for creating, reviewing, and hardening polished product interfaces across web, mobile, dashboards, SaaS, ecommerce, and content-heavy apps. |
| zh_description | 用于UI、UX、pro、max，支持产品研究、策略、界面和交付协作。 |
| version | 1.0.0 |
| author | seaworld008 |
| source | in-house |
| source_url | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-ux-pro-max/SKILL.md |
| license | MIT |
| tags | [ui, ux, design-system, frontend, accessibility, typography, color, responsive-design] |
| created_at | 2026-06-03 |
| updated_at | 2026-06-03 |
| quality | 4 |
| complexity | advanced |
UI/UX Pro Max
Use this skill when an agent must make front-end work look intentional, usable, accessible, and appropriate for the product domain. It is a design intelligence layer for turning vague UI requests into concrete design decisions, implementation constraints, and review gates.
The skill is inspired by the public ui-ux-pro-max workflow, but this repository version is self-contained: it does not require a bundled database, CLI, or hidden scripts. Use it as a rigorous design reasoning system that pairs well with React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, and plain HTML/CSS.
When to Use
- Creating a new page, flow, dashboard, admin panel, landing page, app screen, or design system.
- Improving an interface that feels generic, unbalanced, cramped, overdecorated, or hard to scan.
- Choosing color systems, typography, spacing, layout density, chart treatment, or component states.
- Refactoring UI code where the visual result matters as much as the code structure.
- Auditing accessibility, responsive behavior, visual hierarchy, form feedback, or interaction quality.
- Translating a product domain into an interface personality, such as fintech, healthcare, education, developer tools, marketplaces, media, or internal operations.
- Building with component systems such as shadcn/ui, Radix, Chakra, MUI, Ant Design, Headless UI, or native platform controls.
- Reviewing whether AI-generated UI output has fallen into common patterns such as giant hero sections, repetitive cards, low contrast gray text, random gradients, or decorative motion.
Skip When
- The task is pure backend logic, infrastructure, data modeling, or batch scripting.
- The user explicitly asks for no design changes.
- The requested change is a tiny copy edit that cannot affect layout, affordance, or accessibility.
- A formal design file is provided and the task is only to implement it exactly. In that case, use the design file as the source of truth, then use this skill only for accessibility and implementation checks.
Core Capabilities
- Convert product intent into a design brief: audience, domain, device mix, density, tone, primary jobs, and risk areas.
- Select an appropriate visual direction without defaulting to a one-note palette or generic SaaS layout.
- Define a practical token set for color, type, spacing, radius, shadows, motion, and state layers.
- Design screens around task success: information hierarchy, progressive disclosure, clear calls to action, and predictable navigation.
- Check accessibility early: contrast, labels, keyboard behavior, focus states, reduced motion, and screen-reader semantics.
