Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Productivity
UI / UX
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
skill openclawclawhub Free
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
โฌ 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
- README.md, SKILL.md, data/products.csv, data/web-interface.csv, data/icons.csv, data/landing.csv
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. 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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
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 "<product_type> <industry> <keywords>" --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 "<query>" --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 "<query>" --design-system --persist -p "Project Name" --page "dashboard" Hierarchical retrieval: When building a specific page, check design-system/pages/<page>.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 "<keyword>" --domain <domain> [-n <max_results>] 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 "<keyword>" --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
Category context
Workflow acceleration for inboxes, docs, calendars, planning, and execution loops.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
4 Files2 Docs
- SKILL.md
- README.md
- data/icons.csv
- data/landing.csv
- data/products.csv
- data/web-interface.csv