ui-ux-pro-max

Generate design system artifacts with guidelines, patterns, and components across multiple stacks.

7|1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/fratilanico/apex-os-bad-boy --skill ui-ux-pro-max-fratilanico
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/fratilanico/apex-os-bad-boy/tree/main/ui-ux-pro-max
Command: npx skills add https://github.com/fratilanico/apex-os-bad-boy --skill ui-ux-pro-max-fratilanico

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX design consistency across projects by providing comprehensive guidelines, patterns, and reusable design system artifacts for rapid, scalable product development.

Core Features & Use Cases

  • 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.
  • Provides plan/build/design actions and project templates for websites, dashboards, admin panels, mobile apps, and more.
  • Use Case: Rapidly generate a complete design system for a SaaS dashboard that aligns typography, color, spacing, and components across React, Vue, Next.js, and SwiftUI.

Quick Start

Create a design-system-ready plan for a SaaS dashboard across multiple stacks.

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 create a consistent design system across multiple frameworks like React and Flutter?

To create a consistent design system across multiple frameworks, you need standardized guidelines and reusable artifacts. This Skill provides ready-to-use patterns, 97 color palettes, and 57 font pairings spanning React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui.

What is the best way to generate UI guidelines for a SaaS dashboard?

Generating UI guidelines for a SaaS dashboard requires structured typography, spacing, and component definitions. You can use this Skill to rapidly generate a complete design system with plan and build actions, applying 99 UX guidelines and 25 chart types specifically for dashboard layouts.

Can I use this design system tool with Tailwind and shadcn/ui?

Yes, this design system tool works directly with Tailwind and shadcn/ui. It supports both frameworks alongside React, Next.js, Vue, Svelte, SwiftUI, React Native, and Flutter, providing hierarchical master and page overrides to ensure scalable, repeatable design outcomes.

How do I apply accessibility and color guidelines to a mobile app design?

To apply accessibility and color guidelines to mobile app design, you need structured palettes and UX rules mapped to mobile stacks. This Skill provides 97 color palettes and 99 UX guidelines compatible with SwiftUI, React Native, and Flutter for rapid mobile app design generation.

How do I manage typography and font pairings for a multi-stack web project?

Managing typography for multi-stack web projects requires standardized font pairings across different view layers. This Skill provides 57 font pairings and hierarchical overrides to align typography and spacing consistently across React, Next.js, Vue, Svelte, and Tailwind environments.

Why does my UI design become inconsistent across different website pages?

UI design becomes inconsistent across pages without hierarchical master and page overrides enforcing shared design system rules. This Skill solves inconsistency by providing reasoning-based recommendations and reusable pattern libraries to ensure scalable, repeatable design outcomes across all project pages.