ui-ux-pro-max_skill

Overview

This skill provides design intelligence for creating and refining frontend UI/UX across websites, landing pages, dashboards, and product interfaces. It offers a searchable database of styles, color palettes, font pairings, chart recommendations, UX guidelines, and stack-specific implementation tips. Use it to speed up design decisions and produce consistent, production-ready interfaces.

How this skill works

The skill analyzes product type, style keywords, industry, and target stack to generate tailored UI recommendations. It searches style, typography, color, layout, chart, and UX domains to assemble a complete design system and stack-specific implementation notes. Results include palettes, font pairings, component guidelines, accessibility checks, and pre-delivery checklist items.

When to use it

• Designing a new landing page, dashboard, or product interface
• Refining visual systems: colors, typography, icons, spacing
• Selecting chart types and data visualization patterns for analytics
• Implementing UI with best practices for React, Next.js, Vue, Svelte, SwiftUI, React Native, or Flutter
• Auditing UI for accessibility, responsiveness, and interaction quality

Best practices

• Start by identifying product type, style keywords, industry, and preferred stack
• Use consistent SVG icon sets and standardize icon sizing (24x24 viewBox)
• Define a single container max-width and consistent spacing scale across pages
• Prefer semantic HTML and Tailwind-like utility classes when stack unspecified
• Ensure contrast ratios (4.5:1 for body text) and visible focus states for accessibility
• Test both light and dark modes and verify no layout shift on hover or focus

Example use cases

• Create a hero-first landing page for a beauty or wellness service with an elegant palette and font pairing
• Design a SaaS analytics dashboard with recommended chart types, color semantics, and responsive layouts
• Audit a mobile app UI for accessibility, consistent iconography, and smooth interaction transitions
• Generate stack-specific implementation notes for migrating a design system to Next.js or React Native
• Produce a pre-delivery checklist to validate visual quality, interaction, layout, and accessibility