ui-ux-pro-max_skill

Overview

This skill provides frontend UI/UX design best practices and ready guidance for web and mobile projects. It combines a searchable design database (styles, palettes, fonts, charts) with stack-specific implementation notes to help design, build, review, and optimize interfaces for sites and apps. Use it to generate concrete UI recommendations, component patterns, and a pre-delivery checklist.

How this skill works

The skill inspects project context (product type, style keywords, industry, target stack) and returns tailored recommendations: color palettes, typography pairings, layout patterns, component rules, accessibility checks, and chart suggestions. It supports multiple stacks with a default html-tailwind path and offers concrete actionable steps for building or refactoring UI elements. Outputs include style guidance, implementation notes, and a verification checklist for quality and accessibility.

When to use it

• Designing or updating pages: landing, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, or mobile app.
• Creating or refining components: buttons, modals, navbars, sidebars, cards, tables, forms, charts.
• Requesting stack-specific guidance (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn).
• Performing UI/UX reviews, audits, fixes, or optimization before delivery.
• Choosing visual systems: color palettes, font pairings, spacing, light/dark mode rules.

Best practices

• Start by extracting product type, style keywords, industry, and preferred stack before proposing a design.
• Default to html-tailwind if stack is unspecified, and provide stack-specific adjustments when requested.
• Use SVG icon sets (Heroicons/Lucide) and consistent viewBox sizing; avoid emojis as UI icons.
• Ensure hover/focus states provide feedback without layout shift and transitions use 150–300ms.
• Validate accessibility: alt text, form labels, color contrast (4.5:1 minimum), and prefers-reduced-motion.

Example use cases

• Build a responsive hero-focused landing page with an elegant palette and clear CTA hierarchy.
• Design a SaaS dashboard: choose charts, spacing rules, and dark mode contrast adjustments.
• Refactor a mobile app form: improve labels, validation feedback, and touch target sizes.
• Review an admin panel for accessibility issues and fix focus states, keyboard navigation, and contrast.
• Create a component library sample (buttons, cards, modals) with Tailwind utilities and shadcn examples.