ui-ux-pro-max_skill

Overview

This skill provides UI/UX design intelligence and hands-on implementation guidance for web and mobile products. It combines 50 UI styles, 21 color palettes, 50 font pairings, 20 chart types, and stack-specific recommendations across nine common stacks. Use it to plan, build, review, or fix interfaces for websites, dashboards, apps, and component-level UI elements.

How this skill works

I analyze your product type, style keywords, industry, and target stack to generate a tailored design system and implementation plan. The skill recommends colors, typography, spacing, accessibility checks, interaction patterns, and chart choices, then produces stack-specific code snippets or review feedback. It also runs iterative searches against curated domains (product, style, typography, color, landing, chart, ux, stack) to refine recommendations until the design goals are met.

When to use it

• Starting a new website, landing page, dashboard, admin panel, or mobile app
• Needing a style system: palette, font pairings, spacing, and interaction rules
• Preparing UI code for a specific stack (React, Vue, Next.js, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn)
• Performing a UI/UX review, accessibility audit, or pre-delivery checklist
• Refactoring or optimizing components: buttons, modals, navbars, cards, tables, forms, charts

Best practices

• Default to html-tailwind when stack is unspecified; provide stack flag for implementation-specific advice
• Use SVG icon sets (Heroicons, Lucide) and fixed viewBox sizing for consistency
• Ensure clear hover and focus states, cursor-pointer on interactive elements, and transitions of 150–300ms
• Maintain light/dark contrast ratios, test prefers-reduced-motion, and provide alt text and form labels
• Keep consistent container max-widths and responsive checks at 320, 768, 1024, and 1440px

Example use cases

• Design a SaaS analytics dashboard with recommended chart types, palettes, and Vue implementation tips
• Create a conversion-focused landing page: hero, social proof, CTAs, and responsive Tailwind markup
• Refactor a mobile app UI to use platform-appropriate patterns for React Native or SwiftUI
• Review an e-commerce product page for accessibility, spacing, and iconography consistency
• Generate font pairings and CSS variables for a brand refresh with dark mode support