UI/UX Pro Max - Design Intelligence
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
When to Use This Skill
- Designing new UI (landing pages, dashboards, mobile screens)
- Reviewing UI for UX issues (information architecture, accessibility, copy, hierarchy)
- Choosing color palettes and typography for a project
- Producing token-aligned UI specs (spacing, type scale, color roles)
- Building production-quality components
How to Use (Prompt Patterns)
1. Design Mode
- Input: product goal + audience + platform + constraints
- Output: layout plan + components + tokens + interaction notes
2. Critique Mode
- Input: screenshot / HTML / Figma node list + context
- Output: prioritized issues + fixes + token-safe suggestions
3. Implementation Mode
- Input: stack (Next.js/React/Tailwind/OWL/etc.) + design direction
- Output: component blueprint + styling guidance
Design System Generation (REQUIRED first step)
Always start with --design-system to get comprehensive recommendations:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
Persist for cross-session use:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
Domain Searches (supplement as needed)
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Domain |
Use For |
Example |
product |
Product type recommendations |
SaaS, e-commerce, portfolio |
style |
UI styles, effects |
glassmorphism, minimalism |
typography |
Font pairings |
elegant, playful, modern |
color |
Color palettes |
saas, healthcare, fintech |
landing |
Page structure, CTAs |
hero, pricing, social-proof |
chart |
Chart types |
trend, comparison, funnel |
ux |
Best practices |
animation, accessibility |
react |
React/Next.js perf |
waterfall, bundle, suspense |
web |
Web interface |
aria, focus, keyboard |
Stack Guidelines
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available: html-tailwind (default), react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
References (Progressive Disclosure)
See references/ for detailed catalogs and rulebooks:
references/01-styles.md — visual styles catalog + selection heuristicreferences/02-color-palettes.md — palette system, token roles, contrast rulesreferences/03-typography.md — font pairings, type scale, line-height guidancereferences/04-layout-spacing.md — grids, spacing scale, responsive rulesreferences/05-components-patterns.md — component heuristics + interaction patternsreferences/06-charts-dataviz.md — chart selection guide + dashboard rulesreferences/07-ux-guidelines.md — UX best practices + anti-patternsreferences/08-accessibility.md — a11y checklist + WCAG compliance
Output Contract
- Prefer tokens/roles over hard-coded hex colors
- Provide priority-ranked recommendations (P0/P1/P2)
- Use SVG icons (Heroicons, Lucide) — never emojis
- Avoid novelty; optimize for clarity and conversion
- Test responsive at 375px, 768px, 1024px, 1440px
1---2name: ipai-ui-ux-pro-max3description: Design intelligence for UI/UX generation and critique; use for layouts, typography, color palettes, tokens, and UX best practices. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. 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. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.4---56# UI/UX Pro Max - Design Intelligence78Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.910## When to Use This Skill1112- Designing new UI (landing pages, dashboards, mobile screens)13- Reviewing UI for UX issues (information architecture, accessibility, copy, hierarchy)14- Choosing color palettes and typography for a project15- Producing token-aligned UI specs (spacing, type scale, color roles)16- Building production-quality components1718## How to Use (Prompt Patterns)1920### 1. Design Mode21- **Input:** product goal + audience + platform + constraints22- **Output:** layout plan + components + tokens + interaction notes2324### 2. Critique Mode25- **Input:** screenshot / HTML / Figma node list + context26- **Output:** prioritized issues + fixes + token-safe suggestions2728### 3. Implementation Mode29- **Input:** stack (Next.js/React/Tailwind/OWL/etc.) + design direction30- **Output:** component blueprint + styling guidance3132## Design System Generation (REQUIRED first step)3334Always start with `--design-system` to get comprehensive recommendations:3536```bash37python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]38```3940Persist for cross-session use:41```bash42python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"43```4445### Domain Searches (supplement as needed)4647```bash48python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]49```5051| Domain | Use For | Example |52|--------|---------|---------|53| `product` | Product type recommendations | SaaS, e-commerce, portfolio |54| `style` | UI styles, effects | glassmorphism, minimalism |55| `typography` | Font pairings | elegant, playful, modern |56| `color` | Color palettes | saas, healthcare, fintech |57| `landing` | Page structure, CTAs | hero, pricing, social-proof |58| `chart` | Chart types | trend, comparison, funnel |59| `ux` | Best practices | animation, accessibility |60| `react` | React/Next.js perf | waterfall, bundle, suspense |61| `web` | Web interface | aria, focus, keyboard |6263### Stack Guidelines6465```bash66python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind67```6869Available: `html-tailwind` (default), `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`7071## References (Progressive Disclosure)7273See `references/` for detailed catalogs and rulebooks:7475- `references/01-styles.md` — visual styles catalog + selection heuristic76- `references/02-color-palettes.md` — palette system, token roles, contrast rules77- `references/03-typography.md` — font pairings, type scale, line-height guidance78- `references/04-layout-spacing.md` — grids, spacing scale, responsive rules79- `references/05-components-patterns.md` — component heuristics + interaction patterns80- `references/06-charts-dataviz.md` — chart selection guide + dashboard rules81- `references/07-ux-guidelines.md` — UX best practices + anti-patterns82- `references/08-accessibility.md` — a11y checklist + WCAG compliance8384## Output Contract8586- Prefer **tokens/roles** over hard-coded hex colors87- Provide **priority-ranked** recommendations (P0/P1/P2)88- Use SVG icons (Heroicons, Lucide) — never emojis89- Avoid novelty; optimize for clarity and conversion90- Test responsive at 375px, 768px, 1024px, 1440px
diegosouzapw