Agent skill · Data & Analytics

ui-ux-pro-max

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism,

guanyanggithub.com/guanyangGitHub ↗

claude-codeships scriptsMIT

Install

npx skills add guanyang/open-agent-hub --skill ui-ux-pro-max --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts

Files in the skill folder: 21
SKILL.md size: 43 KB
Bundled scripts: yes
Path: skills/ui-ux-pro-max/SKILL.md
Open the folder on GitHub →

Where it comes from

Source: guanyang/open-agent-hub
Stars: 940
Language: TypeScript

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# UI/UX Pro Max - Design Intelligence Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations. ## When to Apply This Skill should be used when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**. ### Must Use This Skill must be invoked in the following situations: - Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App) - Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.) - Choosing color schemes, typography systems, spacing standards, or layout systems - Reviewing UI code for user experience, accessibility, or visual consistency - Implementing navigation structures, animations, or responsive behavior - Making product-level design decisions (style, information hierarchy, brand expression) - Improving perceived quality, clarity, or usability of interfaces ### Recommended This Skill is recommended in the following situations: - UI looks "not profess

What's inside

Steps it walks through

When to Apply
Must Use
Recommended
Skip
Rule Categories by Priority
Quick Reference
1. Accessibility (CRITICAL)
2. Touch & Interaction (CRITICAL)
3. Performance (HIGH)
4. Style Selection (HIGH)
5. Layout & Responsive (HIGH)
6. Typography & Color (MEDIUM)
7. Animation (MEDIUM)
8. Forms & Feedback (MEDIUM)

Ships with 20 files

data/charts.csv
data/colors.csv
data/landing.csv
data/products.csv
data/prompts.csv
data/stacks/flutter.csv
data/stacks/html-tailwind.csv
data/stacks/nextjs.csv
data/stacks/nuxt-ui.csv
data/stacks/nuxtjs.csv
data/stacks/react-native.csv
data/stacks/react.csv
data/stacks/svelte.csv
data/stacks/swiftui.csv
data/stacks/vue.csv
data/styles.csv
data/typography.csv
data/ux-guidelines.csv
scripts/core.py
scripts/search.py

Commands it runs

python3 --version || python --version
brew install python3
sudo apt update && sudo apt install python3
python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name"
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
python3 scripts/search.py "<keyword>" --stack react-native
python3 scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"

More from open-agent-hub

All skills →

advanced-evaluationThis skill should be used for advanced LLM evaluation: LLM-as-judge systems, direct scoring…Code Review & Quality context-compressionThis skill should be used when long-running agent sessions need context compression, structured…Workflow & Productivity baoyu-imagineAI image generation with OpenAI GPT Image 2, Azure OpenAI, Google, OpenRouter, DashScope, Z.AI…DevOps & Cloud brainstormingYou MUST use this before any creative work - creating features, building components, adding…Design & Presentation context-optimizationThis skill should be used for improving context efficiency: context budgeting, observation masking…Code Review & Quality context-degradationThis skill should be used for diagnosing and mitigating context degradation: lost-in-middle…AI & Agents

About this skill

What does the ui-ux-pro-max skill do?

How do I install it?

Run `npx skills add guanyang/open-agent-hub --skill ui-ux-pro-max --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From guanyang/open-agent-hub, a repository with 940 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going

All skills →

The full catalog, by category and by tool.

Open Source Radar →

The repositories these skills come from, watched daily.

The people behind them →

Makers and builders across the ecosystem.