ui-ux-pro-max

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

578stars0forks

How to install ui-ux-pro-max?

shobcoder/shob/ui-ux-pro-max

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

Installs into the current project.

Summary

UI/UX design intelligence expert for web and mobile applications. Use when designing interfaces, selecting color palettes, typography, visual styles, building landing pages, dashboards, or reviewing code for UX issues. Covers 50+ design styles, 97 color palettes, 57 font pairings

Files · 1

View on GitHub

SKILL.md

1	# UI/UX Pro Max - Design Intelligence Expert
2
3	Comprehensive UI/UX design guide for web and mobile applications. Provides intelligent design recommendations based on product type, industry, and user requirements. Reference these guidelines when designing new UI, choosing colors and typography, reviewing code for UX issues, or implementing features.
4
5	---
6
7	## Workflow
8
9	### Step 1: Analyze User Requirements
10
11	Extract from user request:
12	- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
13	- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
14	- Industry: healthcare, fintech, gaming, education, beauty, etc.
15	- Tech stack: React, Vue, Next.js, Svelte, Flutter, or html-tailwind (default)
16
17	### Step 2: Generate Design System
18
19	Consult the reference data below (and CSV files in `data/`) for:
20	- Recommended patterns and section layouts
21	- Primary visual style with effects
22	- Color palette (primary, secondary, CTA, background, text)
23	- Typography pairing (heading + body fonts with Google Fonts URL)
24	- Key effects and anti-patterns to avoid
25
26	### Step 3: Implementation Guidelines
27
28	Apply stack-specific best practices from the reference data:
29	- HTML/Tailwind utilities, responsive breakpoints
30	- React hooks, state management, performance patterns
31	- Vue Composition API, Pinia state
32	- Flutter widgets, themes, navigation
33	- Accessibility requirements (WCAG compliance)
34
35	### Step 4: Pre-Delivery Verification
36
37	Run through all checklists (visual quality, interaction, light/dark mode, layout, accessibility) before delivering any UI code.
38
39	---
40
41	## Priority Rules
42
43	\| Priority \| Category \| Impact \|
44	\|----------\|----------\|--------\|
45	\| 1 \| Accessibility \| CRITICAL - Color contrast 4.5:1, focus states, aria-labels \|
46	\| 2 \| Touch & Interaction \| CRITICAL - 44x44px touch targets, cursor-pointer \|
47	\| 3 \| Performance \| HIGH - Image optimization, lazy loading \|
48	\| 4 \| Layout & Responsive \| HIGH - Mobile-first, viewport meta \|
49	\| 5 \| Typography & Color \| MEDIUM - Line height 1.5-1.75, readable fonts \|
50	\| 6 \| Animation \| MEDIUM - 150-300ms duration, transform-only \|
51	\| 7 \| Style Selection \| MEDIUM - Match style to product type \|
52
53	---
54
55	## Quick Style Selector by Product Type
56
57	\| Product Type \| Primary Style \| Secondary Styles \| Color Mood \|
58	\|--------------\|---------------\|------------------\|------------\|
59	\| SaaS (General) \| Minimalism \| Flat Design, Glassmorphism \| Trust blue + accent contrast \|
60	\| E-commerce \| Neo-Brutalism \| Bento Grid, Dark Mode \| Brand primary + success green \|
61	\| E-commerce Luxury \| Luxury Minimal \| Dark Mode, Elegant \| Premium black + gold accents \|
62	\| Healthcare \| Soft Minimalism \| Flat Design, Organic \| Calm blue + health green \|
63	\| Fintech/Crypto \| Cyberpunk \| Dark Mode, Glassmorphism \| Dark tech + vibrant accents \|
64	\| Gaming \| Neon Glow \| Cyberpunk, Dark Mode \| Vibrant + neon + immersive \|
65	\| Portfolio/Creative \| Editorial \| Brutalism, Asymmetric \| Brand primary + artistic \|
66	\| Dashboard \| Corporate Tech \| Flat Design, Data-Dense \| Cool→Hot gradients + neutral \|
67	\| AI/Chatbot \| Aurora Gradients \| Glassmorphism, Dark Mode \| Neutral + AI Purple (#6366F1) \|
68	\| Beauty/Spa/Wellness \| Organic Shapes \| Soft Minimalism, Elegant \| Soft pastels + natural tones \|
69
70	---
71
72	## Color Palettes by Industry
73
74	### SaaS / Business
75	\| Role \| Hex \| Tailwind \|
76	\|------\|-----\|----------\|
77	\| Primary \| #2563EB \| blue-600 \|
78	\| Secondary \| #3B82F6 \| blue-500 \|
79	\| CTA \| #F97316 \| orange-500 \|
80	\| Background \| #F8FAFC \| slate-50 \|
81	\| Text \| #1E293B \| slate-800 \|
82	\| Border \| #E2E8F0 \| slate-200 \|
83
84	### E-commerce Luxury
85	\| Role \| Hex \| Tailwind \|
86	\|------\|-----\|----------\|
87	\| Primary \| #1C1917 \| stone-900 \|
88	\| Secondary \| #44403C \| stone-700 \|
89	\| CTA \| #CA8A04 \| yellow-600 \|
90	\| Background \| #FAFAF9 \| stone-50 \|
91	\| Text \| #0C0A09 \| stone-950 \|
92	\| Border \| #D6D3D1 \| stone-300 \|
93
94	### Healthcare
95	\| Role \| Hex \| Tailwind \|
96	\|------\|-----\|----------\|
97	\| Primary \| #0891B2 \| cyan-600 \|
98	\| Secondary \| #22D3EE \| cyan-400 \|
99	\| CTA \| #059669 \| emerald-600 \|
100	\| Background \| #ECFEFF \| cyan-50 \|
101	\| Text \| #164E63 \| cyan-900 \|
102	\| Border \| #A5F3FC \| cyan-200 \|
103
104	### Fintech / Crypto
105	\| Role \| Hex \| Tailwind \|
106	\|------\|-----\|----------\|
107	\| Primary \| #F59E0B \| amber-500 \|
108	\| Secondary \| #FBBF24 \| amber-400 \|
109	\| CTA \| #8B5CF6 \| violet-500 \|
110	\| Background \| #0F172A \| slate-900 \|
111	\| Text \| #F8FAFC \| slate-50 \|
112	\| Border \| #334155 \| slate-700 \|
113
114	### Gaming
115	\| Role \| Hex \| Tailwind \|
116	\|------\|-----\|----------\|
117	\| Primary \| #7C3AED \| violet-600 \|
118	\| Secondary \| #A78BFA \| violet-400 \|
119	\| CTA \| #F43F5E \| rose-500 \|
120	\| Background \| #0F0F

People who liked this also viewed

6 picks

Type

ui-ux-pro-max

578stars0forks

View on GitHub

How to install ui-ux-pro-max?

shobcoder/shob/ui-ux-pro-max

$npx -y skills add shobcoder/shob --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 Expert
2
3	Comprehensive UI/UX design guide for web and mobile applications. Provides intelligent design recommendations based on product type, industry, and user requirements. Reference these guidelines when designing new UI, choosing colors and typography, reviewing code for UX issues, or implementing features.
4
5	---
6
7	## Workflow
8
9	### Step 1: Analyze User Requirements
10
11	Extract from user request:
12	- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
13	- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
14	- Industry: healthcare, fintech, gaming, education, beauty, etc.
15	- Tech stack: React, Vue, Next.js, Svelte, Flutter, or html-tailwind (default)
16
17	### Step 2: Generate Design System
18
19	Consult the reference data below (and CSV files in `data/`) for:
20	- Recommended patterns and section layouts
21	- Primary visual style with effects
22	- Color palette (primary, secondary, CTA, background, text)
23	- Typography pairing (heading + body fonts with Google Fonts URL)
24	- Key effects and anti-patterns to avoid
25
26	### Step 3: Implementation Guidelines
27
28	Apply stack-specific best practices from the reference data:
29	- HTML/Tailwind utilities, responsive breakpoints
30	- React hooks, state management, performance patterns
31	- Vue Composition API, Pinia state
32	- Flutter widgets, themes, navigation
33	- Accessibility requirements (WCAG compliance)
34
35	### Step 4: Pre-Delivery Verification
36
37	Run through all checklists (visual quality, interaction, light/dark mode, layout, accessibility) before delivering any UI code.
38
39	---
40
41	## Priority Rules
42
43	\| Priority \| Category \| Impact \|
44	\|----------\|----------\|--------\|
45	\| 1 \| Accessibility \| CRITICAL - Color contrast 4.5:1, focus states, aria-labels \|
46	\| 2 \| Touch & Interaction \| CRITICAL - 44x44px touch targets, cursor-pointer \|
47	\| 3 \| Performance \| HIGH - Image optimization, lazy loading \|
48	\| 4 \| Layout & Responsive \| HIGH - Mobile-first, viewport meta \|
49	\| 5 \| Typography & Color \| MEDIUM - Line height 1.5-1.75, readable fonts \|
50	\| 6 \| Animation \| MEDIUM - 150-300ms duration, transform-only \|
51	\| 7 \| Style Selection \| MEDIUM - Match style to product type \|
52
53	---
54
55	## Quick Style Selector by Product Type
56
57	\| Product Type \| Primary Style \| Secondary Styles \| Color Mood \|
58	\|--------------\|---------------\|------------------\|------------\|
59	\| SaaS (General) \| Minimalism \| Flat Design, Glassmorphism \| Trust blue + accent contrast \|
60	\| E-commerce \| Neo-Brutalism \| Bento Grid, Dark Mode \| Brand primary + success green \|
61	\| E-commerce Luxury \| Luxury Minimal \| Dark Mode, Elegant \| Premium black + gold accents \|
62	\| Healthcare \| Soft Minimalism \| Flat Design, Organic \| Calm blue + health green \|
63	\| Fintech/Crypto \| Cyberpunk \| Dark Mode, Glassmorphism \| Dark tech + vibrant accents \|
64	\| Gaming \| Neon Glow \| Cyberpunk, Dark Mode \| Vibrant + neon + immersive \|
65	\| Portfolio/Creative \| Editorial \| Brutalism, Asymmetric \| Brand primary + artistic \|
66	\| Dashboard \| Corporate Tech \| Flat Design, Data-Dense \| Cool→Hot gradients + neutral \|
67	\| AI/Chatbot \| Aurora Gradients \| Glassmorphism, Dark Mode \| Neutral + AI Purple (#6366F1) \|
68	\| Beauty/Spa/Wellness \| Organic Shapes \| Soft Minimalism, Elegant \| Soft pastels + natural tones \|
69
70	---
71
72	## Color Palettes by Industry
73
74	### SaaS / Business
75	\| Role \| Hex \| Tailwind \|
76	\|------\|-----\|----------\|
77	\| Primary \| #2563EB \| blue-600 \|
78	\| Secondary \| #3B82F6 \| blue-500 \|
79	\| CTA \| #F97316 \| orange-500 \|
80	\| Background \| #F8FAFC \| slate-50 \|
81	\| Text \| #1E293B \| slate-800 \|
82	\| Border \| #E2E8F0 \| slate-200 \|
83
84	### E-commerce Luxury
85	\| Role \| Hex \| Tailwind \|
86	\|------\|-----\|----------\|
87	\| Primary \| #1C1917 \| stone-900 \|
88	\| Secondary \| #44403C \| stone-700 \|
89	\| CTA \| #CA8A04 \| yellow-600 \|
90	\| Background \| #FAFAF9 \| stone-50 \|
91	\| Text \| #0C0A09 \| stone-950 \|
92	\| Border \| #D6D3D1 \| stone-300 \|
93
94	### Healthcare
95	\| Role \| Hex \| Tailwind \|
96	\|------\|-----\|----------\|
97	\| Primary \| #0891B2 \| cyan-600 \|
98	\| Secondary \| #22D3EE \| cyan-400 \|
99	\| CTA \| #059669 \| emerald-600 \|
100	\| Background \| #ECFEFF \| cyan-50 \|
101	\| Text \| #164E63 \| cyan-900 \|
102	\| Border \| #A5F3FC \| cyan-200 \|
103
104	### Fintech / Crypto
105	\| Role \| Hex \| Tailwind \|
106	\|------\|-----\|----------\|
107	\| Primary \| #F59E0B \| amber-500 \|
108	\| Secondary \| #FBBF24 \| amber-400 \|
109	\| CTA \| #8B5CF6 \| violet-500 \|
110	\| Background \| #0F172A \| slate-900 \|
111	\| Text \| #F8FAFC \| slate-50 \|
112	\| Border \| #334155 \| slate-700 \|
113
114	### Gaming
115	\| Role \| Hex \| Tailwind \|
116	\|------\|-----\|----------\|
117	\| Primary \| #7C3AED \| violet-600 \|
118	\| Secondary \| #A78BFA \| violet-400 \|
119	\| CTA \| #F43F5E \| rose-500 \|
120	\| Background \| #0F0F

People who liked this also viewed

6 picks

Type