Ui Ux Pro Max
Design websites, apps & dashboards with 50 styles, 21 palettes & 8 tech stacks
What You Can Do
You can plan, build, and optimize complete UI/UX solutions for websites, dashboards, e-commerce platforms, and mobile apps. The skill provides curated design patterns (glassmorphism, minimalism, neumorphism, bento grids), 21 color palettes, 50 font pairings, 20+ chart types, and implementation guidance for 8 development stacks. Whether you're reviewing existing code, improving accessibility, or creating animations, you get framework-specific recommendations and responsive design strategies.
Features
glassmorphism, claymorphism, brutalism, neumorphism, bento grids, dark mode, flat design, and more
pre-curated combinations optimized for different industries and aesthetics
scientifically paired typography for headers, body text, and UI elements
bar, line, pie, heatmap, scatter, and specialized data visualization templates
React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and Tailwind CSS
pre-designed buttons, modals, navbars, sidebars, cards, tables, forms, and charts
analyze, refactor, and improve existing UI/UX code for performance and accessibility
spacing, shadows, gradients, hover states, and WCAG compliance guidance
Example Output
Example 1: SaaS Dashboard Design
- Recommended style: Minimalism with glassmorphism accents
- Color palette: Professional blues (#0F172A, #1E40AF) with neutral grays
- Font pairing: Inter (body) + Sora (headings)
- Charts: Area chart for metrics, bar chart for comparisons
- Stack: React + Tailwind CSS
- Components: Header navbar, sidebar navigation, metric cards, data tables
Example 2: E-Commerce Landing Page
- Recommended style: Bento grid layout with modern minimalism
- Color palette: Warm accent (#FF6B35) on clean white with dark text
- Font pairing: Poppins (headings) + Roboto (body)
- Animations: Smooth hover transitions on product cards
- Stack: Next.js + Tailwind CSS
- Components: Hero section, product grid, testimonial cards, CTA buttons
Example 3: Mobile App Navigation
- Recommended style: Neumorphism with subtle shadows
- Color palette: Soft pastels (#E8F4F8, #F0E6FF)
- Font pairing: Montserrat (UI labels) + Open Sans (content)
- Stack: React Native or Flutter
- Components: Bottom tab navigation, modal dialogs, form inputs with validation states
What's Included
- SKILL.md: Complete instruction file with design system database and search methodology
- Style guide template: 50 design styles with visual characteristics and best-use scenarios
- Color palette library: 21 curated palettes organized by mood, industry, and accessibility grade
- Typography framework: 50 font pairings with pairing rationale and implementation guidance
- Component checklist: 8+ UI elements with responsive variants and state management
- Stack-specific templates: Code snippets and best practices for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and Tailwind
Who It's For
- Product designers — building complete design systems and component libraries
- Full-stack developers — implementing pixel-perfect designs with framework-specific guidance
- UX/UI engineers — optimizing accessibility, animations, and responsive behavior
- Startup founders — rapidly prototyping and designing SaaS platforms and landing pages
- Design systems teams — establishing consistent patterns across web and mobile products
Best For
- Designing websites, landing pages, and marketing sites from scratch
- Building dashboards, admin panels, and data visualization interfaces
- Creating e-commerce platforms with conversion-optimized UI patterns
- Developing mobile apps with platform-specific design standards (SwiftUI, React Native, Flutter)
- Reviewing and refactoring existing UI/UX code for accessibility and performance
- Selecting color palettes and typography that match brand guidelines and accessibility standards
You might also like
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can build visually stunning interfaces by systematically applying visual hierarchy, color theory, and typography principles. Analyze inspiration from design platforms, generate and iterate on design images until they meet aesthetic standards, and create comprehensive design systems that ensure your interfaces are not only beautiful but also accessible and functionally sound.
by trungtv
You can process multimedia content across multiple formats: transcribe audio files up to 9.5 hours with timestamps and speaker identification, analyze images for objects, text, and visual relationships, extract structured data from PDF documents including tables and charts, and generate images from text prompts with refinement capabilities. This skill unifies fragmented multimodal workflows into one coherent Claude-powered interface, eliminating context-switching between different tools.
by trungtv
Design production-ready UI components that serve as foundations for scalable design systems. You define clear component APIs, TypeScript/JSDoc prop interfaces, comprehensive variant systems (states, sizes, themes, interactions), and full accessibility markup including ARIA labels and semantic HTML. Claude generates complete Storybook stories and documentation to enable seamless developer handoff and cross-team component consumption.
by az9713
You can quickly integrate RemixIcon into web applications, mobile apps, and design systems to add professional, consistent iconography. The skill guides you through multiple implementation methods—webfonts, SVG, React components, and Vue—so you can choose the approach that fits your project architecture. You'll learn naming conventions, styling techniques, and best practices for maintaining visual consistency across navigation, buttons, status indicators, and custom components.
You can generate production-ready web interfaces, dashboards, forms, and navigation structures grounded in actual design system best practices. This skill provides access to 60+ documented UI component patterns sourced from industry standards, ensuring your designs follow modern conventions for restraint, typography hierarchy, color strategy, and spacing. Every interface Claude generates will feel polished and professional—not templated.
This skill generates structured, maintainable documentation that serves as your design system's single source of truth. You'll produce professional spec sheets, token architecture guides, component usage patterns, accessibility compliance requirements, and developer implementation guides—all formatted for different audiences from designers to engineers. It eliminates gaps between design intent and code by creating clear governance frameworks and contribution guidelines.
by calesthio
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv