| name | ui-ux-pro-max |
| description | Data-driven UI/UX design system skill with BM25 search engine. Contains 67
styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart
types across 13 technology stacks. Use for any frontend task that needs
professional design direction — landing pages, dashboards, SaaS apps,
e-commerce, portfolios, or any UI that should look polished rather than
generic.
|
ui-ux-pro-max
Use this skill when the user asks to build or improve a frontend interface and you need professional design direction backed by data, not guesswork.
The core of this skill is a BM25 search engine over curated CSV databases. You call it via run_command to get style, color, typography, layout, and UX recommendations with reasoning.
Resource map
ui-ux-pro-max/
├── SKILL.md ← you're reading this
├── scripts/
│ ├── search.py ← CLI entry point (main command)
│ ├── core.py ← BM25 engine + domain search
│ └── design_system.py ← Design system generator
└── data/
├── styles.csv ← 67 UI styles with effects, keywords, CSS vars
├── colors.csv ← 96 color palettes by product type
├── typography.csv ← 57 font pairings with Google Fonts URLs
├── ux-guidelines.csv ← 99 UX best practices with do/don't/code
├── products.csv ← Product type → style/landing recommendations
├── landing.csv ← Landing page patterns + conversion strategies
├── charts.csv ← 25 chart types with library recommendations
├── icons.csv ← Icon library recommendations by category
├── ui-reasoning.csv ← Reasoning rules for design decisions
├── web-interface.csv ← Web accessibility + interaction guidelines
├── react-performance.csv ← React/Next.js performance patterns
└── stacks/
├── vue.csv ← Vue Composition API + Pinia guidelines
├── react.csv ← React hooks + performance guidelines
├── html-tailwind.csv ← Tailwind utilities + responsive + a11y
├── nextjs.csv ← SSR + routing + images
├── nuxtjs.csv ← Nuxt auto-imports + SSR
├── nuxt-ui.csv ← Nuxt UI components
├── svelte.csv ← Svelte runes + stores
├── astro.csv ← Astro islands + content
├── shadcn.csv ← shadcn/ui components + theming
├── swiftui.csv ← SwiftUI views + animation
├── react-native.csv ← RN components + navigation
├── flutter.csv ← Flutter widgets + theming
└── jetpack-compose.csv ← Compose modifiers + state
Workflow
Step 1 — Analyze user requirements
Extract from the user's 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, beauty, etc.
- Stack: Vue, React, Next.js, or default to the project's framework
Step 2 — Generate design system (REQUIRED, always do this first)
Run the search script to get a comprehensive design system recommendation:
python {skill_dir}/scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "Project Name"
Example:
python {skill_dir}/scripts/search.py "SaaS dashboard analytics professional" --design-system -p "DataPulse"
This command:
- Searches 5 domains in parallel (product, style, color, landing, typography)
- Applies reasoning rules from
ui-reasoning.csv to select best matches
- Returns complete design system: pattern, style, colors, typography, effects
- Includes anti-patterns to avoid
Important: {skill_dir} is the absolute path to this skill's directory. It will be provided in the system prompt after you select this skill. Use it directly in the command.
Step 3 — Supplement with detailed searches (as needed)
After getting the design system, use domain searches for additional details:
python {skill_dir}/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Need | Domain | Example |
|---|
| More style options | style | --domain style "glassmorphism dark" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Alternative fonts | typography | --domain typography "elegant luxury" |
| Landing structure | landing | --domain landing "hero social-proof" |
| Icon choices | icons | --domain icons "navigation action" |
| Product patterns | product | --domain product "healthcare SaaS" |
| Color palettes | color | --domain color "fintech crypto" |
| Web a11y | web | --domain web "aria focus keyboard" |
| React perf | react | --domain react "suspense memo rerender" |
Step 4 — Stack guidelines
Get implementation-specific best practices for the target framework:
python {skill_dir}/scripts/search.py "<keyword>" --stack <stack_name>
Available stacks: html-tailwind, react, nextjs, vue, nuxtjs, nuxt-ui, svelte, astro, shadcn, swiftui, react-native, flutter, jetpack-compose
For Vue projects, always run:
python {skill_dir}/scripts/search.py "layout responsive form" --stack vue
Step 5 — Build the interface
Synthesize the design system + detailed search results and implement:
- Use the recommended color palette as CSS custom properties
- Apply the typography pairing (heading + body fonts)
- Follow the landing page pattern section order
- Respect the anti-patterns list
- Apply stack-specific guidelines
Use write_file to write real project files. Do not wrap output in <artifact> tags.
Hard rules
- No emoji icons — Use SVG icons (Heroicons, Lucide, Simple Icons). Never use emojis as UI icons.
- cursor-pointer on all clickable elements — Cards, buttons, links, any interactive element.
- Smooth transitions — Use
transition-colors duration-200 or equivalent. No instant state changes. No transitions over 500ms.
- Light mode contrast — Text must be at least 4.5:1 contrast ratio. Never use
#94A3B8 (slate-400) for body text in light mode.
- Glass card light mode — Use
bg-white/80 or higher opacity. Never bg-white/10 in light mode.
- Single accent color — Used at most twice per screen (eyebrow + primary CTA is the default budget).
- Stable hover states — Use color/opacity transitions. Never use scale transforms that shift layout.
- Floating navbar spacing — Add
top-4 left-4 right-4 spacing. Never stick directly to viewport edges.
- Responsive — Must work at 375px, 768px, 1024px, 1440px. No horizontal scroll on mobile.
- prefers-reduced-motion — Respect this media query for accessibility.
Pre-delivery checklist
Before delivering any UI code, verify:
