ui-ux-pro-max-plus_skill

Overview

This skill is a professional UI/UX design resource library that helps create polished, production-ready interfaces. It bundles searchable design patterns, 50+ UI styles, 100+ color palettes, curated font pairings, chart guidance, and UX patterns. Use it to speed up visual decisions and maintain consistent design systems across projects.

How this skill works

The skill provides organized reference documents for UI styles, color palettes, typography, chart types, components, and UX patterns. You search or browse the catalog to select a style, pick a palette and font pairing, and apply recommended components and spacing rules. It also includes practical snippets (e.g., Tailwind examples), responsive breakpoint guidance, and a decision framework to align choices with users and brand.

When to use it

• Starting a new UI or product design to set the overall style and rules
• Choosing or validating a color scheme for brand, product, or theme
• Selecting complementary fonts for headings and body text
• Designing data visualizations and choosing appropriate chart types
• Applying UX patterns for onboarding, navigation, forms, and error states

Best practices

• Pick one primary UI style and limit supporting accents to 2–3 elements
• Limit color palette to five roles: primary, secondary, neutral, success, error
• Use at most two typefaces: one for headings and one for body text
• Prioritize consistency in spacing, components, and interactions across screens
• Design mobile-first using recommended breakpoints and an 8px spacing system

Example use cases

• Rapidly define a design system for a SaaS dashboard: choose Minimalist UI, blue-cyan palette, Inter + JetBrains Mono pairing
• Create a retail app style: select Modern E‑commerce, rose-violet palette, and product-focused components
• Build a healthcare portal: pick Teal/Emerald palette with clear typography and accessible charts
• Design social app visuals: choose Soft UI/Neumorphism, friendly fonts, and engagement-first interaction patterns
• Select chart types for a BI tool using the chart guide to match data distribution and user goals