Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· Developer Tools
Ui Ux Pro Max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
skill openclawclawhub Free
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 0.1.0
Provenance
- Publisher
- ahump20
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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 Apply
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
PriorityCategoryImpactDomain1AccessibilityCRITICALux2Touch & InteractionCRITICALux3PerformanceHIGHux4Layout & ResponsiveHIGHux5Typography & ColorMEDIUMtypography, color6AnimationMEDIUMux7Style SelectionMEDIUMstyle, product8Charts & DataLOWchart
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 meaningful images aria-labels - aria-label for icon-only buttons keyboard-nav - Tab order matches visual order form-labels - Use label with for attribute
2. Touch & Interaction (CRITICAL)
touch-target-size - Minimum 44x44px touch targets hover-vs-tap - Use click/tap for primary interactions loading-buttons - Disable button during async operations error-feedback - Clear error messages near problem cursor-pointer - Add cursor-pointer to clickable elements
3. Performance (HIGH)
image-optimization - Use WebP, srcset, lazy loading reduced-motion - Check prefers-reduced-motion content-jumping - Reserve space for async content
4. Layout & Responsive (HIGH)
viewport-meta - width=device-width initial-scale=1 readable-font-size - Minimum 16px body text on mobile horizontal-scroll - Ensure content fits viewport width z-index-management - Define z-index scale (10, 20, 30, 50)
5. Typography & Color (MEDIUM)
line-height - Use 1.5-1.75 for body text line-length - Limit to 65-75 characters per line font-pairing - Match heading/body font personalities
6. Animation (MEDIUM)
duration-timing - Use 150-300ms for micro-interactions transform-performance - Use transform/opacity, not width/height loading-states - Skeleton screens or spinners
7. Style Selection (MEDIUM)
style-match - Match style to product type consistency - Use same style across all pages no-emoji-icons - Use SVG icons, not emojis
8. Charts & Data (LOW)
chart-type - Match chart type to data type color-guidance - Use accessible color palettes data-table - Provide table alternative for accessibility
How to Use
Search specific domains using the CLI tool below.
Prerequisites
Check if Python is installed: python3 --version || python --version If Python is not installed, install it based on user's OS: macOS: brew install python3 Ubuntu/Debian: sudo apt update && sudo apt install python3 Windows: winget install Python.Python.3.12
How to Use This Skill
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze User Requirements
Extract key information from user request: Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc. Style keywords: minimal, playful, professional, elegant, dark mode, etc. Industry: healthcare, fintech, gaming, education, etc. Stack: React, Vue, Next.js, or default to html-tailwind
Step 2: Generate Design System (REQUIRED)
Always start with --design-system to get comprehensive recommendations with reasoning: python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] This command: Searches 5 domains in parallel (product, style, color, landing, typography) Applies reasoning rules from ui-reasoning.csv to select best matches Returns complete design system: pattern, style, colors, typography, effects Includes anti-patterns to avoid Example: python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Step 2b: Persist Design System (Master + Overrides Pattern)
To save the design system for hierarchical retrieval across sessions, add --persist: python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" This creates: design-system/MASTER.md β Global Source of Truth with all design rules design-system/pages/ β Folder for page-specific overrides With page-specific override: python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" This also creates: design-system/pages/dashboard.md β Page-specific deviations from Master How hierarchical retrieval works: When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md If the page file exists, its rules override the Master file If not, use design-system/MASTER.md exclusively Context-aware retrieval prompt: I am building the [Page Name] page. Please read design-system/MASTER.md. Also check if design-system/pages/[page-name].md exists. If the page file exists, prioritize its rules. If not, use the Master rules exclusively. Now, generate the code...
Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details: python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] When to use detailed searches: NeedDomainExampleMore style optionsstyle--domain style "glassmorphism dark"Chart recommendationschart--domain chart "real-time dashboard"UX best practicesux--domain ux "animation accessibility"Alternative fontstypography--domain typography "elegant luxury"Landing structurelanding--domain landing "hero social-proof"
Step 4: Stack Guidelines (Default: html-tailwind)
Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind. python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Available Domains
DomainUse ForExample KeywordsproductProduct type recommendationsSaaS, e-commerce, portfolio, healthcare, beauty, servicestyleUI styles, colors, effectsglassmorphism, minimalism, dark mode, brutalismtypographyFont pairings, Google Fontselegant, playful, professional, moderncolorColor palettes by product typesaas, ecommerce, healthcare, beauty, fintech, servicelandingPage structure, CTA strategieshero, hero-centric, testimonial, pricing, social-proofchartChart types, library recommendationstrend, comparison, timeline, funnel, pieuxBest practices, anti-patternsanimation, accessibility, z-index, loadingreactReact/Next.js performancewaterfall, bundle, suspense, memo, rerender, cachewebWeb interface guidelinesaria, focus, keyboard, semantic, virtualizepromptAI prompts, CSS keywords(style name)
Available Stacks
StackFocushtml-tailwindTailwind utilities, responsive, a11y (DEFAULT)reactState, hooks, performance, patternsnextjsSSR, routing, images, API routesvueComposition API, Pinia, Vue RoutersvelteRunes, stores, SvelteKitswiftuiViews, State, Navigation, Animationreact-nativeComponents, Navigation, ListsflutterWidgets, State, Layout, Themingshadcnshadcn/ui components, theming, forms, patternsjetpack-composeComposables, Modifiers, State Hoisting, Recomposition
Example Workflow
User request: "LΓ m landing page cho dα»ch vα»₯ chΔm sΓ³c da chuyΓͺn nghiα»p"
Step 1: Analyze Requirements
Product type: Beauty/Spa service Style keywords: elegant, professional, soft Industry: Beauty/Wellness Stack: html-tailwind (default)
Step 2: Generate Design System (REQUIRED)
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa" Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Step 3: Supplement with Detailed Searches (as needed)
# Get UX guidelines for animation and accessibility python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux # Get alternative typography options if needed python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
Step 4: Stack Guidelines
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind Then: Synthesize design system + detailed searches and implement the design.
Output Formats
The --design-system flag supports two output formats: # ASCII box (default) - best for terminal display python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system # Markdown - best for documentation python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Tips for Better Results
Be specific with keywords - "healthcare SaaS dashboard" > "app" Search multiple times - Different keywords reveal different insights Combine domains - Style + Typography + Color = Complete design system Always check UX - Search "animation", "z-index", "accessibility" for common issues Use stack flag - Get implementation-specific best practices Iterate - If first search doesn't match, try different keywords
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Icons & Visual Elements
RuleDoDon'tNo emoji iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use emojis like π¨ π βοΈ as UI iconsStable hover statesUse color/opacity transitions on hoverUse scale transforms that shift layoutCorrect brand logosResearch official SVG from Simple IconsGuess or use incorrect logo pathsConsistent icon sizingUse fixed viewBox (24x24) with w-6 h-6Mix different icon sizes randomly
Interaction & Cursor
RuleDoDon'tCursor pointerAdd cursor-pointer to all clickable/hoverable cardsLeave default cursor on interactive elementsHover feedbackProvide visual feedback (color, shadow, border)No indication element is interactiveSmooth transitionsUse transition-colors duration-200Instant state changes or too slow (>500ms)
Light/Dark Mode Contrast
RuleDoDon'tGlass card light modeUse bg-white/80 or higher opacityUse bg-white/10 (too transparent)Text contrast lightUse #0F172A (slate-900) for textUse #94A3B8 (slate-400) for body textMuted text lightUse #475569 (slate-600) minimumUse gray-400 or lighterBorder visibilityUse border-gray-200 in light modeUse border-white/10 (invisible)
Layout & Spacing
RuleDoDon'tFloating navbarAdd top-4 left-4 right-4 spacingStick navbar to top-0 left-0 right-0Content paddingAccount for fixed navbar heightLet content hide behind fixed elementsConsistent max-widthUse same max-w-6xl or max-w-7xlMix different container widths
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality
No emojis used as icons (use SVG instead) All icons from consistent icon set (Heroicons/Lucide) Brand logos are correct (verified from Simple Icons) Hover states don't cause layout shift Use theme colors directly (bg-primary) not var() wrapper
Interaction
All clickable elements have cursor-pointer Hover states provide clear visual feedback Transitions are smooth (150-300ms) Focus states visible for keyboard navigation
Light/Dark Mode
Light mode text has sufficient contrast (4.5:1 minimum) Glass/transparent elements visible in light mode Borders visible in both modes Test both modes before delivery
Layout
Floating elements have proper spacing from edges No content hidden behind fixed navbars Responsive at 375px, 768px, 1024px, 1440px No horizontal scroll on mobile
Accessibility
All images have alt text Form inputs have labels Color is not the only indicator prefers-reduced-motion respected
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
1 Docs
- SKILL.md