# Send Ui Ux Pro Max to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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 ```text 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. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "ui-ux-pro-max-2", "name": "Ui Ux Pro Max", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/ahump20/ui-ux-pro-max-2", "canonicalUrl": "https://clawhub.ai/ahump20/ui-ux-pro-max-2", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/ui-ux-pro-max-2", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux-pro-max-2", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "ui-ux-pro-max-2", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-10T09:23:36.499Z", "expiresAt": "2026-05-17T09:23:36.499Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux-pro-max-2", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux-pro-max-2", "contentDisposition": "attachment; filename=\"ui-ux-pro-max-2-0.1.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "ui-ux-pro-max-2" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/ui-ux-pro-max-2" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/ui-ux-pro-max-2", "downloadUrl": "https://openagent3.xyz/downloads/ui-ux-pro-max-2", "agentUrl": "https://openagent3.xyz/skills/ui-ux-pro-max-2/agent", "manifestUrl": "https://openagent3.xyz/skills/ui-ux-pro-max-2/agent.json", "briefUrl": "https://openagent3.xyz/skills/ui-ux-pro-max-2/agent.md" } } ``` ## 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 " " --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 "" --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 "" --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 "" --domain [-n ] 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 "" --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 ## Trust - Source: tencent - Verification: Indexed source record - Publisher: ahump20 - Version: 0.1.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-10T09:23:36.499Z - Expires at: 2026-05-17T09:23:36.499Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/ui-ux-pro-max-2) - [Send to Agent page](https://openagent3.xyz/skills/ui-ux-pro-max-2/agent) - [JSON manifest](https://openagent3.xyz/skills/ui-ux-pro-max-2/agent.json) - [Markdown brief](https://openagent3.xyz/skills/ui-ux-pro-max-2/agent.md) - [Download page](https://openagent3.xyz/downloads/ui-ux-pro-max-2)