Ui Ux Pro Max
Plan, implement, review, and fix UI/UX across web and mobile stacks using a searchable library of styles, palettes, typography, charts, and stack-specific guidance.
Overview
UI/UX Pro Max is an agent skill most often used in Build (also Ship for UI review) that applies a searchable UI/UX knowledge base across 8 frameworks with 50 styles and 21 palettes.
Install
npx skills add https://github.com/likaia/nginxpulse --skill ui-ux-pro-maxWhat is this skill?
- 50 UI styles, 21 color palettes, 50 font pairings, and 20 chart types in a searchable design database
- 8 stacks covered: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind
- Workflow for plan, build, design, review, fix, improve, optimize, and refactor UI/UX requests
- Requires Python 3 for local search tooling with install steps for macOS, Ubuntu, and Windows
- 50 styles
- 21 palettes
Adoption & trust: 1.2k installs on skills.sh; 2.6k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping UI in React, Vue, or mobile stacks but lack consistent guidance on palettes, typography, patterns, and accessibility in one agent workflow.
Who is it for?
Solo devs designing and coding landing pages, SaaS dashboards, or mobile screens who want catalog-driven UI decisions without a dedicated designer.
Skip if: Pure backend or API-only work, or teams forbidding local Python dependencies for agent tooling.
When should I use this skill?
User requests UI/UX work: design, build, create, implement, review, fix, improve, optimize, or enhance interfaces for websites, dashboards, apps, or component files.
What do I get? / Deliverables
You get stack-aware design recommendations and a repeatable analyze-then-build workflow for polished, accessible interfaces aligned to your product type.
- UI/UX plan aligned to requirements
- Stack-specific implementation or refactor guidance
- Review and improvement notes for accessibility and visual design
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build frontend is the primary shelf because the skill drives design and implementation of interfaces (landing pages, dashboards, apps) in code. Frontend subphase covers websites, dashboards, e-commerce, and component-level work the skill explicitly lists.
Where it fits
Implement a SaaS admin panel with bento grid layout, chart types, and Tailwind spacing rules from the catalog.
Run an optimize/refactor pass on existing .tsx UI for accessibility and hover states before release.
Stand up a credible landing page prototype with palette and typography choices before full product build.
How it compares
Skill-backed design playbook with quantified style and palette catalogs—not a Figma plugin or generic “make it pretty” one-shot prompt.
Common Questions / FAQ
Who is ui-ux-pro-max for?
Indie builders and full-stack solos who implement UI themselves across web or mobile stacks and want structured design intelligence inside their coding agent.
When should I use ui-ux-pro-max?
In Build when creating or refactoring frontend UI; in Ship when reviewing or fixing UX/accessibility before launch; whenever you request design, implement, or optimize for dashboards, landings, or apps.
Is ui-ux-pro-max safe to install?
It expects local Python execution—review the Security Audits panel on this Prism page and only run bundled scripts from sources you trust.
SKILL.md
READMESKILL.md - Ui Ux Pro Max
# 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: ```bash python3 --version || python --version ``` If Python is not installed, install it based on user's OS: **macOS:** ```bash brew install python3 ``` **Ubuntu/Debian:** ```bash sudo apt update && sudo apt install python3 ``` **Windows:** ```powershell 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. ```bash python3 .shared/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`**. ```bash python3 .shared/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 | 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 | | `prompt` | AI prompts, CSS keywords | (style name) | ### Available Stacks | Stack | Focus | |-------|-------| | `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | | `react` | State, hooks, performance, patterns | | `nextjs` | SSR