{
  "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": {
    "downloadMode": "redirect",
    "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",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/ui-ux-pro-max-2",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "UI/UX Pro Max - Design Intelligence",
        "body": "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."
      },
      {
        "title": "When to Apply",
        "body": "Reference these guidelines when:\n\nDesigning new UI components or pages\nChoosing color palettes and typography\nReviewing code for UX issues\nBuilding landing pages or dashboards\nImplementing accessibility requirements"
      },
      {
        "title": "Rule Categories by Priority",
        "body": "PriorityCategoryImpactDomain1AccessibilityCRITICALux2Touch & InteractionCRITICALux3PerformanceHIGHux4Layout & ResponsiveHIGHux5Typography & ColorMEDIUMtypography, color6AnimationMEDIUMux7Style SelectionMEDIUMstyle, product8Charts & DataLOWchart"
      },
      {
        "title": "1. Accessibility (CRITICAL)",
        "body": "color-contrast - Minimum 4.5:1 ratio for normal text\nfocus-states - Visible focus rings on interactive elements\nalt-text - Descriptive alt text for meaningful images\naria-labels - aria-label for icon-only buttons\nkeyboard-nav - Tab order matches visual order\nform-labels - Use label with for attribute"
      },
      {
        "title": "2. Touch & Interaction (CRITICAL)",
        "body": "touch-target-size - Minimum 44x44px touch targets\nhover-vs-tap - Use click/tap for primary interactions\nloading-buttons - Disable button during async operations\nerror-feedback - Clear error messages near problem\ncursor-pointer - Add cursor-pointer to clickable elements"
      },
      {
        "title": "3. Performance (HIGH)",
        "body": "image-optimization - Use WebP, srcset, lazy loading\nreduced-motion - Check prefers-reduced-motion\ncontent-jumping - Reserve space for async content"
      },
      {
        "title": "4. Layout & Responsive (HIGH)",
        "body": "viewport-meta - width=device-width initial-scale=1\nreadable-font-size - Minimum 16px body text on mobile\nhorizontal-scroll - Ensure content fits viewport width\nz-index-management - Define z-index scale (10, 20, 30, 50)"
      },
      {
        "title": "5. Typography & Color (MEDIUM)",
        "body": "line-height - Use 1.5-1.75 for body text\nline-length - Limit to 65-75 characters per line\nfont-pairing - Match heading/body font personalities"
      },
      {
        "title": "6. Animation (MEDIUM)",
        "body": "duration-timing - Use 150-300ms for micro-interactions\ntransform-performance - Use transform/opacity, not width/height\nloading-states - Skeleton screens or spinners"
      },
      {
        "title": "7. Style Selection (MEDIUM)",
        "body": "style-match - Match style to product type\nconsistency - Use same style across all pages\nno-emoji-icons - Use SVG icons, not emojis"
      },
      {
        "title": "8. Charts & Data (LOW)",
        "body": "chart-type - Match chart type to data type\ncolor-guidance - Use accessible color palettes\ndata-table - Provide table alternative for accessibility"
      },
      {
        "title": "How to Use",
        "body": "Search specific domains using the CLI tool below."
      },
      {
        "title": "Prerequisites",
        "body": "Check if Python is installed:\n\npython3 --version || python --version\n\nIf Python is not installed, install it based on user's OS:\n\nmacOS:\n\nbrew install python3\n\nUbuntu/Debian:\n\nsudo apt update && sudo apt install python3\n\nWindows:\n\nwinget install Python.Python.3.12"
      },
      {
        "title": "How to Use This Skill",
        "body": "When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:"
      },
      {
        "title": "Step 1: Analyze User Requirements",
        "body": "Extract key information from user request:\n\nProduct type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.\nStyle keywords: minimal, playful, professional, elegant, dark mode, etc.\nIndustry: healthcare, fintech, gaming, education, etc.\nStack: React, Vue, Next.js, or default to html-tailwind"
      },
      {
        "title": "Step 2: Generate Design System (REQUIRED)",
        "body": "Always start with --design-system to get comprehensive recommendations with reasoning:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<product_type> <industry> <keywords>\" --design-system [-p \"Project Name\"]\n\nThis command:\n\nSearches 5 domains in parallel (product, style, color, landing, typography)\nApplies reasoning rules from ui-reasoning.csv to select best matches\nReturns complete design system: pattern, style, colors, typography, effects\nIncludes anti-patterns to avoid\n\nExample:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"beauty spa wellness service\" --design-system -p \"Serenity Spa\""
      },
      {
        "title": "Step 2b: Persist Design System (Master + Overrides Pattern)",
        "body": "To save the design system for hierarchical retrieval across sessions, add --persist:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\"\n\nThis creates:\n\ndesign-system/MASTER.md — Global Source of Truth with all design rules\ndesign-system/pages/ — Folder for page-specific overrides\n\nWith page-specific override:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n\nThis also creates:\n\ndesign-system/pages/dashboard.md — Page-specific deviations from Master\n\nHow hierarchical retrieval works:\n\nWhen building a specific page (e.g., \"Checkout\"), first check design-system/pages/checkout.md\nIf the page file exists, its rules override the Master file\nIf not, use design-system/MASTER.md exclusively\n\nContext-aware retrieval prompt:\n\nI am building the [Page Name] page. Please read design-system/MASTER.md.\nAlso check if design-system/pages/[page-name].md exists.\nIf the page file exists, prioritize its rules.\nIf not, use the Master rules exclusively.\nNow, generate the code..."
      },
      {
        "title": "Step 3: Supplement with Detailed Searches (as needed)",
        "body": "After getting the design system, use domain searches to get additional details:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<keyword>\" --domain <domain> [-n <max_results>]\n\nWhen to use detailed searches:\n\nNeedDomainExampleMore 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\""
      },
      {
        "title": "Step 4: Stack Guidelines (Default: html-tailwind)",
        "body": "Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<keyword>\" --stack html-tailwind\n\nAvailable stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose"
      },
      {
        "title": "Available Domains",
        "body": "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)"
      },
      {
        "title": "Available Stacks",
        "body": "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"
      },
      {
        "title": "Example Workflow",
        "body": "User request: \"Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp\""
      },
      {
        "title": "Step 1: Analyze Requirements",
        "body": "Product type: Beauty/Spa service\nStyle keywords: elegant, professional, soft\nIndustry: Beauty/Wellness\nStack: html-tailwind (default)"
      },
      {
        "title": "Step 2: Generate Design System (REQUIRED)",
        "body": "python3 skills/ui-ux-pro-max/scripts/search.py \"beauty spa wellness service elegant\" --design-system -p \"Serenity Spa\"\n\nOutput: Complete design system with pattern, style, colors, typography, effects, and anti-patterns."
      },
      {
        "title": "Step 3: Supplement with Detailed Searches (as needed)",
        "body": "# Get UX guidelines for animation and accessibility\npython3 skills/ui-ux-pro-max/scripts/search.py \"animation accessibility\" --domain ux\n\n# Get alternative typography options if needed\npython3 skills/ui-ux-pro-max/scripts/search.py \"elegant luxury serif\" --domain typography"
      },
      {
        "title": "Step 4: Stack Guidelines",
        "body": "python3 skills/ui-ux-pro-max/scripts/search.py \"layout responsive form\" --stack html-tailwind\n\nThen: Synthesize design system + detailed searches and implement the design."
      },
      {
        "title": "Output Formats",
        "body": "The --design-system flag supports two output formats:\n\n# ASCII box (default) - best for terminal display\npython3 skills/ui-ux-pro-max/scripts/search.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 skills/ui-ux-pro-max/scripts/search.py \"fintech crypto\" --design-system -f markdown"
      },
      {
        "title": "Tips for Better Results",
        "body": "Be specific with keywords - \"healthcare SaaS dashboard\" > \"app\"\nSearch multiple times - Different keywords reveal different insights\nCombine domains - Style + Typography + Color = Complete design system\nAlways check UX - Search \"animation\", \"z-index\", \"accessibility\" for common issues\nUse stack flag - Get implementation-specific best practices\nIterate - If first search doesn't match, try different keywords"
      },
      {
        "title": "Common Rules for Professional UI",
        "body": "These are frequently overlooked issues that make UI look unprofessional:"
      },
      {
        "title": "Icons & Visual Elements",
        "body": "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"
      },
      {
        "title": "Interaction & Cursor",
        "body": "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)"
      },
      {
        "title": "Light/Dark Mode Contrast",
        "body": "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)"
      },
      {
        "title": "Layout & Spacing",
        "body": "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"
      },
      {
        "title": "Pre-Delivery Checklist",
        "body": "Before delivering UI code, verify these items:"
      },
      {
        "title": "Visual Quality",
        "body": "No emojis used as icons (use SVG instead)\n All icons from consistent icon set (Heroicons/Lucide)\n Brand logos are correct (verified from Simple Icons)\n Hover states don't cause layout shift\n Use theme colors directly (bg-primary) not var() wrapper"
      },
      {
        "title": "Interaction",
        "body": "All clickable elements have cursor-pointer\n Hover states provide clear visual feedback\n Transitions are smooth (150-300ms)\n Focus states visible for keyboard navigation"
      },
      {
        "title": "Light/Dark Mode",
        "body": "Light mode text has sufficient contrast (4.5:1 minimum)\n Glass/transparent elements visible in light mode\n Borders visible in both modes\n Test both modes before delivery"
      },
      {
        "title": "Layout",
        "body": "Floating elements have proper spacing from edges\n No content hidden behind fixed navbars\n Responsive at 375px, 768px, 1024px, 1440px\n No horizontal scroll on mobile"
      },
      {
        "title": "Accessibility",
        "body": "All images have alt text\n Form inputs have labels\n Color is not the only indicator\n prefers-reduced-motion respected"
      }
    ],
    "body": "UI/UX Pro Max - Design Intelligence\n\nComprehensive 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.\n\nWhen to Apply\n\nReference these guidelines when:\n\nDesigning new UI components or pages\nChoosing color palettes and typography\nReviewing code for UX issues\nBuilding landing pages or dashboards\nImplementing accessibility requirements\nRule Categories by Priority\nPriority\tCategory\tImpact\tDomain\n1\tAccessibility\tCRITICAL\tux\n2\tTouch & Interaction\tCRITICAL\tux\n3\tPerformance\tHIGH\tux\n4\tLayout & Responsive\tHIGH\tux\n5\tTypography & Color\tMEDIUM\ttypography, color\n6\tAnimation\tMEDIUM\tux\n7\tStyle Selection\tMEDIUM\tstyle, product\n8\tCharts & Data\tLOW\tchart\nQuick Reference\n1. Accessibility (CRITICAL)\ncolor-contrast - Minimum 4.5:1 ratio for normal text\nfocus-states - Visible focus rings on interactive elements\nalt-text - Descriptive alt text for meaningful images\naria-labels - aria-label for icon-only buttons\nkeyboard-nav - Tab order matches visual order\nform-labels - Use label with for attribute\n2. Touch & Interaction (CRITICAL)\ntouch-target-size - Minimum 44x44px touch targets\nhover-vs-tap - Use click/tap for primary interactions\nloading-buttons - Disable button during async operations\nerror-feedback - Clear error messages near problem\ncursor-pointer - Add cursor-pointer to clickable elements\n3. Performance (HIGH)\nimage-optimization - Use WebP, srcset, lazy loading\nreduced-motion - Check prefers-reduced-motion\ncontent-jumping - Reserve space for async content\n4. Layout & Responsive (HIGH)\nviewport-meta - width=device-width initial-scale=1\nreadable-font-size - Minimum 16px body text on mobile\nhorizontal-scroll - Ensure content fits viewport width\nz-index-management - Define z-index scale (10, 20, 30, 50)\n5. Typography & Color (MEDIUM)\nline-height - Use 1.5-1.75 for body text\nline-length - Limit to 65-75 characters per line\nfont-pairing - Match heading/body font personalities\n6. Animation (MEDIUM)\nduration-timing - Use 150-300ms for micro-interactions\ntransform-performance - Use transform/opacity, not width/height\nloading-states - Skeleton screens or spinners\n7. Style Selection (MEDIUM)\nstyle-match - Match style to product type\nconsistency - Use same style across all pages\nno-emoji-icons - Use SVG icons, not emojis\n8. Charts & Data (LOW)\nchart-type - Match chart type to data type\ncolor-guidance - Use accessible color palettes\ndata-table - Provide table alternative for accessibility\nHow to Use\n\nSearch specific domains using the CLI tool below.\n\nPrerequisites\n\nCheck if Python is installed:\n\npython3 --version || python --version\n\n\nIf Python is not installed, install it based on user's OS:\n\nmacOS:\n\nbrew install python3\n\n\nUbuntu/Debian:\n\nsudo apt update && sudo apt install python3\n\n\nWindows:\n\nwinget install Python.Python.3.12\n\nHow to Use This Skill\n\nWhen user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:\n\nStep 1: Analyze User Requirements\n\nExtract key information from user request:\n\nProduct type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.\nStyle keywords: minimal, playful, professional, elegant, dark mode, etc.\nIndustry: healthcare, fintech, gaming, education, etc.\nStack: React, Vue, Next.js, or default to html-tailwind\nStep 2: Generate Design System (REQUIRED)\n\nAlways start with --design-system to get comprehensive recommendations with reasoning:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<product_type> <industry> <keywords>\" --design-system [-p \"Project Name\"]\n\n\nThis command:\n\nSearches 5 domains in parallel (product, style, color, landing, typography)\nApplies reasoning rules from ui-reasoning.csv to select best matches\nReturns complete design system: pattern, style, colors, typography, effects\nIncludes anti-patterns to avoid\n\nExample:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"beauty spa wellness service\" --design-system -p \"Serenity Spa\"\n\nStep 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for hierarchical retrieval across sessions, add --persist:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\"\n\n\nThis creates:\n\ndesign-system/MASTER.md — Global Source of Truth with all design rules\ndesign-system/pages/ — Folder for page-specific overrides\n\nWith page-specific override:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n\n\nThis also creates:\n\ndesign-system/pages/dashboard.md — Page-specific deviations from Master\n\nHow hierarchical retrieval works:\n\nWhen building a specific page (e.g., \"Checkout\"), first check design-system/pages/checkout.md\nIf the page file exists, its rules override the Master file\nIf not, use design-system/MASTER.md exclusively\n\nContext-aware retrieval prompt:\n\nI am building the [Page Name] page. Please read design-system/MASTER.md.\nAlso check if design-system/pages/[page-name].md exists.\nIf the page file exists, prioritize its rules.\nIf not, use the Master rules exclusively.\nNow, generate the code...\n\nStep 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<keyword>\" --domain <domain> [-n <max_results>]\n\n\nWhen to use detailed searches:\n\nNeed\tDomain\tExample\nMore style options\tstyle\t--domain style \"glassmorphism dark\"\nChart recommendations\tchart\t--domain chart \"real-time dashboard\"\nUX best practices\tux\t--domain ux \"animation accessibility\"\nAlternative fonts\ttypography\t--domain typography \"elegant luxury\"\nLanding structure\tlanding\t--domain landing \"hero social-proof\"\nStep 4: Stack Guidelines (Default: html-tailwind)\n\nGet implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.\n\npython3 skills/ui-ux-pro-max/scripts/search.py \"<keyword>\" --stack html-tailwind\n\n\nAvailable stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose\n\nSearch Reference\nAvailable Domains\nDomain\tUse For\tExample Keywords\nproduct\tProduct type recommendations\tSaaS, e-commerce, portfolio, healthcare, beauty, service\nstyle\tUI styles, colors, effects\tglassmorphism, minimalism, dark mode, brutalism\ntypography\tFont pairings, Google Fonts\telegant, playful, professional, modern\ncolor\tColor palettes by product type\tsaas, ecommerce, healthcare, beauty, fintech, service\nlanding\tPage structure, CTA strategies\thero, hero-centric, testimonial, pricing, social-proof\nchart\tChart types, library recommendations\ttrend, comparison, timeline, funnel, pie\nux\tBest practices, anti-patterns\tanimation, accessibility, z-index, loading\nreact\tReact/Next.js performance\twaterfall, bundle, suspense, memo, rerender, cache\nweb\tWeb interface guidelines\taria, focus, keyboard, semantic, virtualize\nprompt\tAI prompts, CSS keywords\t(style name)\nAvailable Stacks\nStack\tFocus\nhtml-tailwind\tTailwind utilities, responsive, a11y (DEFAULT)\nreact\tState, hooks, performance, patterns\nnextjs\tSSR, routing, images, API routes\nvue\tComposition API, Pinia, Vue Router\nsvelte\tRunes, stores, SvelteKit\nswiftui\tViews, State, Navigation, Animation\nreact-native\tComponents, Navigation, Lists\nflutter\tWidgets, State, Layout, Theming\nshadcn\tshadcn/ui components, theming, forms, patterns\njetpack-compose\tComposables, Modifiers, State Hoisting, Recomposition\nExample Workflow\n\nUser request: \"Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp\"\n\nStep 1: Analyze Requirements\nProduct type: Beauty/Spa service\nStyle keywords: elegant, professional, soft\nIndustry: Beauty/Wellness\nStack: html-tailwind (default)\nStep 2: Generate Design System (REQUIRED)\npython3 skills/ui-ux-pro-max/scripts/search.py \"beauty spa wellness service elegant\" --design-system -p \"Serenity Spa\"\n\n\nOutput: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.\n\nStep 3: Supplement with Detailed Searches (as needed)\n# Get UX guidelines for animation and accessibility\npython3 skills/ui-ux-pro-max/scripts/search.py \"animation accessibility\" --domain ux\n\n# Get alternative typography options if needed\npython3 skills/ui-ux-pro-max/scripts/search.py \"elegant luxury serif\" --domain typography\n\nStep 4: Stack Guidelines\npython3 skills/ui-ux-pro-max/scripts/search.py \"layout responsive form\" --stack html-tailwind\n\n\nThen: Synthesize design system + detailed searches and implement the design.\n\nOutput Formats\n\nThe --design-system flag supports two output formats:\n\n# ASCII box (default) - best for terminal display\npython3 skills/ui-ux-pro-max/scripts/search.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 skills/ui-ux-pro-max/scripts/search.py \"fintech crypto\" --design-system -f markdown\n\nTips for Better Results\nBe specific with keywords - \"healthcare SaaS dashboard\" > \"app\"\nSearch multiple times - Different keywords reveal different insights\nCombine domains - Style + Typography + Color = Complete design system\nAlways check UX - Search \"animation\", \"z-index\", \"accessibility\" for common issues\nUse stack flag - Get implementation-specific best practices\nIterate - If first search doesn't match, try different keywords\nCommon Rules for Professional UI\n\nThese are frequently overlooked issues that make UI look unprofessional:\n\nIcons & Visual Elements\nRule\tDo\tDon't\nNo emoji icons\tUse SVG icons (Heroicons, Lucide, Simple Icons)\tUse emojis like 🎨 🚀 ⚙️ as UI icons\nStable hover states\tUse color/opacity transitions on hover\tUse scale transforms that shift layout\nCorrect brand logos\tResearch official SVG from Simple Icons\tGuess or use incorrect logo paths\nConsistent icon sizing\tUse fixed viewBox (24x24) with w-6 h-6\tMix different icon sizes randomly\nInteraction & Cursor\nRule\tDo\tDon't\nCursor pointer\tAdd cursor-pointer to all clickable/hoverable cards\tLeave default cursor on interactive elements\nHover feedback\tProvide visual feedback (color, shadow, border)\tNo indication element is interactive\nSmooth transitions\tUse transition-colors duration-200\tInstant state changes or too slow (>500ms)\nLight/Dark Mode Contrast\nRule\tDo\tDon't\nGlass card light mode\tUse bg-white/80 or higher opacity\tUse bg-white/10 (too transparent)\nText contrast light\tUse #0F172A (slate-900) for text\tUse #94A3B8 (slate-400) for body text\nMuted text light\tUse #475569 (slate-600) minimum\tUse gray-400 or lighter\nBorder visibility\tUse border-gray-200 in light mode\tUse border-white/10 (invisible)\nLayout & Spacing\nRule\tDo\tDon't\nFloating navbar\tAdd top-4 left-4 right-4 spacing\tStick navbar to top-0 left-0 right-0\nContent padding\tAccount for fixed navbar height\tLet content hide behind fixed elements\nConsistent max-width\tUse same max-w-6xl or max-w-7xl\tMix different container widths\nPre-Delivery Checklist\n\nBefore delivering UI code, verify these items:\n\nVisual Quality\n No emojis used as icons (use SVG instead)\n All icons from consistent icon set (Heroicons/Lucide)\n Brand logos are correct (verified from Simple Icons)\n Hover states don't cause layout shift\n Use theme colors directly (bg-primary) not var() wrapper\nInteraction\n All clickable elements have cursor-pointer\n Hover states provide clear visual feedback\n Transitions are smooth (150-300ms)\n Focus states visible for keyboard navigation\nLight/Dark Mode\n Light mode text has sufficient contrast (4.5:1 minimum)\n Glass/transparent elements visible in light mode\n Borders visible in both modes\n Test both modes before delivery\nLayout\n Floating elements have proper spacing from edges\n No content hidden behind fixed navbars\n Responsive at 375px, 768px, 1024px, 1440px\n No horizontal scroll on mobile\nAccessibility\n All images have alt text\n Form inputs have labels\n Color is not the only indicator\n prefers-reduced-motion respected"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ahump20/ui-ux-pro-max-2",
    "publisherUrl": "https://clawhub.ai/ahump20/ui-ux-pro-max-2",
    "owner": "ahump20",
    "version": "0.1.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}