Skills ui-ux-pro-max

📦

ui-ux-pro-max

Name: ui-ux-pro-max
Author: ZhanlinCui

Safe

Generate Professional UI/UX Designs with Design System Intelligence

Also available from: DCjanus,nextlevelbuilder

Creating professional UI/UX designs requires deep knowledge of accessibility, color theory, typography, and stack-specific patterns. This skill provides a searchable database of 50+ design styles, color palettes, font pairings, and implementation guidelines to help you build polished interfaces faster.

Supports: Claude Codex Code(CC)

🥉 75 Bronze

Download the skill ZIP

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

Toggle on and start using

Test it

Using "ui-ux-pro-max". Search for 'beauty spa wellness elegant' design system

Expected outcome:

Design System Generated:
- Product Pattern: Service-based business with booking focus
- UI Style: Soft minimalism with organic shapes
- Color Palette: Sage green primary, cream background, rose gold accents
- Typography: Playfair Display (headings) + Lato (body)
- Effects: Subtle shadows, gentle gradients, smooth transitions

Using "ui-ux-pro-max". Get UX guidelines for animation accessibility

Expected outcome:

UX Guidelines Found:
1. prefers-reduced-motion: Check media query and provide static fallback
2. Duration limits: Use 150-300ms for micro-interactions
3. Transform performance: Animate transform/opacity, not width/height
4. Loading states: Show skeleton screens or spinners for async operations

Security Audit

Safe

v1 • 2/24/2026

Static analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.

Files scanned

3,254

Lines analyzed

findings

Total audits

No security issues found

Audited by: claude

Quality Score

Architecture

100

Maintainability

Content

Community

100

Security

Spec Compliance

What You Can Build

Frontend Developer Building a New Dashboard

A developer needs to create an admin dashboard for a SaaS product. They use the skill to get design system recommendations for 'SaaS dashboard', retrieve accessible color palettes for data-heavy interfaces, and get React-specific guidelines for performance optimization.

Solo Founder Creating a Landing Page

A non-designer founder needs a professional landing page for their startup. They search for 'beauty spa wellness service' to get a complete design system with style, colors, typography, and landing page patterns, then use Tailwind CSS guidelines to implement it.

Designer Ensuring Accessibility Compliance

A designer wants to ensure their UI meets WCAG guidelines. They query the ux domain for 'accessibility contrast focus' to get specific rules on color contrast ratios, focus states, and keyboard navigation with code examples.

Try These Prompts

Basic Style Search

Search for design styles matching 'minimalist dark mode dashboard'. Show me the top 3 style recommendations with their color schemes and key characteristics.

Complete Design System Generation

Generate a complete design system for a 'fintech crypto trading dashboard'. Include product pattern, UI style, color palette, typography, and effects. Name the project 'CryptoVault'.

Accessibility Review

Review this button component for accessibility issues: [paste code]. Check against WCAG guidelines for color contrast, focus states, and touch target size. Provide specific fixes.

Stack-Specific Implementation

I'm building a responsive navbar with Tailwind CSS. Search for 'navbar responsive floating' guidelines in the html-tailwind stack and provide implementation code with proper aria attributes.

Best Practices

Always start with --design-system flag to get comprehensive recommendations with reasoning before implementing
Check accessibility guidelines first - color contrast (4.5:1), focus states, and touch targets (44x44px minimum)
Use stack-specific searches to get implementation patterns that follow framework conventions

Avoid

Using emoji as UI icons instead of proper SVG icon libraries like Heroicons or Lucide
Implementing hover states with scale transforms that cause layout shift
Using transparent glass cards (bg-white/10) in light mode where they become invisible

Frequently Asked Questions

Do I need to install any dependencies to use this skill?

Yes, you need Python 3.x installed. The skill uses a Python CLI tool to search its CSV database. No additional Python packages are required as it uses only standard library modules.

Can this skill generate actual UI code?

No, this skill provides design guidelines, recommendations, and patterns. It does not generate production code. Use the recommendations to inform your implementation in your preferred framework.

What technology stacks are supported?

The skill covers 9 stacks: html-tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui, and Jetpack Compose. Each has specific guidelines for patterns, performance, and best practices.

How do I save a design system for later use?

Use the --persist flag with --design-system to create a MASTER.md file with your design system. You can also create page-specific overrides using the --page flag for hierarchical retrieval across sessions.

Can I search for specific design elements like charts or icons?

Yes, use the --domain flag with values like 'chart' for chart types, 'icons' for icon recommendations, 'typography' for font pairings, 'color' for palettes, or 'ux' for usability guidelines.

Is the design data updated regularly?

The skill uses static CSV files bundled with the repository. For the latest design trends, you may need to update the skill repository or supplement with additional research.