ui-ux-pro-max

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

280kinstalls12kforks

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.

Summary

UI/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 presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Ast

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 det

People who liked this also viewed

6 picks

Type

ui-ux-pro-max

280kinstalls12kforks

View on GitHub

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.

Summary

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 det

People who liked this also viewed

6 picks

Type