ui-ux-pro-max

Generate UI/UX design systems with styles, palettes, typography, and UX rules.

Updated Feb 22, 2026
One-click install
npx skills add https://github.com/KaranKathur06/Metal-Hub --skill ui-ux-pro-max-karankathur06
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/KaranKathur06/Metal-Hub/tree/main/.cursor/skills/ui-ux-pro-max
Command: npx skills add https://github.com/KaranKathur06/Metal-Hub --skill ui-ux-pro-max-karankathur06

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill eliminates inconsistent UI/UX decisions by providing accessible, stack-aware design rules that help you design interfaces that look better and behave correctly for real users.

Core Features & Use Cases

  • Accessibility-first guidelines: Ensures contrast, focus states, keyboard navigation, and labeled forms are consistently applied during UI review and implementation.
  • Interaction and layout standards: Covers touch targets, hover vs tap behavior, z-index management, responsive sizing, and anti-patterns that commonly break UX.
  • Design-system generation workflow: Produces a design system across style, color, typography, effects, charts, and stacks (React/Next.js/Vue/Svelte/SwiftUI/React Native/Flutter/Tailwind/shadcn/ui) including recommendations and anti-patterns.

Quick Start

Use the ui-ux-pro-max workflow to generate a design system by running: python3 skills/ui-ux-pro-max/scripts/search.py "saas fintech dashboard accessibility dark mode responsive" --design-system -p "Metal-Hub Dashboard".

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 design system for a React dashboard?

Generate a design system for a React dashboard by running the search workflow script with relevant domain keywords. This outputs stack-aware UI rules, color palettes, typography pairings, and layout recommendations tailored to your project context.

What UX rules are needed for accessible responsive web interfaces?

Accessible responsive web interfaces require UX rules covering contrast, focus states, keyboard navigation, labeled forms, touch targets, and z-index management. These constraints ensure interactions behave correctly across varying screen sizes for real users.

Can I use this design system workflow with Tailwind and Next.js?

Yes, the design system workflow supports Tailwind and Next.js along with Vue, Svelte, SwiftUI, React Native, and Flutter. It outputs stack-aware style recommendations and anti-patterns specific to your chosen frontend framework.

What is the best way to ensure consistent typography and color palettes across a SaaS UI?

The best way to ensure consistent typography and color palettes across a SaaS UI is to generate a unified design system. This applies domain-specific rules to standardize styles, preventing inconsistent visual decisions during implementation.

Does the UI guidance cover chart and layout recommendations for admin panels?

Yes, the UI guidance covers chart and layout recommendations for admin panels. It generates specific design system instructions for web and mobile interfaces, including dashboards and SaaS UIs.

Why do my interface interactions break on mobile touch targets?

Interface interactions break on mobile touch targets when standard UX rules for responsive sizing and hover vs tap behavior are ignored. Generating an accessibility-first design system identifies these anti-patterns to correct interaction behavior.