Does it use emojis for icons in the generated code?

No, the skill specifically enforces a 'No Emoji Icons' rule, directing Claude to use high-quality SVG libraries like Heroicons, Lucide, or Simple Icons for a professional look.

Can it help with web accessibility (a11y)?

Yes, it includes specific search domains and guidelines for UX best practices, color contrast, and keyboard navigation to ensure interfaces meet modern accessibility standards.

How does this skill improve Claude's UI generation?

It provides a structured database of professional design patterns, color theories, and typography, preventing generic or unprofessional AI-generated layouts by enforcing real-world design standards.

How do I activate the design intelligence?

Simply mention keywords like 'beautiful', 'aesthetic', or 'stunning' in your request, and Claude will use the skill to plan the design system before implementation.

Which frameworks does UI/UX Pro Max support?

It supports a wide range of stacks including HTML/Tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, and Flutter.

UI/UX Pro Max

Name: UI/UX Pro Max
Author: hotriluan

byhotriluan

Design Tools

Empowers Claude with professional design intelligence to build stunning, accessible, and production-grade user interfaces across web and mobile frameworks.

About

UI/UX Pro Max is a comprehensive design intelligence system for Claude Code that bridges the gap between functional code and professional aesthetics. It provides instant access to a curated database of over 50 UI styles, 21 color palettes, and 50 typography pairings, along with platform-specific guidelines for major web and mobile frameworks like React, Next.js, and Flutter. By enforcing professional design rules—such as proper SVG icon usage, accessibility standards, and refined spacing—this skill ensures that Claude generates modern, high-fidelity interfaces like Glassmorphism or Bento Grids while avoiding common AI design pitfalls.

Key Features

Framework-specific optimization for React, Next.js, Vue, Svelte, and Mobile (SwiftUI/Flutter)
Built-in pre-delivery checklist to ensure high-quality, professional code output
Curated color palettes and typography pairings with Google Fonts integration
Database of 50+ UI styles including Glassmorphism, Neumorphism, and Brutalism
0 GitHub stars
UX best practices for accessibility, animations, and responsive layouts

Use Cases

Modernizing legacy UI codebases by applying sophisticated design systems and dark mode support
Creating complex SaaS dashboards with data-driven chart recommendations and consistent spacing
Building high-converting landing pages with optimized hero sections and social proof layouts

About

Key Features

Framework-specific optimization for React, Next.js, Vue, Svelte, and Mobile (SwiftUI/Flutter)
Built-in pre-delivery checklist to ensure high-quality, professional code output
Curated color palettes and typography pairings with Google Fonts integration
Database of 50+ UI styles including Glassmorphism, Neumorphism, and Brutalism
0 GitHub stars
UX best practices for accessibility, animations, and responsive layouts

Use Cases

Modernizing legacy UI codebases by applying sophisticated design systems and dark mode support
Creating complex SaaS dashboards with data-driven chart recommendations and consistent spacing
Building high-converting landing pages with optimized hero sections and social proof layouts