thomas/ui-ux-pro-max-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce UI/UX Pro Max skill with comprehensive guidelines, data, and search functionality across various tech stacks.

Browse Source
This commit is contained in:
Viet Tran
2025-11-30 18:46:26 +07:00
commit ce4372c624
64 changed files with 5214 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
.claude/skills/ui-ux-pro-max/data/quick-ref.csv Normal file
View File

@@ -0,0 +1,51 @@
#,Style Name,Type,Category,Best For,Primary Colors,Performance,Accessibility,Mobile,Dark Mode
1,Minimalism & Swiss Style,General,Clean & Functional,"Enterprise, Dashboards",Black & White,⚡ Excellent,✓ AAA,✓ High,✓ Full
2,Neumorphism,General,Soft UI,"Wellness, Health",Light Pastels,⚡ Good,⚠ Low contrast,✓ Good,◐ Partial
3,Glassmorphism,General,Modern Premium,"SaaS, Financial",Translucent,⚠ Good,⚠ Ensure 4.5:1,✓ Good,✓ Full
4,Brutalism,General,Raw & Stark,"Artistic, Design",Pure Primaries,⚡ Excellent,✓ AAA,◐ Medium,✓ Full
5,3D & Hyperrealism,General,Immersive,"Gaming, E-commerce","Deep, Metallic",❌ Poor,⚠ Limited,✗ Low,◐ Partial
6,Vibrant & Block-based,General,Energetic,"Startup, Social",Neon Colors,⚡ Good,◐ Check WCAG,✓ High,✓ Full
7,Dark Mode (OLED),General,Night-Optimized,"Coding, Entertainment",Deep Black,⚡ Excellent,✓ AAA,✓ High,✓ Only
8,Accessible & Ethical,General,Inclusive,"Government, Health",High Contrast,⚡ Excellent,✓ AAA,✓ High,✓ Full
9,Claymorphism,General,Playful 3D,"Kids, Education, SaaS",Pastels,⚡ Good,⚠ Ensure 4.5:1,✓ High,◐ Partial
10,Aurora UI,General,Gradient Flow,"Creative, Premium",Vibrant Gradients,⚠ Good,⚠ Text contrast,✓ Good,✓ Full
11,Retro-Futurism,General,Neon Nostalgia,"Gaming, Music",Neon Colors,⚠ Moderate,⚠ Eye strain,◐ Medium,✓ Dark
12,Flat Design,General,2D Minimal,"Web Apps, SaaS",Solid Brights,⚡ Excellent,✓ AAA,✓ High,✓ Full
13,Skeuomorphism,General,Realistic Textures,"Gaming, Premium",Rich Realistic,❌ Poor,⚠ Readability,✗ Low,◐ Partial
14,Liquid Glass,General,Premium Fluid,"Luxury, Branding",Iridescent,⚠ Moderate-Poor,⚠ Text contrast,◐ Medium,✓ Full
15,Motion-Driven,General,Animation-Heavy,"Portfolio, Storytelling",Bold Colors,⚠ Good,⚠ Prefers-reduced,✓ Good,✓ Full
16,Micro-interactions,General,Tactile Feedback,"Mobile, Productivity",Subtle Shifts,⚡ Excellent,✓ Good,✓ High,✓ Full
17,Inclusive Design,General,Universal Access,"Public, Health",WCAG AAA,⚡ Excellent,✓ AAA,✓ High,✓ Full
18,Zero Interface,General,Voice/AI-First,"Assistants, Smart",Neutral,⚡ Excellent,✓ Excellent,✓ High,✓ Full
19,Soft UI Evolution,General,Modern Soft,"Enterprise, SaaS",Pastels+,⚡ Excellent,✓ AA+,✓ High,✓ Full
20,Hero-Centric,Landing Page,Conversion,Product Launch,Brand Primary,⚡ Good,✓ AA,✓ Full,✓ Full
21,Conversion-Optimized,Landing Page,Form-Focused,"Lead Gen, Trials",High Contrast,⚡ Excellent,✓ AA,✓ Full,✓ Full
22,Feature-Rich,Landing Page,Showcase,"Enterprise, SaaS",Brand + Cards,⚡ Good,✓ AA,✓ Good,✓ Full
23,Minimal & Direct,Landing Page,Simple,"Services, Indie",Monochromatic,⚡ Excellent,✓ AAA,✓ Full,✓ Full
24,Social Proof,Landing Page,Trust-Focused,"B2B, Professional",Brand + Trust,⚡ Good,✓ AA,✓ Full,✓ Full
25,Interactive Demo,Landing Page,Product Focus,"Tools, SaaS",Product Colors,⚠ Good,✓ AA,✓ Good,✓ Full
26,Trust & Authority,Landing Page,Credibility,"Finance, Legal",Professional,⚡ Excellent,✓ AAA,✓ Full,✓ Full
27,Storytelling,Landing Page,Narrative,"Brand, Startup",Varied,⚠ Moderate,✓ AA,✓ Good,✓ Full
28,Data-Dense,BI/Analytics,Maximum Info,"Financial, Ops",Neutral + Data,⚡ Excellent,✓ AA,◐ Medium,✓ Full
29,Heat Map Style,BI/Analytics,Intensity Viz,"Geo, Correlation",Cool→Hot Gradient,⚡ Excellent,⚠ Colorblind,◐ Medium,✓ Full
30,Executive,BI/Analytics,High-Level KPIs,"C-Suite, Summary",Brand + KPI,⚡ Excellent,✓ AA,✗ Low,✓ Full
31,Real-Time Monitor,BI/Analytics,Live Updates,"DevOps, Trading",Status Indicators,⚡ Good,✓ AA,◐ Medium,✓ Full
32,Drill-Down,BI/Analytics,Hierarchical,"Sales, Analytics",Breadcrumb Colors,⚡ Good,✓ AA,◐ Medium,✓ Full
33,Comparative,BI/Analytics,Period vs Period,"Sales, Benchmark",Compare Colors,⚡ Excellent,✓ AA,◐ Medium,✓ Full
34,Predictive,BI/Analytics,Forecast+AI,"Planning, Anomaly",Trend + Confidence,⚠ Good,✓ AA,◐ Medium,✓ Full
35,User Behavior,BI/Analytics,Conversion Funnel,"Product, Retention",Funnel Colors,⚡ Good,✓ AA,✓ Good,✓ Full
36,Financial,BI/Analytics,Revenue/Profit,"Accounting, Banking",Profit/Loss Colors,⚡ Excellent,✓ AAA,✗ Low,✓ Full
37,Sales Intelligence,BI/Analytics,Deal Pipeline,"CRM, Sales Mgmt",Pipeline Colors,⚡ Good,✓ AA,◐ Medium,✓ Full
38,Neubrutalism,General,Playful Bold,"Gen Z, Startups",Yellow + Primary,⚡ Excellent,✓ AAA,✓ High,✓ Full
39,Bento Box Grid,General,Modular Layout,"Dashboards, Apple-style",Neutral + Accent,⚡ Excellent,✓ AA,✓ High,✓ Full
40,Y2K Aesthetic,General,Retro Nostalgia,"Fashion, Gen Z",Pink + Cyan + Chrome,⚠ Good,⚠ Check,✓ Good,◐ Partial
41,Cyberpunk UI,General,Sci-Fi Dark,"Gaming, Crypto",Neon on Black,⚠ Moderate,⚠ Limited,◐ Medium,✓ Only
42,Organic Biophilic,General,Natural Wellness,"Wellness, Eco",Green + Earth,⚡ Excellent,✓ AA,✓ High,✓ Full
43,AI-Native UI,General,Conversational,"AI, Chatbots",Neutral + Purple,⚡ Excellent,✓ AA,✓ High,✓ Full
44,Memphis Design,General,80s Playful,"Creative, Youth",Geometric Neon,⚡ Excellent,⚠ Check,✓ Good,✓ Full
45,Vaporwave,General,Retro Synth,"Music, Gaming",Pink + Cyan + Purple,⚠ Moderate,⚠ Poor,◐ Medium,✓ Dark
46,Dimensional Layering,General,Depth Cards,"Dashboards, SaaS",Neutral + Shadows,⚠ Good,⚠ Moderate,✓ Good,✓ Full
47,Exaggerated Minimalism,General,Bold Minimal,"Fashion, Agency",Black + White,⚡ Excellent,✓ AA,✓ High,✓ Full
48,Kinetic Typography,General,Motion Text,"Hero, Marketing",Flexible Bold,⚠ Moderate,❌ Poor,✓ Good,✓ Full
49,Parallax Storytelling,General,Scroll Narrative,Brand Stories,Story-dependent,❌ Poor,❌ Poor,✗ Low,✓ Full
50,Swiss Modernism 2.0,General,Grid Rational,"Corporate, Editorial",B&W + Accent,⚡ Excellent,✓ AAA,✓ High,✓ Full
1 # Style Name Type Category Best For Primary Colors Performance Accessibility Mobile Dark Mode
2 1 Minimalism & Swiss Style General Clean & Functional Enterprise, Dashboards Black & White ⚡ Excellent ✓ AAA ✓ High ✓ Full
3 2 Neumorphism General Soft UI Wellness, Health Light Pastels ⚡ Good ⚠ Low contrast ✓ Good ◐ Partial
4 3 Glassmorphism General Modern Premium SaaS, Financial Translucent ⚠ Good ⚠ Ensure 4.5:1 ✓ Good ✓ Full
5 4 Brutalism General Raw & Stark Artistic, Design Pure Primaries ⚡ Excellent ✓ AAA ◐ Medium ✓ Full
6 5 3D & Hyperrealism General Immersive Gaming, E-commerce Deep, Metallic ❌ Poor ⚠ Limited ✗ Low ◐ Partial
7 6 Vibrant & Block-based General Energetic Startup, Social Neon Colors ⚡ Good ◐ Check WCAG ✓ High ✓ Full
8 7 Dark Mode (OLED) General Night-Optimized Coding, Entertainment Deep Black ⚡ Excellent ✓ AAA ✓ High ✓ Only
9 8 Accessible & Ethical General Inclusive Government, Health High Contrast ⚡ Excellent ✓ AAA ✓ High ✓ Full
10 9 Claymorphism General Playful 3D Kids, Education, SaaS Pastels ⚡ Good ⚠ Ensure 4.5:1 ✓ High ◐ Partial
11 10 Aurora UI General Gradient Flow Creative, Premium Vibrant Gradients ⚠ Good ⚠ Text contrast ✓ Good ✓ Full
12 11 Retro-Futurism General Neon Nostalgia Gaming, Music Neon Colors ⚠ Moderate ⚠ Eye strain ◐ Medium ✓ Dark
13 12 Flat Design General 2D Minimal Web Apps, SaaS Solid Brights ⚡ Excellent ✓ AAA ✓ High ✓ Full
14 13 Skeuomorphism General Realistic Textures Gaming, Premium Rich Realistic ❌ Poor ⚠ Readability ✗ Low ◐ Partial
15 14 Liquid Glass General Premium Fluid Luxury, Branding Iridescent ⚠ Moderate-Poor ⚠ Text contrast ◐ Medium ✓ Full
16 15 Motion-Driven General Animation-Heavy Portfolio, Storytelling Bold Colors ⚠ Good ⚠ Prefers-reduced ✓ Good ✓ Full
17 16 Micro-interactions General Tactile Feedback Mobile, Productivity Subtle Shifts ⚡ Excellent ✓ Good ✓ High ✓ Full
18 17 Inclusive Design General Universal Access Public, Health WCAG AAA ⚡ Excellent ✓ AAA ✓ High ✓ Full
19 18 Zero Interface General Voice/AI-First Assistants, Smart Neutral ⚡ Excellent ✓ Excellent ✓ High ✓ Full
20 19 Soft UI Evolution General Modern Soft Enterprise, SaaS Pastels+ ⚡ Excellent ✓ AA+ ✓ High ✓ Full
21 20 Hero-Centric Landing Page Conversion Product Launch Brand Primary ⚡ Good ✓ AA ✓ Full ✓ Full
22 21 Conversion-Optimized Landing Page Form-Focused Lead Gen, Trials High Contrast ⚡ Excellent ✓ AA ✓ Full ✓ Full
23 22 Feature-Rich Landing Page Showcase Enterprise, SaaS Brand + Cards ⚡ Good ✓ AA ✓ Good ✓ Full
24 23 Minimal & Direct Landing Page Simple Services, Indie Monochromatic ⚡ Excellent ✓ AAA ✓ Full ✓ Full
25 24 Social Proof Landing Page Trust-Focused B2B, Professional Brand + Trust ⚡ Good ✓ AA ✓ Full ✓ Full
26 25 Interactive Demo Landing Page Product Focus Tools, SaaS Product Colors ⚠ Good ✓ AA ✓ Good ✓ Full
27 26 Trust & Authority Landing Page Credibility Finance, Legal Professional ⚡ Excellent ✓ AAA ✓ Full ✓ Full
28 27 Storytelling Landing Page Narrative Brand, Startup Varied ⚠ Moderate ✓ AA ✓ Good ✓ Full
29 28 Data-Dense BI/Analytics Maximum Info Financial, Ops Neutral + Data ⚡ Excellent ✓ AA ◐ Medium ✓ Full
30 29 Heat Map Style BI/Analytics Intensity Viz Geo, Correlation Cool→Hot Gradient ⚡ Excellent ⚠ Colorblind ◐ Medium ✓ Full
31 30 Executive BI/Analytics High-Level KPIs C-Suite, Summary Brand + KPI ⚡ Excellent ✓ AA ✗ Low ✓ Full
32 31 Real-Time Monitor BI/Analytics Live Updates DevOps, Trading Status Indicators ⚡ Good ✓ AA ◐ Medium ✓ Full
33 32 Drill-Down BI/Analytics Hierarchical Sales, Analytics Breadcrumb Colors ⚡ Good ✓ AA ◐ Medium ✓ Full
34 33 Comparative BI/Analytics Period vs Period Sales, Benchmark Compare Colors ⚡ Excellent ✓ AA ◐ Medium ✓ Full
35 34 Predictive BI/Analytics Forecast+AI Planning, Anomaly Trend + Confidence ⚠ Good ✓ AA ◐ Medium ✓ Full
36 35 User Behavior BI/Analytics Conversion Funnel Product, Retention Funnel Colors ⚡ Good ✓ AA ✓ Good ✓ Full
37 36 Financial BI/Analytics Revenue/Profit Accounting, Banking Profit/Loss Colors ⚡ Excellent ✓ AAA ✗ Low ✓ Full
38 37 Sales Intelligence BI/Analytics Deal Pipeline CRM, Sales Mgmt Pipeline Colors ⚡ Good ✓ AA ◐ Medium ✓ Full
39 38 Neubrutalism General Playful Bold Gen Z, Startups Yellow + Primary ⚡ Excellent ✓ AAA ✓ High ✓ Full
40 39 Bento Box Grid General Modular Layout Dashboards, Apple-style Neutral + Accent ⚡ Excellent ✓ AA ✓ High ✓ Full
41 40 Y2K Aesthetic General Retro Nostalgia Fashion, Gen Z Pink + Cyan + Chrome ⚠ Good ⚠ Check ✓ Good ◐ Partial
42 41 Cyberpunk UI General Sci-Fi Dark Gaming, Crypto Neon on Black ⚠ Moderate ⚠ Limited ◐ Medium ✓ Only
43 42 Organic Biophilic General Natural Wellness Wellness, Eco Green + Earth ⚡ Excellent ✓ AA ✓ High ✓ Full
44 43 AI-Native UI General Conversational AI, Chatbots Neutral + Purple ⚡ Excellent ✓ AA ✓ High ✓ Full
45 44 Memphis Design General 80s Playful Creative, Youth Geometric Neon ⚡ Excellent ⚠ Check ✓ Good ✓ Full
46 45 Vaporwave General Retro Synth Music, Gaming Pink + Cyan + Purple ⚠ Moderate ⚠ Poor ◐ Medium ✓ Dark
47 46 Dimensional Layering General Depth Cards Dashboards, SaaS Neutral + Shadows ⚠ Good ⚠ Moderate ✓ Good ✓ Full
48 47 Exaggerated Minimalism General Bold Minimal Fashion, Agency Black + White ⚡ Excellent ✓ AA ✓ High ✓ Full
49 48 Kinetic Typography General Motion Text Hero, Marketing Flexible Bold ⚠ Moderate ❌ Poor ✓ Good ✓ Full
50 49 Parallax Storytelling General Scroll Narrative Brand Stories Story-dependent ❌ Poor ❌ Poor ✗ Low ✓ Full
51 50 Swiss Modernism 2.0 General Grid Rational Corporate, Editorial B&W + Accent ⚡ Excellent ✓ AAA ✓ High ✓ Full