UI/UX Pro Max - Design Intelligence

Quick Summary

Goal: Provide searchable UI/​UX design intelligence -- 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks.

Workflow:

1. Analyze — Extract product type, style keywords, industry, and stack from user request
2. Search — Query search.py across domains: product, style, typography, color, landing, chart, UX
3. Stack Guidelines — Get stack-specific best practices (default: html-tailwind)
4. Implement — Synthesize search results into cohesive design and code

Key Rules:

• No emojis as UI icons (use SVG: Heroicons, Lucide, Simple Icons)
• All clickable elements need cursor-pointer and hover feedback
• Light mode text must have 4.5:1 minimum contrast ratio
• Test both light/​dark modes and responsive breakpoints before delivery

Pre-read (project design system): When the project has a design system, load designSystem.canonicalDoc + tokenFiles from docs/​project-config.json and prefer project tokens/​components over the generic style intelligence database.

Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).

UI/​UX Pro Max - Design Intelligence

Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/​Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

---

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: Search Relevant Domains

Use search.py multiple times to gather comprehensive information. Search until you have enough context.

python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "<keyword>" --domain <domain> [-n <max_results>]

Recommended search order:

1. Product - Get style recommendations for product type
2. Style - Get detailed style guide (colors, effects, frameworks)
3. Typography - Get font pairings with Google Fonts imports
4. Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
5. Landing - Get page structure (if landing page)
6. Chart - Get chart recommendations (if dashboard/​analytics)
7. UX - Get best practices and anti-patterns
8. Stack - Get stack-specific guidelines (default: html-tailwind)

Step 3: Stack Guidelines (Default: html-tailwind)

If user doesn't specify a stack, default to html-tailwind.

python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter

---

Search Reference

Available Domains

Available Stacks

---

Example Workflow

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

AI should:

# 1. Search product type
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "animation" --domain ux
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python3 .claude/​skills/​ui-ux-pro-max/​scripts/​search.py "layout responsive" --stack html-tailwind

Then: Synthesize all search results and implement the design.

---

Tips for Better Results

1. Be specific with keywords - "healthcare SaaS dashboard" > "app"
2. Search multiple times - Different keywords reveal different insights
3. Combine domains - Style + Typography + Color = Complete design system
4. Always check UX - Search "animation", "z-index", "accessibility" for common issues
5. Use stack flag - Get implementation-specific best practices
6. Iterate - If first search doesn't match, try different keywords

---

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Interaction & Cursor

Light/​Dark Mode Contrast

Layout & Spacing

---

Pre-Delivery Checklist

Before delivering UI code, verify these items:

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

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation

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

Layout

• Floating elements have proper spacing from edges
• No content hidden behind fixed navbars
• Responsive at 320px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

Related

• frontend-design
• interface-design — Product UIs (dashboards, admin panels, SaaS apps)
• shadcn-tailwind
• design-spec

---

[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ATTENTION ask user whether to skip.

<!-- SYNC:ai-mistake-prevention -->

AI Mistake Prevention — Failure modes to avoid on every task:

Check downstream references before deleting. Deleting components causes documentation and code staleness cascades. Map all referencing files before removal. Verify AI-generated content against actual code. AI hallucinates APIs, class names, and method signatures. Always grep to confirm existence before documenting or referencing. Trace full dependency chain after edits. Changing a definition misses downstream variables and consumers derived from it. Always trace the full chain. Trace ALL code paths when verifying correctness. Confirming code exists is not confirming it executes. Always trace early exits, error branches, and conditional skips — not just happy path. When debugging, ask "whose responsibility?" before fixing. Trace whether bug is in caller (wrong data) or callee (wrong handling). Fix at responsible layer — never patch symptom site. Assume existing values are intentional — ask WHY before changing. Before changing any constant, limit, flag, or pattern: read comments, check git blame, examine surrounding code. Verify ALL affected outputs, not just the first. Changes touching multiple stacks require verifying EVERY output. One green check is not all green checks. Holistic-first debugging — resist nearest-attention trap. When investigating any failure, list EVERY precondition first (config, env vars, DB names, endpoints, DI registrations, data preconditions), then verify each against evidence before forming any code-layer hypothesis. Surgical changes — apply the diff test. Bug fix: every changed line must trace directly to the bug. Don't restyle or improve adjacent code. Enhancement task: implement improvements AND announce them explicitly. Surface ambiguity before coding — don't pick silently. If request has multiple interpretations, present each with effort estimate and ask. Never assume all-records, file-based, or more complex path. Keep domain concepts out of generic/​shared/​infrastructure layers. A reusable layer (shared library, framework, infra module) must reference NO consumer-specific domain concept — tenant/​customer/​product IDs, business entities, feature rules. The leak compiles and runs, so it passes review silently while coupling the "reusable" layer to one consumer. Push domain fields/​logic down into the consumer via subclass or composition.

<!-- /​SYNC:ai-mistake-prevention --> <!-- SYNC:critical-thinking-mindset -->

Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.

<!-- /​SYNC:critical-thinking-mindset --> <!-- SYNC:critical-thinking-mindset:reminder -->

MUST ATTENTION apply critical thinking — every claim needs traced proof, confidence >80% to act. Anti-hallucination: never present guess as fact.

<!-- /​SYNC:critical-thinking-mindset:reminder --> <!-- SYNC:ai-mistake-prevention:reminder -->

MUST ATTENTION apply AI mistake prevention — holistic-first debugging, fix at responsible layer, surface ambiguity before coding, re-read files after compaction.

<!-- /​SYNC:ai-mistake-prevention:reminder -->

Closing Reminders

IMPORTANT MUST ATTENTION break work into small todo tasks using TaskCreate BEFORE starting IMPORTANT MUST ATTENTION search codebase for 3+ similar patterns before creating new code IMPORTANT MUST ATTENTION cite file:line evidence for every claim (confidence >80% to act) IMPORTANT MUST ATTENTION add a final review todo task to verify work quality

[TASK-PLANNING] Before acting, analyze task scope and systematically break it into small todo tasks and sub-tasks using TaskCreate.