UI/UX Pro Max Skill

Get instant access to 50 UI styles, 21 color palettes, 50 font pairings, and 20 chart types—all tailored to your product type and tech stack.

Just Ask Claude To…

"Design a SaaS dashboard with dark mode"
"Build a landing page for my beauty spa"
"The navbar hover effect feels janky, fix it"
"Create a fintech dashboard with trend charts"
"Review this modal for accessibility"

Claude automatically activates this skill when you’re working on UI/UX tasks.

What You’ll Get

  • Style guide with colors, effects, and framework recommendations
  • Font pairings with ready-to-use Google Fonts imports
  • Color palette (Primary, Secondary, CTA, Background, Text, Border)
  • Page structure patterns for landing pages
  • Chart recommendations for dashboards
  • Stack-specific code for your framework

Supported Stacks

html-tailwind (default) · react · nextjs · vue · svelte · swiftui · react-native · flutter

Common Use Cases

New Landing Page

Who: Startup founder launching a product

"Build a landing page for my AI writing tool targeting content creators.
Use glassmorphism style, include hero, features, pricing, and testimonials sections."

Dashboard Redesign

Who: Developer improving internal tools

"Redesign our analytics dashboard with dark mode.
Show user metrics, revenue charts, and activity feed. React + Tailwind."

E-commerce Product Page

Who: Agency building for client

"Create a luxury fashion product page with image gallery,
size selector, reviews, and related products. Minimalist aesthetic."

Mobile App Onboarding

Who: Mobile developer improving UX

"Design 4 onboarding screens for a fitness app.
Vibrant colors, progress indicator, skip option. React Native."

UI Code Review

Who: Tech lead ensuring quality

"Review this checkout form for accessibility issues and mobile responsiveness.
Check contrast, focus states, and error handling."

Pro Tips

  • Mention your product type (SaaS, e-commerce, healthcare, beauty, fintech) for tailored recommendations
  • Specify your stack to get framework-specific patterns
  • Not activating? Say: “Use the ui-ux-pro-max skill to…”

Quality Rules Claude Follows

Icons & Visual Elements

  • SVG icons only (Heroicons, Lucide)—no emojis
  • Stable hover states with color/opacity transitions
  • Verified brand logos from Simple Icons

Interaction

  • cursor-pointer on all clickable elements
  • transition-colors duration-200 for smooth feedback
  • Visible focus states for keyboard navigation

Light/Dark Mode

  • Glass cards: bg-white/80 or higher in light mode
  • Text contrast: #0F172A (slate-900) for body
  • Borders: border-gray-200 visible in light mode

Layout

  • Floating navbar with top-4 left-4 right-4 spacing
  • Responsive at 320px, 768px, 1024px, 1440px
  • No horizontal scroll on mobile

Pre-Delivery Checklist

Claude validates before delivering:

  • No emoji icons
  • Consistent icon set
  • cursor-pointer on clickables
  • Transitions 150-300ms
  • Text contrast 4.5
    +
  • Both light/dark modes tested
  • Responsive breakpoints
  • Alt text on images
  • Form labels present