skills.rest
shengmingzhishu
shengmingzhishuCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design systems with color palettes, typography, and UX rules for web interfaces.

Updated Jul 31, 2026
Search Tags:#typography#accessibility#design system#color palette#ui design#tailwind#ux guidelines
One-click install
npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill ui-ux-pro-max-shengmingzhishu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/shengmingzhishu/LeeCommonVideoCut/tree/main/.rules-skills/react-stack/.trae/skills/ui-ux-pro-max
Command: npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill ui-ux-pro-max-shengmingzhishu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing consistent colors, fonts, spacing, and interaction patterns for a new UI is slow and error-prone, and teams often ship interfaces with accessibility, contrast, or responsive-layout defects. This Skill provides a searchable design rule database and a structured workflow that produces a complete Design System before any code is written. ## Core Features & Use Cases - Design System Generation: Produces color palettes, typography scales, spacing grids, and effect tokens matched to product type (SaaS, e-commerce, fintech, healthcare) and industry. - Priority-Based UX Rule Database: 99 UX guidelines ranked across 8 categories, from CRITICAL accessibility and touch-target rules down to chart-type selection, plus 50+ styles, 97 palettes, and 57 font pairings. - Multi-Stack Guidance: Stack-specific rules for html-tailwind, React, Next.js, Vue, Svelte, shadcn, SwiftUI, React Native, Flutter, and Jetpack Compose, with a pre-delivery checklist covering visual quality, interaction, dark mode, layout, and accessibility. - Use Case: When building a SaaS dashboard in Next.js, use this Skill to generate a neutral-base palette with one accent, a typography scale, and then validate the result against the accessibility and responsive checklists before delivery. ## Quick Start Ask the AI to generate a design system for a dark-mode fintech landing page using the ui-ux-pro-max guidelines and review it against the pre-delivery checklist.

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 choose a color palette for a SaaS dashboard?▼

Use a neutral base such as Zinc or Slate with a single accent color like Blue, Emerald, Teal, or Rose. This Skill maps product types to recommended palettes and provides 97 curated color combinations to match your industry.

What UX rules should I check before shipping a web page?▼

Prioritize accessibility and touch interaction first: 4.5:1 text contrast, visible focus states, 44x44px touch targets, and labeled form inputs. Then verify performance, responsive layout at 375px to 1440px, and typography before delivery.

Does this design guidance work with React and Next.js?▼

Yes, it supports 9 stacks including React, Next.js, Vue, Svelte, shadcn, and Tailwind. For Next.js it specifies rules like using server components for static sections, 'use client' only for interactivity, and next/image with proper alt and sizes.

What are common UI design anti-patterns to avoid?▼

Avoid Inter font with purple gradients, three equal-column card layouts, emojis as icons, centered text over dark hero images, and h-screen instead of min-h-[100dvh] on mobile. Use SVG icon sets like Heroicons or Lucide instead of emojis.

When should I not use this Skill directly?▼

This Skill functions primarily as a design system rule library consumed by other skills like model-design and docs-design. Use it directly only when you explicitly need concrete token values such as a color palette or font pairing recommendation.

Related Skills

Explore More Design & Creative Skills→
TriNgo0108TriNgo0108

ui-ux-pro-max

Generate design systems with color palettes, fonts, and stack-specific guidelines.

Community
Advanced
jitenkr2030jitenkr2030

frontend-design

Translate UI requirements into token-driven frontend code for modern frameworks.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
denish12denish12

design_systems

Coordinates React UI library integration across shadcn/ui, Mantine, and Wix Design System with themes and wrappers.

Community
Advanced