ui-ux-pro-max

Generate UI/UX design systems with role-specific guidance and stack-aware frontend implementation.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/SunS1eep1ng/codex-dotfiles --skill ui-ux-pro-max-suns1eep1ng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/SunS1eep1ng/codex-dotfiles/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/SunS1eep1ng/codex-dotfiles --skill ui-ux-pro-max-suns1eep1ng

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of turning UI/UX requests into well-defined design systems and implementation guidance, improving frontend design and user experience.

Core Features & Use Cases

  • Design System Generation: Automatically create design systems based on product type, industry, and style keywords.
  • UX Review and Remediation: Offers guidance on accessibility, color, typography, and frontend implementation.
  • Stack-Aware Implementation: Provides stack-specific guidance for various frontend frameworks and libraries.
  • Use Case: When a user requests a new dashboard UI with a focus on data visualization, this Skill can generate a design system, suggest color palettes, typography, and offer implementation guidance for React or Vue.

Quick Start

Generate a design system for a project named 'Project Name' by running the following command: python3 "${CODEX_HOME:-$HOME/.codex}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"

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 UI design system for a specific industry?

To generate a UI design system, provide your product type, industry, and style keywords. The system automatically outputs role-specific guidance on palette selection, typography choices, and frontend implementation tailored to your project parameters.

What is the best way to conduct a UX review for frontend implementation?

A UX review for frontend implementation is automated by providing your project details to generate remediation guidance. It evaluates accessibility, color contrast, typography, and offers stack-aware implementation recommendations for frameworks like React or Vue.

Can I get stack-aware frontend implementation guidance for React or Vue dashboards?

Yes, stack-aware frontend implementation guidance supports various frameworks including React and Vue. It provides specific recommendations for dashboards, data visualization, and other product types based on the selected design system and industry context.

How do I choose colors and typography for an accessible design system?

Choosing accessible colors and typography is handled by the design system generator, which outputs palette and typography recommendations based on your product type and style keywords while ensuring accessibility standards are met.

Does this UX review tool work without external dependencies?

Yes, the UX review and design system generation tool works without external dependencies. It relies on internal scripts and references to transform UI/UX requests into polished design recommendations and implementation guidance directly.

What are the limitations of automating UI design system generation?

Automating UI design system generation relies entirely on the input parameters of product type, industry, and keywords provided. It offers structured design recommendations and implementation guidance, but complex or highly bespoke visual requirements may still need manual refinement.