ui-ux-pro-max
starsforks
How to install ui-ux-pro-max?
one-man-company/skills-contextmanager/ui-ux-pro-max
$npx -y skills add One-Man-Company/Skills-ContextManager --skill ui-ux-pro-maxUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks.
SKILL.md
| 1 | # ui-ux-pro-max |
| 2 | |
| 3 | Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations. |
| 4 | |
| 5 | ## Prerequisites |
| 6 | |
| 7 | Check if Python is installed: |
| 8 | |
| 9 | ```bash |
| 10 | python3 --version || python --version |
| 11 | ``` |
| 12 | |
| 13 | If Python is not installed, install it based on user's OS: |
| 14 | |
| 15 | **macOS:** |
| 16 | ```bash |
| 17 | brew install python3 |
| 18 | ``` |
| 19 | |
| 20 | **Ubuntu/Debian:** |
| 21 | ```bash |
| 22 | sudo apt update && sudo apt install python3 |
| 23 | ``` |
| 24 | |
| 25 | **Windows:** |
| 26 | ```powershell |
| 27 | winget install Python.Python.3.12 |
| 28 | ``` |
| 29 | |
| 30 | --- |
| 31 | |
| 32 | ## How to Use This Skill |
| 33 | |
| 34 | When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: |
| 35 | |
| 36 | ### Step 1: Analyze User Requirements |
| 37 | |
| 38 | Extract key information from user request: |
| 39 | - **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. |
| 40 | - **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. |
| 41 | - **Industry**: healthcare, fintech, gaming, education, etc. |
| 42 | - **Stack**: React, Vue, Next.js, or default to `html-tailwind` |
| 43 | |
| 44 | ### Step 2: Generate Design System (REQUIRED) |
| 45 | |
| 46 | **Always start with `--design-system`** to get comprehensive recommendations with reasoning: |
| 47 | |
| 48 | ```bash |
| 49 | python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] |
| 50 | ``` |
| 51 | |
| 52 | This command: |
| 53 | 1. Searches 5 domains in parallel (product, style, color, landing, typography) |
| 54 | 2. Applies reasoning rules from `ui-reasoning.csv` to select best matches |
| 55 | 3. Returns complete design system: pattern, style, colors, typography, effects |
| 56 | 4. Includes anti-patterns to avoid |
| 57 | |
| 58 | **Example:** |
| 59 | ```bash |
| 60 | python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" |
| 61 | ``` |
| 62 | |
| 63 | ### Step 2b: Persist Design System (Master + Overrides Pattern) |
| 64 | |
| 65 | To save the design system for hierarchical retrieval across sessions, add `--persist`: |
| 66 | |
| 67 | ```bash |
| 68 | python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" |
| 69 | ``` |
| 70 | |
| 71 | This creates: |
| 72 | - `design-system/MASTER.md` — Global Source of Truth with all design rules |
| 73 | - `design-system/pages/` — Folder for page-specific overrides |
| 74 | |
| 75 | **With page-specific override:** |
| 76 | ```bash |
| 77 | python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" |
| 78 | ``` |
| 79 | |
| 80 | This also creates: |
| 81 | - `design-system/pages/dashboard.md` — Page-specific deviations from Master |
| 82 | |
| 83 | **How hierarchical retrieval works:** |
| 84 | 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md` |
| 85 | 2. If the page file exists, its rules **override** the Master file |
| 86 | 3. If not, use `design-system/MASTER.md` exclusively |
| 87 | |
| 88 | ### Step 3: Supplement with Detailed Searches (as needed) |
| 89 | |
| 90 | After getting the design system, use domain searches to get additional details: |
| 91 | |
| 92 | ```bash |
| 93 | python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] |
| 94 | ``` |
| 95 | |
| 96 | **When to use detailed searches:** |
| 97 | |
| 98 | | Need | Domain | Example | |
| 99 | |------|--------|---------| |
| 100 | | More style options | `style` | `--domain style "glassmorphism dark"` | |
| 101 | | Chart recommendations | `chart` | `--domain chart "real-time dashboard"` | |
| 102 | | UX best practices | `ux` | `--domain ux "animation accessibility"` | |
| 103 | | Alternative fonts | `typography` | `--domain typography "elegant luxury"` | |
| 104 | | Landing structure | `landing` | `--domain landing "hero social-proof"` | |
| 105 | |
| 106 | ### Step 4: Stack Guidelines (Default: html-tailwind) |
| 107 | |
| 108 | Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**. |
| 109 | |
| 110 | ```bash |
| 111 | python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind |
| 112 | ``` |
| 113 | |
| 114 | Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose` |
| 115 | |
| 116 | --- |
| 117 | |
| 118 | ## Search Reference |
| 119 | |
| 120 | ### Available Domains |
| 121 | |
| 122 | | Domain | Use For | Example Keywords | |
| 123 | |--------|---------|------------------| |
| 124 | | `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | |
| 125 | | `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | |
| 126 | | `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | |
| 127 | | `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | |
| 128 | | `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | |
| 129 | | `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | |
| 130 | | `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | |
| 131 | | `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache | |
| 132 | | `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize | |
| 133 | | `prompt` | AI prompts, CSS keyword |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
