ui-ux-pro-max

UI/UX Pro Max is a sophisticated design intelligence engine designed for software agents to maintain high-quality, consistent, and accessible user interfaces. It functions as a searchable database that bridges the gap between raw design intent and technical implementation. By integrating 50+ styles, 97 distinct color palettes, 57 expert font pairings, and 99 granular UX guidelines, it empowers agents to make data-driven decisions when constructing components, dashboard layouts, or landing pages. This skill is essential for developers and designers who need to ensure their products adhere to modern standards such as WCAG accessibility, performance optimization, and responsive design across diverse technology stacks including React, Vue, Next.js, and Tailwind CSS.

• Advanced design system generation using intelligent recommendation logic for specific industries like e-commerce, SaaS, and portfolios.

• Critical accessibility auditing including color contrast (4.5:1), keyboard navigation, ARIA labeling, and focus state management.

• Performance-focused UI best practices such as image optimization, reduced motion handling, and content jumping prevention.

• Comprehensive UX guidelines for touch targets (44x44px), error feedback, and loading state design for complex web/mobile applications.

• Implementation support for multiple stacks (html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn).

• Data visualization assistance featuring 25 chart types with accessibility-first color and structure recommendations.

• Input Requirements: Specify product type, industry, style keywords, and target technology stack for tailored output.

• Usage Workflow: Always trigger the primary search with the --design-system flag to generate foundational patterns before iterating with specialized domain queries (style, typography, ux, charts, landing).

• Constraints: Follow the defined priority levels (Critical to Low) to resolve conflicts, prioritizing accessibility and interaction integrity over aesthetic choices.

• Operational Tips: Utilize the CLI-based search tool to quickly retrieve specific CSS utility classes or design tokens matching the project's visual identity, ensuring consistency across all pages and components.