ui-ux-pro-max

Orchestrate React/TypeScript dashboard UI workflows from design context through visual QA.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill ui-ux-pro-max-cleanexpo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/CleanExpo/Pi-Dev-Ops/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill ui-ux-pro-max-cleanexpo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Producing UI that matches design intent while staying accessible, consistent across states, and regression-tested is hard to do reliably under time pressure.

Core Features & Use Cases

  • Design-to-code orchestration (all four layers): runs intelligence, builds components, audits for anti-patterns, and performs visual QA in a single end-to-end workflow.
  • Maximum-quality component production: generates all required UI states (including skeleton/loading and error/empty), ensures keyboard navigation and visible focus, and enforces motion/accessibility requirements.
  • Audit + detector + visual regression guardrails: requires a minimum audit score, fixes critical findings, runs an automated detector, and creates a breakpoint screenshot matrix to validate responsive and dark-mode fidelity.

Use it when shipping anything that must be production-ready—new pages, extensions to a design system, or full design sprints where quality and consistency matter more than speed.

Quick Start

Use the ui-ux-pro-max workflow to plan the component, generate React/TSX variants, run the design audit and automated detector, and produce a full screenshot QA matrix before you open the PR.

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 run a design audit and visual regression test for React components?

Run a design audit and visual regression test by orchestrating an end-to-end workflow that validates React components against anti-patterns, generates a breakpoint screenshot matrix, and enforces minimum audit scores before PR submission.

How do I ensure my dashboard UI components have complete interactive states and accessibility?

Ensure dashboard UI completeness by enforcing maximum-quality settings that generate all interactive, skeleton, and error states while mandating keyboard navigation, visible focus, and prefers-reduced-motion handling for accessibility compliance.

What is the best way to prevent hardcoded colors when building a React design system?

The best way to prevent hardcoded colors is through token-only styling enforcement, which intercepts component generation to ensure no hardcoded hex values are used and all visual properties map to design system tokens.

Can I use this to validate responsive behavior and dark mode fidelity for TypeScript UI?

Yes, you can validate responsive behavior and dark mode fidelity by running an automated detector and capturing a breakpoint screenshot matrix that verifies visual consistency across required viewport sizes and color schemes.

Does this workflow require existing design context to generate production-ready TSX?

Yes, the workflow requires design context and component briefing as input to orchestrate the generation, auditing, and visual QA of production-ready TSX components in modern React/TypeScript stacks.

Why does my UI production workflow fail the automated detector before opening a PR?

Your UI workflow fails the detector because it enforces strict guardrails requiring critical audit findings to be fixed and visual regression checks to pass before allowing a pull request to be opened.