t1k:web:ui:ux-pro-max

Field	Value
Module	`ui`
Version	`1.7.0`
Effort	`high`
Tools	—

Keywords: accessibility, color palette, design, font pairing, glassmorphism, shadcn, UI, UX

How to invoke

/t1k:web:ui:ux-pro-max

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)
Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
Choosing color schemes, typography systems, spacing standards, or layout systems
Reviewing UI code for user experience, accessibility, or visual consistency
Implementing navigation structures, animations, or responsive behavior
Making product-level design decisions (style, information hierarchy, brand expression)
Improving perceived quality, clarity, or usability of interfaces

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.

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	Horizontal scroll, Fixed px container widths, Disable zoom
6	Typography & Color	MEDIUM	`typography`, `color`	Base 16px, Line-height 1.5, Semantic color tokens	Text < 12px body, Gray-on-gray, Raw hex in components
7	Animation	MEDIUM	`ux`	Duration 150–300ms, Motion conveys meaning, Spatial continuity	Decorative-only animation, Animating width/height, No reduced-motion
8	Forms & Feedback	MEDIUM	`ux`	Visible labels, Error near field, Helper text, Progressive disclosure	Placeholder-only label, Errors only at top, Overwhelm upfront
9	Navigation Patterns	HIGH	`ux`	Predictable back, Bottom nav ≤5, Deep linking	Overloaded nav, Broken back behavior, No deep links
10	Charts & Data	LOW	`chart`	Legends, Tooltips, Accessible colors	Relying on color alone to convey meaning

Quick Reference

Full quick reference rules (50+ styles, 161 palettes, 57 font pairings): see references/quick-reference-rules.md.

How to Use

Search specific domains using the CLI tool below.

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

Full how-to guide with examples and output formats: see references/app-ui-professional-standards.md.

Search Reference

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
`google-fonts`	Individual Google Fonts lookup	sans serif, monospace, japanese, variable font, popular
`react`	React/Next.js performance	waterfall, bundle, suspense, memo, rerender, cache
`web`	App interface guidelines (iOS/Android/React Native)	accessibilityLabel, touch targets, safe areas, Dynamic Type
`prompt`	AI prompts, CSS keywords	(style name)

Available Stacks

Stack	Focus
`react-native`	Components, Navigation, Lists

Example Workflow

User request: “Make an AI search homepage.”

Step 1: Analyze Requirements

Product type: Tool (AI search engine)
Target audience: C-end users looking for fast, intelligent search
Style keywords: modern, minimal, content-first, dark mode
Stack: React Native

Step 2: Generate Design System (REQUIRED)

python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"

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

Step 4: Stack Guidelines

python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native

Then: Synthesize design system + detailed searches and implement the design.

Output Formats

The --design-system flag supports two output formats:

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Tips for Better Results

Full tips: see references/tips-for-better-results.md.

Common Rules for Professional UI

Full professional UI rules: see references/professional-ui-rules-and-checklist.md.

Pre-Delivery Checklist

Full pre-delivery checklist: see references/professional-ui-rules-and-checklist.md.

Gotchas

Gestalt principles ≠ pixel-perfect — alignment + proximity matter more than exact pixel counts to users; do not over-tune.
Accessibility audits at content-lock save 10x rework — semantic HTML + ARIA labels + focus-trap modals + reduced-motion BEFORE visual polish.
Mobile UX patterns differ per platform — iOS sheet vs Android bottom-sheet vs web modal — pick one per platform, not one for all.
Form validation in real-time vs on-blur vs on-submit changes completion rate — measure, don’t intuit.