skills.rest
zeroix07
zeroix07COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems and frontend code for React, Next.js, Vue, Svelte, and Tailwind CSS.

Updated May 30, 2026
Search Tags:#accessibility#frontend#react#tailwind#ui-ux#design-system
One-click install
npx skills add https://github.com/zeroix07/mcp-skill-agent --skill ui-ux-pro-max-zeroix07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/zeroix07/mcp-skill-agent/tree/main/ui-ux-pro-max
Command: npx skills add https://github.com/zeroix07/mcp-skill-agent --skill ui-ux-pro-max-zeroix07

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Building consistent, accessible, and visually polished user interfaces across platforms and frameworks typically requires extensive design expertise, manual research of best practices, and repeated back-and-forth to align on visual direction and implementation details. This Skill eliminates that overhead by providing structured design intelligence and automated tooling to deliver production-ready UI/UX outputs.

Core Features & Use Cases

  • End-to-end UI/UX guidance: Covers design triage, layout concepting, UX flow mapping, design system token generation, and frontend implementation guidance for web, iOS, Android, and desktop platforms, supporting frameworks like React, Next.js, Vue, Svelte, and Tailwind CSS.
  • Intelligent design system generation: Automatically produces tailored design systems including color palettes, typography pairings, spacing scales, component specs, and anti-pattern recommendations matched to your product type and industry, using a built-in reasoning engine with 100+ industry-specific rules.
  • Stack-specific best practices: Provides implementation guidelines and validation checks for 13+ tech stacks, including accessibility compliance (WCAG), responsive design, and performance optimization, plus a pre-delivery checklist to catch common UI mistakes.
  • Use case example: A developer building a fintech dashboard can get a complete design system with recommended dark mode styles, accessible color tokens, and React component specs in seconds, instead of spending hours researching industry best practices and design patterns.

Quick Start

Ask the AI to build a polished landing page for your SaaS product, and it will automatically generate a complete design system and implementation guidance tailored to your requirements.

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 complete design system for a React and Tailwind CSS project?▼

To generate a design system for React and Tailwind CSS, provide your product requirements and the Skill outputs tailored color palettes, typography pairings, spacing scales, and component specs. It applies built-in reasoning rules to deliver production-ready design tokens and implementation guidance.

What is the best way to ensure WCAG accessibility compliance when building a UI?▼

The best way to ensure WCAG accessibility compliance is to validate UI components against built-in accessibility rules during generation. This Skill checks color contrast, semantic structure, and responsive design, providing a pre-delivery checklist to catch common mistakes before implementation.

Can I use this to get UI component specifications for a SaaS dashboard?▼

Yes, you can use this to get UI component specifications for a SaaS dashboard. By stating your product type, it automatically generates tailored layout concepts, dark mode styles, and industry-specific component specs using over 100 reasoning rules matched to your context.

Does this work with frontend frameworks other than React, like Vue and Svelte?▼

Yes, this works with frontend frameworks other than React, including Vue, Svelte, and Next.js. It provides stack-specific best practices, validation checks, and implementation guidance to translate UX recommendations into concrete frontend code across 13+ supported tech stacks.

How do I create an industry-specific color palette and typography pairing for my web app?▼

To create an industry-specific color palette and typography pairing, request design generation for your target industry. The Skill uses its internal reasoning engine to automatically match and output visually polished, accessible design tokens suited to your specific product category.

What are the limitations of automated UI/UX design system generation?▼

The limitations of automated UI/UX design system generation include relying on predefined reasoning rules rather than subjective visual creativity. While it eliminates guesswork for consistency and accessibility, highly bespoke or avant-garde visual directions may require additional manual design refinement.

Related Skills

Explore More Design & Creative Skills→
Kouakou-Christ-AxelKouakou-Christ-Axel

ui-ux-pro-max

Provide UI/UX design guidance across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
MadAppGangMadAppGang
278

ui-implementer

Generate UI components from Figma URLs and validate against design fidelity.

Official
Advanced