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,
npx skills add melandlabs/openloomi --skill ui-ux-pro-max --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Comprehensive design guide offering 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. It enables planning, building, creating, designing, implementing, reviewing, fixing, improving, optimizing, enhancing, refactoring, and checking UI/UX code for projects like website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. It supports elements such as button, modal, navbar, sidebar, card, table, form, and chart, with various styles including glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. It also provides a searchable database with priority-based recommendations and integration references to shadcn/ui MCP for component search and examples.
How it works
The skill is designed to be invoked when tasks involve UI structure, visual design decisions, interaction patterns, or user experience quality control. It prescribes must-use contexts for designing pages, creating/refactoring UI components, selecting color schemes and typography systems, reviewing UI code for UX quality and accessibility, implementing navigation structures and animations, and making product-level design decisions. It also outlines recommended and skip scenarios to determine applicability. The content implies prioritizing rule categories (Accessibility, Touch & Interaction, Performance, Style Selection, Layout & Responsive, Typography & Color, Animation, Forms & Feedback, Navigation Patterns, Charts & Data) to guide evaluations. The skill references specific constraints like color contrast, focus states, touch target sizes, image optimization, code-splitting, and typography metrics, and emphasizes accessibility, responsiveness, and consistency across platforms.
When to use it
Use this skill for tasks involving UI structure, visual design decisions, interaction patterns, or user experience quality control. It should be invoked for designing new pages, creating/refactoring UI components, choosing color schemes/typography/spacing/layout systems, reviewing UI code for UX/accessibility/visual consistency, implementing navigation/animations/responsive behavior, making product-level design decisions, and improving perceived UI quality.
What it can touch
The skill references allowed tools (e.g., claude-code) and integrations (e.g., shadcn/ui MCP) for component search and examples, and it covers a broad set of UI artifacts (pages, components, styles, tokens, and guidelines). It mentions assets such as color palettes, typography pairings, product types, UX guidelines, chart types, and style systems, and touches on accessibility and performance concerns that may require tooling for validation. All touches are described in terms of design decisions, reviews, and implementations.
Caveats
The skill describes license and project context as Apache-2.0 and notes integration tooling and stacks; it does not state guarantees of outcomes. It emphasizes adherence to accessibility, responsiveness, and UI consistency rules, and cautions against non-visual backend tasks or non-visual scripts outside its scope. It warns about avoiding emoji icons in favor of SVG icons and maintaining consistent elevation/shadow, typography, and color usage per design system guidelines.
# 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
- 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)
python3 --version || python --version brew install python3 sudo apt update && sudo apt install python3 python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
What does the ui-ux-pro-max skill do?
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,
How do I install it?
Run `npx skills add melandlabs/openloomi --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 melandlabs/openloomi, a repository with 764 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.