ui-ux-pro-max · diff
git:20260605.a09e45c to git:20260610.1fb8a11
14 added, 382 removed. Audit A to A.
---
name: ui-ux-pro-max
description: "Use when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work. Covers product patterns, landing pages, chart choices, visual styles, palettes, typography, UX rules, and 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
---
- # UI/UX Pro Max - Design Intelligence
-
- Comprehensive design guide for web and mobile applications. Contains compact reference tables for product patterns, visual styles, color palettes, typography, UX rules, chart choices, and technology stacks.
-
- ## When to Apply
-
- Reference these guidelines when:
- - Designing new UI components or pages
- - Choosing color palettes and typography
- - Reviewing code for UX issues
- - Building landing pages or dashboards
- - Implementing accessibility requirements
-
- ## Rule Categories by Priority
-
- | Priority | Category | Impact | Domain |
- |----------|----------|--------|--------|
- | 1 | Accessibility | CRITICAL | `ux` |
- | 2 | Touch & Interaction | CRITICAL | `ux` |
- | 3 | Performance | HIGH | `ux` |
- | 4 | Layout & Responsive | HIGH | `ux` |
- | 5 | Typography & Color | MEDIUM | `typography`, `color` |
- | 6 | Animation | MEDIUM | `ux` |
- | 7 | Style Selection | MEDIUM | `style`, `product` |
- | 8 | Charts & Data | LOW | `chart` |
-
- ## Quick Reference
-
- ### 1. Accessibility (CRITICAL)
-
- - `color-contrast` - Minimum 4.5:1 ratio for normal text
- - `focus-states` - Visible focus rings on interactive elements
- - `alt-text` - Descriptive alt text for meaningful images
- - `aria-labels` - aria-label for icon-only buttons
- - `keyboard-nav` - Tab order matches visual order
- - `form-labels` - Use label with for attribute
-
- ### 2. Touch & Interaction (CRITICAL)
-
- - `touch-target-size` - Minimum 44x44px touch targets
- - `hover-vs-tap` - Use click/tap for primary interactions
- - `loading-buttons` - Disable button during async operations
- - `error-feedback` - Clear error messages near problem
- - `cursor-pointer` - Add cursor-pointer to clickable elements
-
- ### 3. Performance (HIGH)
-
- - `image-optimization` - Use WebP, srcset, lazy loading
- - `reduced-motion` - Check prefers-reduced-motion
- - `content-jumping` - Reserve space for async content
-
- ### 4. Layout & Responsive (HIGH)
-
- - `viewport-meta` - width=device-width initial-scale=1
- - `readable-font-size` - Minimum 16px body text on mobile
- - `horizontal-scroll` - Ensure content fits viewport width
- - `z-index-management` - Define z-index scale (10, 20, 30, 50)
-
- ### 5. Typography & Color (MEDIUM)
-
- - `line-height` - Use 1.5-1.75 for body text
- - `line-length` - Limit to 65-75 characters per line
- - `font-pairing` - Match heading/body font personalities
-
- ### 6. Animation (MEDIUM)
-
- - `duration-timing` - Use 150-300ms for micro-interactions
- - `transform-performance` - Use transform/opacity, not width/height
- - `loading-states` - Skeleton screens or spinners
-
- ### 7. Style Selection (MEDIUM)
-
- - `style-match` - Match style to product type
- - `consistency` - Use same style across all pages
- - `no-emoji-icons` - Use SVG icons, not emojis
-
- ### 8. Charts & Data (LOW)
-
- - `chart-type` - Match chart type to data type
- - `color-guidance` - Use accessible color palettes
- - `data-table` - Provide table alternative for accessibility
-
- ## How to Use
-
- Use the rules and reference tables below directly.
-
- ---
-
- ## How to Use This Skill
-
- When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
-
- ### Step 1: Analyze User Requirements
-
- Extract key information from user request:
- - **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- - **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
- - **Industry**: healthcare, fintech, gaming, education, etc.
- - **Stack**: React, Vue, Next.js, or default to `html-tailwind`
-
- ### Step 2: Generate Design System (REQUIRED)
-
- Always start by synthesizing a compact design system from the rules in this
- `SKILL.md`. Use the user's product type, industry, stack, and style keywords to
- choose:
-
- 1. Product pattern and layout structure
- 2. Visual style and anti-patterns to avoid
- 3. Color palette direction and contrast rules
- 4. Typography direction
- 5. Motion, accessibility, and interaction checks
-
- ### Step 2b: Persist Design System (Master + Overrides Pattern)
-
- When the work spans multiple pages or sessions, create a persistent design
- system:
-
- This creates:
- - `design-system/MASTER.md` — Global Source of Truth with all design rules
- - `design-system/pages/` — Folder for page-specific overrides
-
- For a page-specific override, create `design-system/pages/<page-name>.md` with
- only the page-specific deviations from `MASTER.md`.
-
- **How hierarchical retrieval works:**
- 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
- 2. If the page file exists, its rules **override** the Master file
- 3. 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 Relevant Sections (as needed)
-
- After getting the design system, consult the relevant sections below for extra
- detail:
-
- | Need | Domain | Use These Keywords |
- |------|--------|--------------------|
- | More style options | `style` | glassmorphism, minimalism, dark, brutalism, bento |
- | Chart recommendations | `chart` | trend, comparison, real-time, funnel, distribution |
- | UX best practices | `ux` | animation, accessibility, z-index, loading, keyboard |
- | Alternative fonts | `typography` | elegant, luxury, playful, professional, data-dense |
- | Landing structure | `landing` | hero, social proof, pricing, FAQ, conversion |
-
- ### Step 4: Stack Guidelines (Default: html-tailwind)
-
- Use implementation-specific best practices. If user doesn't specify a stack,
- **default to `html-tailwind`**.
-
- Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
-
- ---
-
- ## Reference Index
-
- ### Available Domains
-
- | Domain | Use For | Example Keywords |
- |--------|---------|------------------|
- | `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
- | `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
- | `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
- | `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
- | `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
- | `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
- | `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
-
- ### Available Stacks
-
- | Stack | Focus |
- |-------|-------|
- | `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
- | `react` | State, hooks, performance, patterns |
- | `nextjs` | SSR, routing, images, API routes |
- | `vue` | Composition API, Pinia, Vue Router |
- | `svelte` | Runes, stores, SvelteKit |
- | `swiftui` | Views, State, Navigation, Animation |
- | `react-native` | Components, Navigation, Lists |
- | `flutter` | Widgets, State, Layout, Theming |
- | `shadcn` | shadcn/ui components, theming, forms, patterns |
- | `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
-
- ---
-
- ## Decision Reference
-
- ### Product Patterns
-
- | Product Type | Layout Pattern | Visual Direction | Avoid |
- |--------------|----------------|------------------|-------|
- | SaaS / B2B | Sidebar or top nav, dense tables, filters, status summaries | Quiet surfaces, strong hierarchy, restrained accent color | Oversized marketing hero inside work screens |
- | Dashboard / Admin | KPI row, searchable tables, charts, audit trail, empty states | Compact spacing, stable grid, readable numeric typography | Decorative cards that hide operational data |
- | E-commerce | Product grid, filters, cart summary, trust markers, reviews | Product imagery first, clear price/CTA hierarchy | Low-contrast price or checkout controls |
- | Beauty / Wellness | Service sections, booking CTA, testimonials, before/after imagery | Soft neutral base, botanical/rose/gold accent, elegant type | Thin low-contrast text and generic spa stock feel |
- | Healthcare | Appointment flow, provider info, insurance/payment clarity | Calm blue/green palette, high contrast, plain labels | Playful styling that reduces trust |
- | Portfolio / Agency | Case-study grid, project detail pages, proof and process | Strong type scale, real work imagery, focused accent | Abstract decoration without project evidence |
- | Landing Page | Brand/product signal, primary CTA, proof, pricing or FAQ | First viewport shows offer and next section hint | Hero-only page with no visible proof path |
-
- ### Style, Color, And Typography
-
- | Direction | Use | Color Guidance | Typography |
- |-----------|-----|----------------|------------|
- | Professional / Minimal | SaaS, finance, productivity | Neutral base plus blue, teal, or green accent | Inter, IBM Plex Sans, system UI |
- | Elegant / Editorial | Luxury, wellness, portfolio | Warm neutral, charcoal, muted rose, gold, or botanical green | Playfair Display + Inter, Source Serif + Inter |
- | Playful | Consumer apps, education, creator tools | Bright accent with generous white space; keep contrast AA | Nunito, Satoshi, system rounded |
- | Dark Mode | Developer tools, media, dashboards | Near-black background, elevated surfaces, saturated accent | Inter or IBM Plex Sans; avoid thin weights |
- | Glass / Bento | AI tools, premium marketing, dashboards | Translucent surfaces over stable solid backgrounds | Modern sans with tight hierarchy |
- | Brutalist | Creative portfolios, launches | High-contrast monochrome plus one sharp accent | Archivo, Space Grotesk, Inter |
-
- ### Design System Source Rows
-
- | Product / Industry | Structure | Palette | Type / Density | Interaction Notes |
- |--------------------|-----------|---------|----------------|-------------------|
- | Healthcare | Appointment, provider, insurance, results, and support flows | Blue/green, white, high-contrast neutrals | Clear sans, generous line-height, plain labels | Prioritize trust, readable errors, and visible privacy cues |
- | Fintech | Account summary, transaction list, alerts, controls, audit trail | Deep neutral, blue/teal/green accent, semantic risk colors | Tabular numbers, compact labels, strong hierarchy | Avoid ambiguous money actions; confirm destructive transfers |
- | Beauty / Wellness | Services, booking, proof, before/after, testimonials | Soft neutral with rose, gold, botanical green, or charcoal | Elegant display font plus readable sans | Keep CTAs obvious; do not let decorative type reduce contrast |
- | Developer / AI Tool | Workspace, prompt/input, result panel, history, settings | Near-black or neutral light base with cyan/blue/green accent | Dense sans, monospace for code/data | Preserve keyboard flow, loading states, and copy/download actions |
- | E-commerce | Product grid, filters, PDP, cart, checkout, trust markers | Product-led neutral with one CTA accent | Readable price, variant, and stock labels | Make cart and checkout states stable across breakpoints |
- | Education / Creator | Lesson/content, progress, practice, feedback, community | Friendly accent, calm background, success/progress colors | Rounded sans, moderate density | Use clear progress and avoid hiding next actions |
-
- ### Landing Structure
-
- | Cue | Section Order | CTA Strategy | Proof |
- |-----|---------------|--------------|-------|
- | Hero / offer | Brand or offer, value copy, primary CTA, next-section hint | One primary CTA; secondary only if it clarifies | Customer/logo row or concrete outcome near first viewport |
- | Social proof | Hero, proof band, feature evidence, testimonial, CTA | Repeat CTA after proof | Logos, review snippets, usage metrics, case-study links |
- | Pricing | Hero, value proof, plan comparison, FAQ, CTA | Keep plan CTA labels specific | Feature comparison, guarantee, support details |
- | FAQ / conversion | Hero, objections, FAQ, final CTA | Match CTA to funnel stage | Risk reversal, security/compliance, support promise |
- | Product launch | Product visual, benefits, demo, waitlist, proof | One signup/join action | Demo stills, roadmap, early-user quotes |
-
- ### Chart Choices
-
- | Data Need | Use | Avoid | Notes |
- |-----------|-----|-------|-------|
- | Trend over time | Line or area chart | Pie chart | Show range, units, and empty/no-data state |
- | Comparison | Bar chart | 3D chart | Sort by value unless chronology matters |
- | Real-time metric | KPI + sparkline | Dense multi-series line | Include stale/loading indicators |
- | Funnel | Funnel or stepped bar | Pie chart | Label conversion at each stage |
- | Distribution | Histogram or box plot | Single KPI | Show sample size and outliers |
- | Timeline | Timeline or Gantt | Table-only view | Pair with filters for long histories |
- | Part-to-whole | Stacked bar or donut | Many-slice pie | Use only when categories are few and stable |
-
- ### HTML + Tailwind Guidance
-
- | Area | Guidance |
- |------|----------|
- | Layout | Start mobile-first, use semantic landmarks, constrain content with `max-w-*`, and reserve dimensions for repeated cards, grids, and media. |
- | Responsive | Prefer `grid-cols-1 md:grid-cols-*` and stable `min-h`/`aspect-*`; check 360px, 768px, and desktop widths. |
- | Forms | Pair every input with a label, keep error text adjacent, use `aria-describedby`, and make submit/loading states explicit. |
- | Components | Use Lucide/Heroicons for buttons, avoid card-in-card layouts, and keep hover/focus states from moving layout. |
- | Assets | Use real product/place/person imagery when the user needs inspection; avoid purely atmospheric placeholders. |
-
- ### Stack Guidance
-
- | Stack | Apply |
- |-------|-------|
- | `html-tailwind` | Use semantic HTML, mobile-first Tailwind breakpoints, constrained containers, fixed dimensions for toolbars/cards/grids, visible focus states, 44px touch targets, and static-friendly markup. Keep scripts small and avoid framework-only patterns. |
- | `react` | Split stateful components by workflow, keep controlled forms explicit, memoize only proven hot paths, and preserve accessible labels for icon buttons. |
- | `nextjs` | Use framework image/link primitives where available, keep server/client boundaries explicit, and avoid putting interactive-only code in server components. |
- | `vue` / `svelte` | Keep reactive state local until shared state is truly needed; preserve semantic HTML and predictable transitions. |
- | `shadcn` | Use tokens and component variants consistently; do not stack cards inside cards or override primitives ad hoc. |
- | `swiftui` | Compose small `View`s, keep `@State` local, use `NavigationStack`, respect safe areas, and prefer system controls before custom gestures. |
- | `react-native` | Use platform components, `FlatList` for long lists, navigation-safe screens, explicit loading/error states, and 44px minimum touch targets. |
- | `flutter` | Use Material/Cupertino widgets deliberately, keep state ownership clear, rely on constraints for layout, and centralize theme tokens. |
- | `jetpack-compose` | Hoist state, keep composables pure, use stable keys in lazy lists, avoid unnecessary recomposition, and respect Material touch targets. |
-
- ---
-
- ## Example Workflow
-
- **User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
-
- ### Step 1: Analyze Requirements
- - Product type: Beauty/Spa service
- - Style keywords: elegant, professional, soft
- - Industry: Beauty/Wellness
- - Stack: html-tailwind (default)
-
- ### Step 2: Generate Design System (REQUIRED)
-
- Create a compact design system for "Serenity Spa" with pattern, style, colors,
- typography, effects, and anti-patterns.
-
- ### Step 3: Supplement with Relevant Sections (as needed)
-
- Use the UX, product, style, color, and typography tables when animation,
- accessibility, font direction, or page structure needs more detail.
-
- ### Step 4: Stack Guidelines
-
- Apply the `html-tailwind` stack guidelines for layout, responsive behavior, and
- forms.
-
- **Then:** Synthesize the design system, relevant sections, and stack guidance before implementing the design.
-
- ---
-
- ## Tips for Better Results
-
- 1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
- 2. **Check multiple reference rows** - Product, industry, and style rows often combine
- 3. **Combine domains** - Style + Typography + Color = Complete design system
- 4. **Always check UX** - Use "animation", "z-index", and "accessibility" as cues for common issues
- 5. **Use the stack section** - Apply implementation-specific best practices
- 6. **Iterate** - If the first reference row doesn't match, try adjacent keywords
-
- ---
-
- ## Common Rules for Professional UI
-
- These are frequently overlooked issues that make UI look unprofessional:
-
- ### Icons & Visual Elements
-
- | Rule | Do | Don't |
- |------|----|----- |
- | **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
- | **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
- | **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
- | **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
-
- ### Interaction & Cursor
-
- | Rule | Do | Don't |
- |------|----|----- |
- | **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
- | **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
- | **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
-
- ### Light/Dark Mode Contrast
-
- | Rule | Do | Don't |
- |------|----|----- |
- | **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
- | **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
- | **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
- | **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
-
- ### Layout & Spacing
-
- | Rule | Do | Don't |
- |------|----|----- |
- | **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
- | **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
- | **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
-
- ---
+ # UI/UX Pro Max
- ## Pre-Delivery Checklist
+ Use this skill for high-rigor UI/UX design guidance, design-system generation, stack-specific implementation hints, and pre-delivery review.
- Before delivering UI code, verify these items:
+ ## Routing
- ### Visual Quality
- - [ ] No emojis used as icons (use SVG instead)
- - [ ] All icons from consistent icon set (Heroicons/Lucide)
- - [ ] Brand logos are correct (verified from Simple Icons)
- - [ ] Hover states don't cause layout shift
- - [ ] Use theme colors directly (bg-primary) not var() wrapper
+ - Start here to confirm scope, safety boundaries, and the minimum workflow.
+ - Load `references/full-guide.md` before executing detailed commands, applying templates, or relying on examples from this skill.
+ - Keep the work limited to the user-requested target; do not add adjacent improvements unless the user asks.
- ### Interaction
- - [ ] All clickable elements have `cursor-pointer`
- - [ ] Hover states provide clear visual feedback
- - [ ] Transitions are smooth (150-300ms)
- - [ ] Focus states visible for keyboard navigation
+ ## Quick Workflow
- ### Light/Dark Mode
- - [ ] Light mode text has sufficient contrast (4.5:1 minimum)
- - [ ] Glass/transparent elements visible in light mode
- - [ ] Borders visible in both modes
- - [ ] Test both modes before delivery
+ 1. Confirm the target, available context, constraints, and done-when signal.
+ 2. Read the relevant section of `references/full-guide.md` for task-specific details.
+ 3. Execute the smallest reversible action that satisfies the request.
+ 4. Verify accessibility, responsiveness, interaction states, visual hierarchy, and the concrete design-system artifacts requested by the user.
+ 5. Report changed files, commands run, evidence collected, and any remaining risk.
- ### Layout
- - [ ] Floating elements have proper spacing from edges
- - [ ] No content hidden behind fixed navbars
- - [ ] Responsive at 375px, 768px, 1024px, 1440px
- - [ ] No horizontal scroll on mobile
+ ## References
- ### Accessibility
- - [ ] All images have alt text
- - [ ] Form inputs have labels
- - [ ] Color is not the only indicator
- - [ ] `prefers-reduced-motion` respected
+ - `references/full-guide.md` - complete command patterns, examples, checklists, and edge cases.