ui-ux-pro-max

Generate UI and UX guidance for web and mobile interfaces.

Updated Mar 17, 2026
One-click install
npx skills add https://github.com/AutomatedMarketer/claude-skills --skill ui-ux-pro-max-automatedmarketer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/AutomatedMarketer/claude-skills/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/AutomatedMarketer/claude-skills --skill ui-ux-pro-max-automatedmarketer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps turn vague UI ideas into polished, usable interfaces by enforcing strong visual design, accessibility, responsive behavior, and interaction quality.

Core Features & Use Cases

  • Creates complete design systems for landing pages, dashboards, admin panels, SaaS products, e-commerce flows, portfolios, blogs, and mobile apps.
  • Recommends styles, color palettes, font pairings, layouts, motion patterns, navigation structures, and chart treatments across major frontend stacks.
  • Reviews existing UI for accessibility, spacing, hierarchy, touch targets, state handling, and consistency so interfaces feel professional and production-ready.

Quick Start

Ask the ui-ux-pro-max skill to analyze your product and return a complete UI design system with style, colors, typography, layout, and accessibility recommendations.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a complete UI design system with color palettes and typography?

To generate a UI design system, provide your product details to receive style recommendations, color palettes, font pairings, layout structures, and motion patterns. This applies priority-based design rules that validate visual hierarchy and typography quality across web and mobile interfaces.

Can I review existing UI for accessibility and touch target issues?

Yes, you can review existing UI for accessibility, spacing, hierarchy, touch targets, state handling, and consistency. The process applies validation rules to identify interaction quality issues so your interfaces feel professional and production-ready.

Does this UI design guidance work with React, Next.js, Vue, and Svelte?

Yes, the UI design guidance supports cross-platform implementation across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS. It provides component creation and responsive layout decisions tailored to these frontend stacks.

What's the best way to style charts and data visualizations for dashboards?

The best way to style charts is to apply design rules that validate data visualization quality within your dashboard layouts. You receive chart treatments and navigation structures that ensure data visualizations maintain accessibility and visual hierarchy across admin panels and SaaS products.

How do I ensure responsive layout decisions for mobile apps and landing pages?

To ensure responsive layout decisions, the process evaluates layout quality and touch target sizing using priority-based design rules. You receive responsive behavior recommendations for landing pages, blogs, e-commerce flows, and mobile apps that adapt cleanly across devices.

Why does my UI design system need priority-based validation rules?

Your UI design system needs priority-based validation rules to enforce accessibility, layout, typography, color, animation, navigation, and data visualization quality. Without these rules, vague UI ideas fail to translate into polished, usable interfaces that maintain professional visual design standards.