Agent skill · Frontend

ui-ux-pro-max

Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.

Nick44,086★ · +407/wk · 1 repos on radarProfile →
claude-codecodexcursorships scriptsMIT
Install
npx skills add sickn33/agentic-awesome-skills --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: 27
SKILL.md size: 13 KB
Bundled scripts: yes
Path: skills/ui-ux-pro-max/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 44,414 · +328 this week
Language: Python
Read our review of the source →

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, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations. ## When to Use Reference these guidelines when: - Designing new UI components or pages - Choosing color palettes and typography - Reviewing code for UX issues - Building landing pages or dashboards - Implementing accessibility requirements ## Rule Categories by Priority | Priority | Category | Impact | Domain | |----------|----------|--------|--------| | 1 | Accessibility | CRITICAL | `ux` | | 2 | Touch & Interaction | CRITICAL | `ux` | | 3 | Performance | HIGH | `ux` | | 4 | Layout & Responsive | HIGH | `ux` | | 5 | Typography & Color | MEDIUM | `typography`, `color` | | 6 | Animation | MEDIUM | `ux` | | 7 | Style Selection | MEDIUM | `style`, `product` | | 8 | Charts & Data | LOW | `chart` | ## Quick Reference ### 1. Accessibility (CRITICAL) - `color-contrast` - Minimum 4.5:1 ratio for normal text - `focus-states` - Visible focus rings on interactive elements - `alt-text` - Descriptive alt text for meaningf

What's inside
Steps it walks through
  1. When to Use
  2. Rule Categories by Priority
  3. Quick Reference
  4. 1. Accessibility (CRITICAL)
  5. 2. Touch & Interaction (CRITICAL)
  6. 3. Performance (HIGH)
  7. 4. Layout & Responsive (HIGH)
  8. 5. Typography & Color (MEDIUM)
  9. 6. Animation (MEDIUM)
  10. 7. Style Selection (MEDIUM)
  11. 8. Charts & Data (LOW)
  12. How to Use
  13. Prerequisites
  14. How to Use This Skill
Ships with 24 files
  • data/charts.csv
  • data/colors.csv
  • data/icons.csv
  • data/landing.csv
  • data/products.csv
  • data/prompts.csv
  • data/react-performance.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/shadcn.csv
  • data/stacks/svelte.csv
  • data/stacks/swiftui.csv
  • data/stacks/vue.csv
  • data/styles.csv
  • data/typography.csv
  • data/ui-reasoning.csv
  • data/ux-guidelines.csv
  • data/web-interface.csv
  • scripts/core.py
first 24 of 27
Commands it runs
python3 --version || python --version
brew install python3
sudo apt update && sudo apt install python3
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Get UX guidelines for animation and accessibility
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
More from agentic-awesome-skills
All skills →
seo-fundamentalsCore principles of SEO including E-E-A-T, Core Web Vitals, technical foundations, content quality…Code Review & Qualityhugging-face-jobsRun workloads on Hugging Face Jobs with managed CPUs, GPUs, TPUs, secrets, and Hub persistence.Otheragent-orchestratorMeta-skill que orquestra todos os agentes do ecossistema. Scan automatico de skills, match por…AI & Agentsdiagnosing-bugsDiagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug…Code Review & Qualityuser-thoughtsPersist user decisions and project constraints to mdbase across sessions. Trigger on /user-thoughts…Frontendloki-modeVersion 2.35.0 | PRD to Production | Zero Human Intervention > Research-enhanced: OpenAI SDK…DevOps & Cloud
About this skill
What does the ui-ux-pro-max skill do?

Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.

How do I install it?

Run `npx skills add sickn33/agentic-awesome-skills --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 sickn33/agentic-awesome-skills, a repository with 44,414 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.