ui-ux-pro-max

Name: ui-ux-pro-max
Author: nextlevelbuilder

bynextlevelbuilder· 18 skills

Installs

290k

Stars

110k

Forks

12k

How to install ui-ux-pro-max?

nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max

$npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# UI/UX Pro Max - Design Intelligence
2
3	Searchable database of UI/UX design rules with priority-based recommendations: 84 styles, 192 color palettes, 74 font pairings, 192 product types with reasoning rules, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 technology stacks.
4
5	## When to Apply
6
7	Use this Skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control: designing new pages, creating/refactoring UI components, choosing color/typography/spacing/layout systems, reviewing UI for UX/accessibility/consistency, implementing navigation/animation/responsive behavior, or improving perceived quality and usability.
8
9	Skip it for pure backend logic, API/database design, non-visual performance work, infrastructure/DevOps, or non-visual scripts — unless the task changes how something looks, feels, moves, or is interacted with.
10
11	## Rule Categories by Priority
12
13	Follow priority 1→10 to decide which category to focus on first; use `--domain <Domain>` to query full details. The full rule text for every category lives in `references/quick-reference.md` — read it on demand rather than loading it every time.
14
15	\| Priority \| Category \| Impact \| Domain \| Key Checks (Must Have) \| Anti-Patterns (Avoid) \|
16	\|----------\|----------\|--------\|--------\|------------------------\|------------------------\|
17	\| 1 \| Accessibility \| CRITICAL \| `ux` \| Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels \| Removing focus rings, Icon-only buttons without labels \|
18	\| 2 \| Touch & Interaction \| CRITICAL \| `ux` \| Min size 44×44px, 8px+ spacing, Loading feedback \| Reliance on hover only, Instant state changes (0ms) \|
19	\| 3 \| Performance \| HIGH \| `ux` \| WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) \| Layout thrashing, Cumulative Layout Shift \|
20	\| 4 \| Style Selection \| HIGH \| `style`, `product` \| Match product type, Consistency, SVG icons (no emoji) \| Mixing flat & skeuomorphic randomly, Emoji as icons \|
21	\| 5 \| Layout & Responsive \| HIGH \| `ux` \| Mobile-first breakpoints, Viewport meta, No horizontal scroll \| Horizontal scroll, Fixed px container widths, Disable zoom \|
22	\| 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 \|
23	\| 7 \| Animation \| MEDIUM \| `ux`, `gsap` \| Duration 150–300ms, Motion conveys meaning, Spatial continuity \| Decorative-only animation, Animating width/height, No reduced-motion \|
24	\| 8 \| Forms & Feedback \| MEDIUM \| `ux` \| Visible labels, Error near field, Helper text, Progressive disclosure \| Placeholder-only label, Errors only at top, Overwhelm upfront \|
25	\| 9 \| Navigation Patterns \| HIGH \| `ux` \| Predictable back, Bottom nav ≤5, Deep linking \| Overloaded nav, Broken back behavior, No deep links \|
26	\| 10 \| Charts & Data \| LOW \| `chart` \| Legends, Tooltips, Accessible colors \| Relying on color alone to convey meaning \|
27
28	For the full rule list per category (all ~98 UX guidelines with rationale), read `references/quick-reference.md`. For app-specific polish rules (icons, touch feedback, dark mode contrast, safe areas) and the canonical pre-delivery checklist, read `references/pro-rules.md`.
29
30	---
31
32	## Running the search tool
33
34	The search script lives inside this skill's own directory, not the project directory. Always invoke it by its full path — do not assume a particular working directory:
35
36	```bash
37	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --domain <domain>
38	```
39
40	If `python` is not found, try `python3`, then `py -3`. Requires Python 3.x, no external dependencies (see README for install instructions if Python is missing).
41
42	## Workflow
43
44	### Step 1: Analyze User Requirements
45
46	Extract from the user request:
47	- Product type: SaaS, e-commerce, portfolio, dashboard, entertainment, tool, productivity, or hybrid
48	- Target audience & context: age group, usage context (commute, leisure, work)
49	- Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
50	- Stack: detect from the project — check `package.json` deps (react/next/vue/svelte/nuxt/@angular), `pubspec.yaml` (Flutter), `.xcodeproj`/`Package.swift` (SwiftUI), `composer.json` (Laravel), or React Native markers (`app.json` + `react-native` dep). If nothing is detectable, ask the user or default to `html-tailwind`. Never assume a stack* — a hardcoded default silently misroutes every recommendation.
51
52	### Step 2: Generate Design System (REQUIRED for new pages/projects)
53
54	Always start with `--design-system` to get comprehensive recommendations with reasoning:
55
56	```bash
57	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
58	```
59
60	This searches product/style/color/landing/typography domains in parallel, applies reasoning rules from `ui-reasoning.csv`, and returns pattern, style, colors, typography, effects, and anti-patterns to avoid.
61
62	Example:
63	```bash
64	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "beauty spa wellness service" --design-system -p "Serenity Spa"
65	```
66
67	### Step 2b: Persist Design System (Master + Overrides Pattern)
68
69	To save the design system for retrieval across sessions, add `--persist` and always pass `--output-dir` pointed at the project root — without it, files are written relative to whatever directory the tool happens to run from:
70
71	```bash
72	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --output-dir "<project-root>"
73	```
74
75	This creates:
76	- `design-system/<project-slug>/MASTER.md` — Global Source of Truth
77	- `design-system/<project-slug>/pages/` — Folder for page-specific overrides
78
79	With a page-specific override, add `--page "dashboard"` to also create `design-system/<project-slug>/pages/dashboard.md`.
80
81	If `design-system/<project-slug>/MASTER.md` already exists, `--persist` skips writing and leaves it untouched unless you also pass `--force` — check whether it exists first (and read it) before regenerating, so you don't silently discard prior decisions the user or a teammate made.
82
83	Retrieval when building a specific page:
84	1. Read `design-system/<project-slug>/MASTER.md`
85	2. Check if `design-system/<project-slug>/pages/<page-name>.md` exists — if so, its rules override Master
86	3. Otherwise use Master rules exclusively
87
88	### Step 2c: Design Dials (optional)
89
90	Three optional 1-10 sliders that tune `--design-system` output without changing your query. Add any combination of them to the same command:
91
92	```bash
93	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --variance <1-10> --motion <1-10> --density <1-10>
94	```
95
96	\| Dial \| Low (1-3) \| Mid (4-7) \| High (8-10) \|
97	\|------\|-----------\|-----------\|-------------\|
98	\| `--variance` \| Centered / minimal (biases toward Minimalism-style categories) \| Balanced / modern \| Bold / asymmetric (biases toward Brutalism, Bento Grids) \|
99	\| `--motion` \| Subtle micro-interactions \| Standard scroll/stagger motion \| Complex choreography (pin, Flip, SplitText) \|
100	\| `--density` \| Spacious (24-96px spacing scale) \| Standard (16-64px, current default) \| Dense/dashboard (8-32px spacing scale) \|
101
102	- `--motion` attaches a ready-to-use GSAP snippet (with framework notes, Do/Don't, and performance notes) pulled from `--domain gsap`, matched to the resolved tier (Subtle/Standard/Complex).
103	- `--density` overrides the `--space-*` CSS variable table in the ASCII/markdown/MASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.
104	- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).
105
106	Example:
107	```bash
108	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8 -p "Ops Console"
109	```
110
111	### Step 3: Supplement with Detailed Searches (as needed)
112
113	```bash
114	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]
115	```
116
117	\| Need \| Domain \| Example \|
118	\|------\|--------\|---------\|
119	\| Product type patterns \| `product` \| `--domain product "entertainment social"` \|
120	\| More style options \| `style` \| `--domain style "glassmorphism dark"` \|
121	\| Color palettes \| `color` \| `--domain color "entertainment vibrant"` \|
122	\| Font pairings \| `typography` \| `--domain typography "playful modern"` \|
123	\| Individual Google Fonts \| `google-fonts` \| `--domain google-fonts "sans serif popular variable"` \|
124	\| Chart recommendations \| `chart` \| `--domain chart "real-time dashboard"` \|
125	\| UX best practices \| `ux` \| `--domain ux "animation accessibility"` \|
126	\| Landing page structure \| `landing` \| `--domain landing "hero social-proof"` \|
127	\| Icon recommendations \| `icons` \| `--domain icons "navigation outline"` \|
128	\| GSAP animation presets \| `gsap` \| `--domain gsap "scroll reveal stagger"` \|
129	\| React/Next.js performance \| `react` \| `--domain react "rerender memo list"` \|
130	\| App/native interface guidelines \| `web` \| `--domain web "accessibilityLabel touch safe-areas"` \|
131
132	Domain is auto-detected from the query if `--domain` is omitted — but auto-detection can misroute overlapping terms (e.g. "font" matches both `typography` and `google-fonts`). If results look off-topic, pass `--domain` explicitly.
133
134	### Step 4: Stack Guidelines
135
136	```bash
137	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --stack <stack>
138	```
139
140	Available stacks: `react`, `nextjs`, `vue`, `svelte`, `astro`, `nuxtjs`, `nuxt-ui`, `angular`, `laravel`, `swiftui`, `react-native`, `flutter`, `jetpack-compose`, `html-tailwind`, `shadcn`, `threejs`, `javafx`, `wpf`, `winui`, `avalonia`, `uno`, `uwp`. Use the stack detected in Step 1.
141
142	---
143
144	## If a search returns 0 results
145
146	Do not fabricate output. Instead:
147	1. Retry once with broader or differently-worded keywords (try product + style separately rather than combined).
148	2. If still empty, fall back to the priority table above and say explicitly to the user that this recommendation came from the built-in defaults, not a database match (e.g. "no palette match for X, using general SaaS defaults").
149	3. Never present a 0-result search as if it returned data.
150
151	## Example Workflow
152
153	User request: "Make an AI search homepage." (stack detected as Next.js from `package.json`)
154
155	```bash
156	# Step 2: design system
157	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "AI search tool modern minimal" --design-system -p "AI Search"
158
159	# Step 3: supplement
160	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "search loading animation" --domain ux
161
162	# Step 4: stack guidelines
163	python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "suspense streaming bundle" --stack nextjs
164	```
165
166	Then synthesize the design system + detailed searches and implement.
167
168	## Output Formats
169
170	`--design-system` supports `-f ascii` (default, terminal display), `-f markdown` (documentation), and `--json` (machine-readable, includes the raw design system dict plus persistence status).
171
172	## Tips for Better Results
173
174	- Use multi-dimensional keywords — combine product + industry + tone + density: `"entertainment social vibrant content-dense"`, not just `"app"`
175	- Try different phrasings for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
176	- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about
177	- Pass the detected stack explicitly for implementation-specific guidance
178
179	\| Problem \| What to Do \|
180	\|---------\|------------\|
181	\| Can't decide on style/color \| Re-run `--design-system` with different keywords \|
182	\| Dark mode contrast issues \| `references/quick-reference.md` §6: `color-dark-mode` + `color-accessible-pairs` \|
183	\| Animations feel unnatural \| `references/quick-reference.md` §7: `spring-physics` + `easing` + `exit-faster-than-enter` \|
184	\| Form UX is poor \| `references/quick-reference.md` §8: `inline-validation` + `error-clarity` + `focus-management` \|
185	\| Navigation feels confusing \| `references/quick-reference.md` §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` \|
186	\| Layout breaks on small screens \| `references/quick-reference.md` §5: `mobile-first` + `breakpoint-consistency` \|
187	\| Performance / jank \| `references/quick-reference.md` §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` \|
188
189	## Before Delivering App UI
190
191	Read `references/pro-rules.md` and run through its canonical Pre-Delivery Checklist. It covers icon/visual-element discipline, interaction feedback, light/dark contrast, safe-area layout, and accessibility — scoped to native/mobile app UI (iOS/Android/React Native/Flutter).

6 picks

Type

Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.

ui-ux-pro-max

How to install ui-ux-pro-max?

Related

ui-ux-pro-max

How to install ui-ux-pro-max?

Related