ui-ux-pro-max

Generate UI design systems with styles, palettes, fonts, and component patterns.

6|2|Updated Dec 29, 2025
One-click install
npx skills add https://github.com/NOIR-Solution/NOIR --skill ui-ux-pro-max-noir-solution
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/NOIR-Solution/NOIR/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/NOIR-Solution/NOIR --skill ui-ux-pro-max-noir-solution

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX design intelligence provides standardized, scalable guidance for planning, designing, implementing, and reviewing user interfaces across web and mobile platforms, enabling faster delivery with consistent UX patterns.

Core Features & Use Cases

  • 50 styles, 21 palettes, 50 font pairings, 20 charts, and 9 technology stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).
  • Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code.
  • Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app.
  • Elements: button, modal, navbar, sidebar, card, table, form, chart.
  • Integrations: shadcn/ui MCP for component search and examples.

Quick Start

Describe your product and I will generate a ready-to-use UI design system leveraging the included styles, palettes, fonts, charts, and 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 UI design system for web and mobile apps?

A UI design system codifies patterns, typography, color palettes, and layout decisions to standardize user interfaces. This skill generates a ready-to-use system covering 50 styles, 21 palettes, and 50 font pairings to accelerate consistent UX delivery across web and mobile platforms.

Can I generate UI component patterns for React, Next.js, and Tailwind?

Yes, you can generate UI component patterns for React, Next.js, and Tailwind. The system supports 9 technology stacks including Vue, Svelte, SwiftUI, React Native, and Flutter, providing actionable code patterns for buttons, modals, sidebars, and tables.

What is the best way to check accessibility and UX guidelines in my frontend code?

Checking accessibility and UX guidelines involves reviewing frontend code against standardized patterns for color contrast, typography, and layout. This skill performs UI/UX code reviews to identify and fix accessibility issues, ensuring your interface meets established UX guidelines.

Does this UI/UX design intelligence tool work with shadcn/ui components?

Yes, this UI/UX design intelligence tool works with shadcn/ui components. It integrates with the shadcn/ui MCP to search for component examples, allowing you to implement and refactor UI elements like cards, forms, and charts within your design system.

How do I plan and design a dashboard layout with standardized color palettes?

Planning a dashboard layout requires selecting compatible color palettes and typography to ensure visual hierarchy. This skill provides 21 curated color palettes and 20 chart styles, enabling you to design, build, and optimize dashboard interfaces with consistent UX patterns.

Why should I use an AI-powered design system instead of manually configuring styles?

An AI-powered design system automates the selection of styles, palettes, and component patterns, reducing manual configuration errors. It accelerates UI consistency and delivery across projects by codifying design decisions for frontend developers, product managers, and design teams.