ui-ux-pro-max

Generates UI/UX design systems and searchable design rules for web and mobile interfaces.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/iJosueeh/itera-workspace --skill ui-ux-pro-max-ijosueeh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/iJosueeh/itera-workspace/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/iJosueeh/itera-workspace --skill ui-ux-pro-max-ijosueeh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing consistent styles, colors, typography, and UX patterns for web and mobile interfaces is slow and error-prone, and reviewing UI code for accessibility and usability issues requires deep design knowledge. ## Core Features & Use Cases - Design System Generation: Produces a complete design system (pattern, style, colors, typography, effects) with reasoning and anti-patterns from a product description, with optional persistence to MASTER.md and per-page override files. - Searchable Design Database: Queries 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS. - UI Review Checklists: Provides priority-ranked rules for accessibility, touch targets, performance, animation, forms, navigation, and charts to audit existing interfaces. - Use Case: Ask for a design system for a fintech dashboard, receive a full palette, font pairing, and style recommendation, then review the implemented page against the accessibility and responsive-layout checklists. ## Quick Start Ask the assistant to generate a design system for your product type, for example: create a design system for a beauty spa landing page and review my homepage for UX issues.

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 or mobile app?

Run the search script with the --design-system flag and a query describing your product type, industry, and style keywords. It returns a complete recommendation covering pattern, style, colors, typography, effects, and anti-patterns to avoid.

What design resources are included for choosing colors and fonts?

The database contains 161 color palettes, 57 font pairings, 50+ styles such as glassmorphism and brutalism, and 161 product types with reasoning rules. You query them by domain using the search script.

Which frameworks and platforms does this UI guidance support?

It covers 10 stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and plain HTML/CSS. Rules reference platform standards like Apple HIG, Material Design, and WCAG.

Can I save and reuse a design system across multiple pages?

Yes, adding --persist creates a design-system/MASTER.md as the global source of truth, and --page creates per-page override files. Page-specific rules override the master file when both exist.

How do I review an existing page for accessibility and UX problems?

Use the priority-ranked rule checklists covering contrast ratios, touch target sizes, focus states, keyboard navigation, and reduced motion. Rules are ordered by impact so you fix critical accessibility issues first.

When should this design skill not be used?

Skip it for pure backend logic, API or database design, infrastructure work, and non-visual automation scripts. It only applies when a task changes how an interface looks, feels, moves, or is interacted with.