UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
Installation
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
UI/UX Pro Max - Design Intelligence
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
When to Apply
This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
Must Use
This Skill must be invoked in the following situations:
Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
Building design systems or reusable component libraries
Skip
This Skill is not needed in the following situations:
Pure backend logic development
Only involving API or database design
Performance optimization unrelated to the interface
Infrastructure or DevOps work
Non-visual scripts or automation tasks
Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.
Mandatory Pre-Design Specification
Complete this before writing any code. Output as a specification block at the top of your response. Do not skip — this is what separates intentional design from generic AI output.
DESIGN SPEC
───────────────────────────────────────────
Purpose: [2–3 sentences: problem / users / context]
Aesthetic: [ONE direction from the approved list below]
Color palette: [3–5 hex codes with roles: bg / surface / text / accent / signal]
Typography: [Exact font names: heading font + body font]
Layout strategy: [asymmetric / diagonal / overlapping / grid-breaking / content-dense / generous-negative-space]
───────────────────────────────────────────
Approved Aesthetic Directions
Choose ONE. Mixed aesthetics without a clear point-of-view produce generic results.
Direction
Character
Best for
Brutally minimal
Maximum reduction, only what's necessary, stark white space
Never use these words without a specific style direction attached. They describe nothing and produce nothing:
"Modern" — every era thought it was modern. Say what kind.
"Clean" — clean is a side-effect of restraint, not a style goal.
"Simple" — simplicity is an outcome, not a direction.
"Professional" — generic default that means no decision was made.
If a brief says "make it look modern and clean" — push back and pick an actual aesthetic direction from the list above.
Rule Categories by Priority
For human/AI reference: follow priority 1→10 to decide which rule category to focus on first; use --domain <Domain> to query details when needed. Scripts do not read this table.
Priority
Category
Impact
Domain
Key Checks (Must Have)
Anti-Patterns (Avoid)
1
Accessibility
CRITICAL
ux
Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels
Removing focus rings, Icon-only buttons without labels
2
Touch & Interaction
CRITICAL
ux
Min size 44×44px, 8px+ spacing, Loading feedback
Reliance on hover only, Instant state changes (0ms)
3
Performance
HIGH
ux
WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1)
Layout thrashing, Cumulative Layout Shift
4
Style Selection
HIGH
style, product
Match product type, Consistency, SVG icons (no emoji)
Mixing flat & skeuomorphic randomly, Emoji as icons
5
Layout & Responsive
HIGH
ux
Mobile-first breakpoints, Viewport meta, No horizontal scroll
state-clarity - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
elevation-consistent - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
dark-mode-pairing - Design light/dark variants together to keep brand, contrast, and style consistent
icon-style-consistent - Use one icon set/visual language (stroke width, corner radius) across the product
system-controls - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
blur-purpose - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
primary-action - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)
avoid-generic-fonts - Never default to Inter, Roboto, Arial, Helvetica, or system-ui without a deliberate reason; these signal no font decision was made — choose a typeface that matches the aesthetic direction
avoid-generic-layouts - Never default to centered-stack + card + drop-shadow layout without creative intent; introduce asymmetry, diagonal flow, overlapping elements, or deliberate grid-breaking to create visual identity
avoid-even-color-distribution - A single dominant color + one sharp accent outperforms an even distribution of 4–5 equal colors; one color should clearly own the space
contrast-readability - Darker text on light backgrounds (e.g. slate-900 on white)
text-styles-system - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
weight-hierarchy - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
color-semantic - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
color-dark-mode - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
color-accessible-pairs - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
color-not-decorative-only - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
truncation-strategy - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
letter-spacing - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
number-tabular - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
whitespace-balance - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)
background-depth - Avoid flat solid color backgrounds; add depth through gradient meshes, noise textures, subtle geometric patterns, layered transparencies, or grain overlays — atmosphere is what separates memorable UI from forgettable UI
dominant-accent-over-even - Use one dominant surface color + one sharp accent rather than distributing 4–5 colors equally; the accent should appear sparingly so it retains visual weight
7. Animation (MEDIUM)
duration-timing - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
transform-performance - Use transform/opacity only; avoid animating width/height/top/left
loading-states - Show skeleton or progress indicator when loading exceeds 300ms
excessive-motion - Animate 1-2 key elements per view max
easing - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
motion-meaning - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
state-transition - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
layout-shift-avoid - Animations must not cause layout reflow or CLS; use transform for position changes
high-impact-over-scattered - One well-orchestrated entrance animation (page load, hero reveal, screen transition) creates more delight than many scattered micro-interactions; prioritize key moments over decorating everything
scroll-and-hover-states - Use scroll-triggered reveals and hover/press states as primary animation triggers; both are high-signal moments that reward user action
8. Forms & Feedback (MEDIUM)
input-labels - Visible label per input (not placeholder-only)
error-placement - Show error below the related field
submit-feedback - Loading then success/error state on submit
required-indicators - Mark required fields (e.g. asterisk)
empty-states - Helpful message and action when no content
toast-dismiss - Auto-dismiss toasts in 3-5s
confirmation-dialogs - Confirm before destructive actions
input-helper-text - Provide persistent helper text below complex inputs, not just placeholder (Material Design)
disabled-states - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
design-system/pages/dashboard.md — Page-specific deviations from Master
How hierarchical retrieval works:
When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively
Context-aware retrieval prompt:
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:
Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Step 3: Supplement with Detailed Searches (as needed)
# Get style options for a modern tool product
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
# Get UX best practices for search interaction and loading
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
Confirm all touch targets ≥44pt and no content hidden behind safe areas
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.
Icons & Visual Elements
Rule
Standard
Avoid
Why It Matters
No Emoji as Structural Icons
Use vector-based icons (e.g., Lucide, react-native-vector-icons, @expo/vector-icons).
Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls.
Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens.
Vector-Only Assets
Use SVG or platform vector icons that scale cleanly and support theming.
Raster PNG icons that blur or pixelate.
Ensures scalability, crisp rendering, and dark/light mode adaptability.
Stable Interaction States
Use color, opacity, or elevation transitions for press states without changing layout bounds.
Layout-shifting transforms that move surrounding content or trigger visual jitter.
Prevents unstable interactions and preserves smooth motion/perceived quality on mobile.
Correct Brand Logos
Use official brand assets and follow their usage guidelines (spacing, color, clear space).
Guessing logo paths, recoloring unofficially, or modifying proportions.
Prevents brand misuse and ensures legal/platform compliance.
