ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography for web and mobile interfaces.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/luicabref97/sushi-jungle-web --skill ui-ux-pro-max-luicabref97
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/luicabref97/sushi-jungle-web/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/luicabref97/sushi-jungle-web --skill ui-ux-pro-max-luicabref97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Bridges the gap between product intent and production-ready interfaces by providing actionable UI/UX guidance, accessible design rules, and ready-to-apply design systems that reduce design debt and accelerate implementation.

Core Features & Use Cases

  • Design system generation: Produces a complete design system including styles, color palettes, typography pairings, spacing, and component recommendations tailored to product type and platform.
  • Accessibility & UX audits: Prioritizes accessibility, touch interaction, performance, and layout rules with concrete checks and anti-patterns to fix.
  • Practical implementation: Offers stack-aware guidance and CLI-driven search/persist workflows for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind and HTML/CSS projects.
  • Use case: Create a consistent, accessible dashboard design system with color tokens, component states, responsive breakpoints, and persisted overrides for page-level customizations.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a React dashboard by running the CLI search with your product, industry, and style keywords and the --design-system flag.

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

You can generate an accessible React dashboard design system by running a CLI search with product, industry, and style keywords using the --design-system flag. This produces persisted files containing color tokens, typography pairings, component states, and responsive breakpoints.

What is the best way to ensure UI accessibility and touch interaction rules in mobile apps?

The best way to ensure UI accessibility and touch interaction rules in mobile apps is to perform an accessibility and UX audit. This process prioritizes concrete checks and identifies anti-patterns to fix across layout, performance, and touch interaction for platforms like React Native, Flutter, and SwiftUI.

Can I use this UI/UX guidance with Tailwind, Next.js, and SwiftUI projects?

Yes, you can use this UI/UX guidance with Tailwind, Next.js, and SwiftUI projects. It offers stack-aware guidance and CLI-driven workflows for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and HTML/CSS to ensure practical implementation across your chosen platform.

How do I create color palettes and typography pairings for an e-commerce site?

To create color palettes and typography pairings for an e-commerce site, you apply design system generation tailored to your product type. This yields ready-to-apply styles, spacing rules, and component guidelines that bridge product intent and production-ready interfaces.

Does generating a design system include component state guidelines and responsive breakpoints?

Yes, generating a design system includes component state guidelines and responsive breakpoints. The output provides complete design systems with styles, spacing, component recommendations, and persisted overrides for page-level customizations to reduce design debt and accelerate implementation.