ui-ux-pro-max

Generate design systems with styles, colors, typography, and UX guidelines.

Updated Nov 2, 2025
One-click install
npx skills add https://github.com/3balljugglerYu/ai_coordinate --skill ui-ux-pro-max-3balljuggleryu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/3balljugglerYu/ai_coordinate/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/3balljugglerYu/ai_coordinate --skill ui-ux-pro-max-3balljuggleryu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design guidance, helping users create visually appealing, accessible, and performant interfaces across various technology stacks.

Core Features & Use Cases

  • Design System Generation: Creates detailed design systems based on project requirements, including patterns, styles, colors, and typography.
  • Stack-Specific Guidelines: Offers best practices for implementing designs in specific frameworks like React, Next.js, Vue, and more.
  • Use Case: When building a new SaaS dashboard, use this Skill to generate a complete design system, ensuring consistency, accessibility, and adherence to modern UX principles.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a 'beauty spa wellness service' project.

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 new web application?

To generate a design system, you provide your project requirements and the Skill outputs detailed patterns, color palettes, font pairings, and UX guidelines. This ensures visual consistency, accessibility, and adherence to modern UX principles across your application.

What is the best way to ensure UI/UX accessibility in frontend development?

To ensure UI/UX accessibility in frontend development, apply comprehensive design intelligence that covers accessible color palettes, readable font pairings, and strict UX guidelines. This approach guarantees your web and mobile interfaces remain visually appealing and accessible.

Can I get stack-specific UI component guidelines for React and Next.js?

Yes, you can get stack-specific UI component guidelines for frameworks like React and Next.js. The Skill provides implementation best practices and code review guidance tailored to your specific frontend development stack.

Does this Skill provide chart types and data visualization guidance for dashboards?

Yes, this Skill provides chart types and data visualization guidance suitable for building SaaS dashboards. It supplies comprehensive UI/UX design intelligence, ensuring your dashboard components are performant, accessible, and visually consistent.

How do I create a style guide for a mobile application interface?

You create a style guide for a mobile application interface by defining project requirements, which generates a complete design system including typography, colors, and UX guidelines. This ensures your mobile interface maintains visual consistency and accessibility standards.

What are the limitations of using an automated design system generator?

The limitations of an automated design system generator involve its reliance on provided project requirements to output patterns and styles. You must integrate the generated design intelligence and component guidelines into your specific frontend stack manually.