Agent skill · design visual · bighardperson
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Why this skill is useful
Provides a comprehensive design guide with specific UX guidelines and domain knowledge that the AI wouldn't reliably generate on its own.
What it needs
Requires python installed locally. About 8k tokens when loaded. Last updated 2026-04-26. 34 stars on the source repository.
What this skill does
UI/UX Pro Max - Design Intelligence Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations. When to Apply Reference these guidelines when: Designing new UI components or pages Choosing color palettes and typography Reviewing code for UX issues Building landing pages or dashboards Implementing accessibility requirements Rule Categories by Priority Priority Category Impact Domain ---------- ---------- -------- -------- 1 Accessibility CRITICAL ux 2 Touch & Interaction CRITICAL ux 3 Performance HIGH ux 4 Layout & Responsive HIGH ux 5 Typography & Color MEDIUM typography, color 6 Animation MEDIUM ux 7 Style Selection MEDIUM style, product 8 Charts & Data LOW chart Quick Reference 1. Accessibility (CRITICAL) color-contrast - Minimum 4.5:1 ratio for normal text focus-states - Visible focus rings on interactive elements alt-text - Descriptive alt text for meaningful images aria-labels - aria-label for icon-only buttons keyboard-nav - Tab order matches visual order form-labels - Use label with for attribute 2. Touch & Interaction (CRITICAL) touch-target-size - Minimum 44x44px touch targets hover-vs-tap - Use click/tap for primary interactions loading-buttons - Disable button during async operations error-feedback - Clear error messages near problem cursor-pointer - Add cursor-pointer to clickable elements 3. Performance (HIGH) image-optimization - Use WebP, srcset, lazy loading reduced-motion - Check prefers-reduced-motion content-jumping - Reserve space for async content 4. Layout & Responsive (HIGH) viewport-meta - width=device-width initial-scale=1 readable-font-size - Minimum 16px body text on mobile horizontal-scroll - Ensure content fits viewport width z-index-management - Define z-index scale (10, 20, 30, 50) 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills bighardperson/ui-ux-pro-max-2