ui-ux-pro-max

Generate UI/UX design systems with style, color, typography, and component specs.

Updated Apr 7, 2026
One-click install
npx skills add https://github.com/felipesantiago-coder/fluxo-quadra --skill ui-ux-pro-max-felipesantiago-coder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/felipesantiago-coder/fluxo-quadra/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/felipesantiago-coder/fluxo-quadra --skill ui-ux-pro-max-felipesantiago-coder

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates the guesswork and back-and-forth in UI/UX design by providing instant, intelligent recommendations for layouts, styles, colors, typography, and implementation code across multiple frameworks and platforms.

Core Features & Use Cases

  • Design System Generation: Automatically generates complete design systems including color palettes, typography pairings, spacing scales, shadow depths, and component specs tailored to your product type and industry.
  • Multi-Platform Support: Provides stack-specific guidelines for React, Next.js, Vue, Svelte, Tailwind CSS, SwiftUI, React Native, Flutter, and more.
  • Intelligent Search: Uses BM25-powered search across 67 UI styles, 96 color palettes, 57 font pairings, and 100 industry-specific reasoning rules to find the perfect match for your project.

Quick Start

Use the ui-ux-pro-max skill to generate a complete design system for a SaaS dashboard with dark mode and React.

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 for a React and Tailwind project?▼

Generate a complete UI design system by specifying your product type and platform. The skill searches its databases to deliver tailored color palettes, typography pairings, spacing scales, and stack-specific component specifications for frameworks like React and Tailwind.

What is the best way to match industry-specific color palettes and typography to my web application?▼

The best way to match color palettes and typography to your web app is using a BM25-powered search across 96 palettes, 57 font pairings, and 100 industry rules. This finds the perfect style match based on your specific product context.

Can I use this for frontend implementation across Vue, Svelte, and React Native?▼

Yes, you can use this for frontend implementation across Vue, Svelte, and React Native. It provides stack-specific guidelines and implementation code for multiple frameworks including Next.js, SwiftUI, and Flutter.

Do I need Python to run the BM25 search for UX design recommendations?▼

Yes, you need Python 3.x to run the BM25 search engine. The skill relies on Python to query its CSV-based design intelligence databases and deliver actionable UI/UX recommendations.

How does automated style selection work for mobile app interfaces?▼

Automated style selection works by querying a database of 67 UI styles using an intelligent search engine. It analyzes your mobile app requirements and applies industry-specific reasoning rules to recommend the most suitable interface design.