# Send UI / UX 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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "ui-ux", "name": "UI / UX", "source": "tencent", "type": "skill", "category": "效率提升", "sourceUrl": "https://clawhub.ai/wpank/ui-ux", "canonicalUrl": "https://clawhub.ai/wpank/ui-ux", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/ui-ux", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "README.md", "SKILL.md", "data/products.csv", "data/web-interface.csv", "data/icons.csv", "data/landing.csv" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "ui-ux", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-01T14:39:02.769Z", "expiresAt": "2026-05-08T14:39:02.769Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux", "contentDisposition": "attachment; filename=\"ui-ux-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "ui-ux" }, "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" }, "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", "downloadUrl": "https://openagent3.xyz/downloads/ui-ux", "agentUrl": "https://openagent3.xyz/skills/ui-ux/agent", "manifestUrl": "https://openagent3.xyz/skills/ui-ux/agent.json", "briefUrl": "https://openagent3.xyz/skills/ui-ux/agent.md" } } ``` ## Documentation ### UI/UX Pro Max Searchable design database with CLI for generating complete design systems from natural language queries. See also: ui-design for fundamentals and decision-making. This skill provides data-driven recommendations via CLI. ### When to Use 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 ### 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 ### 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 the problem cursor-pointer — Add cursor-pointer to clickable elements ### Performance (HIGH) image-optimization — Use WebP, srcset, lazy loading reduced-motion — Check prefers-reduced-motion content-jumping — Reserve space for async content ### 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) ### 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 ### Animation (MEDIUM) duration-timing — Use 150-300ms for micro-interactions transform-performance — Use transform/opacity, not width/height loading-states — Skeleton screens or spinners ### 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 ### Charts & Data (LOW) chart-type — Match chart type to data type color-guidance — Use accessible color palettes data-table — Provide table alternative for accessibility ### OpenClaw / Moltbot / Clawbot npx clawhub@latest install ui-ux-pro-max ### Prerequisites Python 3 is required for the search CLI. python3 --version ### Workflow When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow these steps. ### Step 1: Analyze Requirements Extract from the user request: Product type: SaaS, e-commerce, portfolio, dashboard, landing page Style keywords: minimal, playful, professional, elegant, dark mode Industry: healthcare, fintech, gaming, education Stack: React, Vue, Next.js, or default to html-tailwind ### Step 2: Generate Design System Always start with --design-system to get comprehensive recommendations: python3 scripts/search.py " " --design-system [-p "Project Name"] This searches 5 domains in parallel (product, style, color, landing, typography), applies reasoning rules from ui-reasoning.csv, and returns a complete design system: pattern, style, colors, typography, effects, and anti-patterns. Example: python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" ### Step 2b: Persist Design System Save the design system for hierarchical retrieval across sessions: python3 scripts/search.py "" --design-system --persist -p "Project Name" Creates: design-system/MASTER.md — Global source of truth design-system/pages/ — Folder for page-specific overrides With page override: python3 scripts/search.py "" --design-system --persist -p "Project Name" --page "dashboard" Hierarchical retrieval: When building a specific page, check design-system/pages/.md first. If it exists, its rules override the Master file. Otherwise use design-system/MASTER.md exclusively. ### Step 3: Supplement with Domain Searches After generating the design system, use domain searches for additional detail: python3 scripts/search.py "" --domain [-n ] 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 Get implementation-specific best practices. Default to html-tailwind if unspecified. python3 scripts/search.py "" --stack html-tailwind Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose ### Domains DomainUse ForExample KeywordsproductProduct type recommendationsSaaS, e-commerce, portfolio, healthcarestyleUI styles, colors, effectsglassmorphism, minimalism, dark modetypographyFont pairings, Google Fontselegant, playful, professionalcolorColor palettes by product typesaas, ecommerce, healthcare, fintechlandingPage structure, CTA strategieshero, testimonial, pricing, social-proofchartChart types, library recstrend, comparison, timeline, funneluxBest practices, anti-patternsanimation, accessibility, z-indexreactReact/Next.js performancewaterfall, bundle, suspense, memowebWeb interface guidelinesaria, focus, keyboard, semanticpromptAI prompts, CSS keywords(style name) ### 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, formsjetpack-composeComposables, Modifiers, State Hoisting ### Output Formats # ASCII box (default) — best for terminal display python3 scripts/search.py "fintech crypto" --design-system # Markdown — best for documentation python3 scripts/search.py "fintech crypto" --design-system -f markdown ### Example Workflow User request: "Build a landing page for a professional skincare service" Step 1 — Analyze: Beauty/Spa service, elegant/professional, html-tailwind default. Step 2 — Design system: python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa" Step 3 — Supplement: python3 scripts/search.py "animation accessibility" --domain ux python3 scripts/search.py "elegant luxury serif" --domain typography Step 4 — Stack: python3 scripts/search.py "layout responsive form" --stack html-tailwind Then synthesize design system + detailed searches and implement. ### Search Tips Be specific — "healthcare SaaS dashboard" beats "app" Search multiple times — Different keywords reveal different insights Combine domains — Style + Typography + Color = complete system Always check UX — Search "animation", "z-index", "accessibility" for common issues Use the stack flag — Get implementation-specific best practices Iterate — If first search misses, try different keywords ### Icons & Visual Elements RuleDoDon'tNo emoji iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use emojis as UI iconsStable hover statesUse color/opacity transitionsUse scale transforms that shift layoutCorrect brand logosResearch official SVG from Simple IconsGuess or use incorrect logo pathsConsistent icon sizingFixed viewBox (24x24) with w-6 h-6Mix different icon sizes ### Interaction & Cursor RuleDoDon'tCursor pointercursor-pointer on all clickable elementsLeave default cursor on interactive elementsHover feedbackVisual feedback (color, shadow, border)No indication element is interactiveSmooth transitionstransition-colors duration-200Instant changes or >500ms ### Light/Dark Mode Contrast RuleDoDon'tGlass card (light)bg-white/80 or higher opacitybg-white/10 (too transparent)Text contrast (light)#0F172A (slate-900) for text#94A3B8 (slate-400) for body textMuted text (light)#475569 (slate-600) minimumgray-400 or lighterBorder visibilityborder-gray-200 in light modeborder-white/10 (invisible) ### Layout & Spacing RuleDoDon'tFloating navbartop-4 left-4 right-4 spacingStick to top-0 left-0 right-0Content paddingAccount for fixed navbar heightLet content hide behind fixed elementsConsistent max-widthSame max-w-6xl or max-w-7xlMix different container widths ### Visual Quality No emojis used as icons (use SVG instead) All icons from consistent set (Heroicons/Lucide) Brand logos verified (Simple Icons) Hover states don't cause layout shift Theme colors used directly (bg-primary not var() wrapper) ### Interaction All clickable elements have cursor-pointer Hover states provide clear visual feedback Transitions are 150-300ms Focus states visible for keyboard navigation ### Light/Dark Mode Light mode text has 4.5:1 minimum contrast Glass/transparent elements visible in light mode Borders visible in both modes Both modes tested before delivery ### Layout Floating elements have proper edge spacing 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: wpank - Version: 1.0.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-01T14:39:02.769Z - Expires at: 2026-05-08T14:39:02.769Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/ui-ux) - [Send to Agent page](https://openagent3.xyz/skills/ui-ux/agent) - [JSON manifest](https://openagent3.xyz/skills/ui-ux/agent.json) - [Markdown brief](https://openagent3.xyz/skills/ui-ux/agent.md) - [Download page](https://openagent3.xyz/downloads/ui-ux)