ui-ux-pro-max_skill

Overview

This skill provides UI/UX design intelligence for web and mobile projects, combining style systems, color palettes, font pairings, chart guidance, and stack-specific implementation advice. It delivers prioritized UX rules, a searchable recommendation engine, and actionable workflows to plan, build, review, and optimize interfaces across common stacks.

How this skill works

The skill inspects product type, style keywords, industry, and chosen stack to generate a complete design system including patterns, colors, typography, and anti-patterns. It applies prioritized rules (accessibility, touch, performance, layout) to produce concrete recommendations and implementation notes. Use the design-system output as the single source of truth and supplement with domain-specific searches for typography, color, charts, or UX details.

When to use it

• Designing new pages or UI components (landing, dashboard, admin, mobile app)
• Choosing accessible color palettes and font pairings for a project
• Reviewing UI/UX code to find accessibility, performance, or layout issues
• Implementing style and stack-specific best practices (React, Next.js, Tailwind, shadcn/ui)
• Refactoring or optimizing an existing interface for responsiveness and interaction

Best practices

• Prioritize accessibility: 4.5:1 contrast, visible focus states, labels and alt text
• Design for touch: minimum 44x44px targets, clear tap feedback, avoid hover-only controls
• Optimize performance: lazy-load images (WebP, srcset), reserve layout space to prevent jumps
• Use consistent design tokens: spacing, max-width, z-index scale and font hierarchy
• Prefer transform/opacity for animations, and respect prefers-reduced-motion

Example use cases

• Generate a design system for a SaaS dashboard with typography, color palette, and component rules
• Create accessible landing page layouts and responsive Tailwind implementations
• Audit a mobile app UI for touch targets, keyboard navigation, and contrast issues
• Provide chart recommendations and accessible palette choices for analytics dashboards
• Refactor a component library for consistency across light/dark modes and stacks like shadcn/ui