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.