ui-ux-pro-max

Generates UI/UX design systems and searches style, color, typography, and stack guidelines via BM25.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/aungpwint/presentation --skill ui-ux-pro-max-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/aungpwint/presentation --skill ui-ux-pro-max-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right style, color palette, typography, and layout pattern for a new UI project is time-consuming and inconsistent. This Skill provides a searchable design intelligence database that returns complete, reasoned design system recommendations for web and mobile interfaces. ## Core Features & Use Cases - Design System Generation: Run a single command to get a complete recommendation covering page pattern, style, hex color palette, font pairings, effects, and anti-patterns to avoid. - Multi-Domain Search: Query 10+ domains (style, color, typography, chart, landing, UX, icons, React performance, web accessibility) using a BM25-ranked search engine over curated CSV datasets. - Stack-Specific Guidelines: Retrieve implementation best practices for 11 stacks including React, Next.js, Vue, Svelte, SwiftUI, Flutter, and Tailwind. - Use Case: When asked to build a landing page for a beauty spa, generate a design system with elegant typography, soft color palette, and conversion-optimized section order, then verify against the pre-delivery accessibility checklist. ## Quick Start Ask the AI to design a landing page for your product type and industry, and it will generate a complete design system with colors, fonts, and layout recommendations.

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 design system for a landing page?▼

Run the search script with the --design-system flag and a query describing your product, industry, and style keywords. It returns a complete recommendation with page pattern, style, hex colors, font pairings, effects, and anti-patterns to avoid.

What design domains can I search for UI guidelines?▼

You can search domains including style, color, typography, chart, landing page patterns, product types, UX guidelines, icons, React performance, and web accessibility. Each domain queries a dedicated CSV dataset using BM25 ranking.

Does it support React and Next.js specific guidelines?▼

Yes, use the --stack flag with react or nextjs to get stack-specific best practices covering state, hooks, SSR, routing, images, and performance. Other supported stacks include Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui.

What are the requirements to run the search scripts?▼

Python 3 is the only requirement. The scripts use only the standard library (csv, re, math, argparse, pathlib), so no pip installs are needed. The BM25 search engine is implemented from scratch in core.py.

Why does my search return no results for a keyword?▼

The BM25 tokenizer filters words of two characters or fewer and requires a positive relevance score. Try more specific keywords like 'healthcare SaaS dashboard' instead of generic terms, or specify the domain explicitly with --domain.