{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/ui-ux",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "data/products.csv",
      "data/web-interface.csv",
      "data/icons.csv",
      "data/landing.csv"
    ],
    "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. 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."
        },
        {
          "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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-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"
    },
    "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",
    "agentPageUrl": "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"
  },
  "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. 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."
      },
      {
        "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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "UI/UX Pro Max",
        "body": "Searchable design database with CLI for generating complete design systems from natural language queries.\n\nSee also: ui-design for fundamentals and decision-making. This skill provides data-driven recommendations via CLI."
      },
      {
        "title": "When to Use",
        "body": "Designing 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": "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": "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 the problem\ncursor-pointer — Add cursor-pointer to clickable elements"
      },
      {
        "title": "Performance (HIGH)",
        "body": "image-optimization — Use WebP, srcset, lazy loading\nreduced-motion — Check prefers-reduced-motion\ncontent-jumping — Reserve space for async content"
      },
      {
        "title": "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": "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": "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": "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": "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": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install ui-ux-pro-max"
      },
      {
        "title": "Prerequisites",
        "body": "Python 3 is required for the search CLI.\n\npython3 --version"
      },
      {
        "title": "Workflow",
        "body": "When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow these steps."
      },
      {
        "title": "Step 1: Analyze Requirements",
        "body": "Extract from the user request:\n\nProduct type: SaaS, e-commerce, portfolio, dashboard, landing page\nStyle keywords: minimal, playful, professional, elegant, dark mode\nIndustry: healthcare, fintech, gaming, education\nStack: React, Vue, Next.js, or default to html-tailwind"
      },
      {
        "title": "Step 2: Generate Design System",
        "body": "Always start with --design-system to get comprehensive recommendations:\n\npython3 scripts/search.py \"<product_type> <industry> <keywords>\" --design-system [-p \"Project Name\"]\n\nThis 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.\n\nExample:\n\npython3 scripts/search.py \"beauty spa wellness service\" --design-system -p \"Serenity Spa\""
      },
      {
        "title": "Step 2b: Persist Design System",
        "body": "Save the design system for hierarchical retrieval across sessions:\n\npython3 scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\"\n\nCreates:\n\ndesign-system/MASTER.md — Global source of truth\ndesign-system/pages/ — Folder for page-specific overrides\n\nWith page override:\n\npython3 scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n\nHierarchical 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."
      },
      {
        "title": "Step 3: Supplement with Domain Searches",
        "body": "After generating the design system, use domain searches for additional detail:\n\npython3 scripts/search.py \"<keyword>\" --domain <domain> [-n <max_results>]\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",
        "body": "Get implementation-specific best practices. Default to html-tailwind if unspecified.\n\npython3 scripts/search.py \"<keyword>\" --stack html-tailwind\n\nAvailable stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose"
      },
      {
        "title": "Domains",
        "body": "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)"
      },
      {
        "title": "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, formsjetpack-composeComposables, Modifiers, State Hoisting"
      },
      {
        "title": "Output Formats",
        "body": "# ASCII box (default) — best for terminal display\npython3 scripts/search.py \"fintech crypto\" --design-system\n\n# Markdown — best for documentation\npython3 scripts/search.py \"fintech crypto\" --design-system -f markdown"
      },
      {
        "title": "Example Workflow",
        "body": "User request: \"Build a landing page for a professional skincare service\"\n\nStep 1 — Analyze: Beauty/Spa service, elegant/professional, html-tailwind default.\n\nStep 2 — Design system:\n\npython3 scripts/search.py \"beauty spa wellness service elegant\" --design-system -p \"Serenity Spa\"\n\nStep 3 — Supplement:\n\npython3 scripts/search.py \"animation accessibility\" --domain ux\npython3 scripts/search.py \"elegant luxury serif\" --domain typography\n\nStep 4 — Stack:\n\npython3 scripts/search.py \"layout responsive form\" --stack html-tailwind\n\nThen synthesize design system + detailed searches and implement."
      },
      {
        "title": "Search Tips",
        "body": "Be specific — \"healthcare SaaS dashboard\" beats \"app\"\nSearch multiple times — Different keywords reveal different insights\nCombine domains — Style + Typography + Color = complete system\nAlways check UX — Search \"animation\", \"z-index\", \"accessibility\" for common issues\nUse the stack flag — Get implementation-specific best practices\nIterate — If first search misses, try different keywords"
      },
      {
        "title": "Icons & Visual Elements",
        "body": "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"
      },
      {
        "title": "Interaction & Cursor",
        "body": "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"
      },
      {
        "title": "Light/Dark Mode Contrast",
        "body": "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)"
      },
      {
        "title": "Layout & Spacing",
        "body": "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"
      },
      {
        "title": "Visual Quality",
        "body": "No emojis used as icons (use SVG instead)\n All icons from consistent set (Heroicons/Lucide)\n Brand logos verified (Simple Icons)\n Hover states don't cause layout shift\n Theme colors used 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 150-300ms\n Focus states visible for keyboard navigation"
      },
      {
        "title": "Light/Dark Mode",
        "body": "Light mode text has 4.5:1 minimum contrast\n Glass/transparent elements visible in light mode\n Borders visible in both modes\n Both modes tested before delivery"
      },
      {
        "title": "Layout",
        "body": "Floating elements have proper edge spacing\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\n\nSearchable design database with CLI for generating complete design systems from natural language queries.\n\nSee also: ui-design for fundamentals and decision-making. This skill provides data-driven recommendations via CLI.\n\nWhen to Use\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\nAccessibility (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\nTouch & 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 the problem\ncursor-pointer — Add cursor-pointer to clickable elements\nPerformance (HIGH)\nimage-optimization — Use WebP, srcset, lazy loading\nreduced-motion — Check prefers-reduced-motion\ncontent-jumping — Reserve space for async content\nLayout & 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)\nTypography & 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\nAnimation (MEDIUM)\nduration-timing — Use 150-300ms for micro-interactions\ntransform-performance — Use transform/opacity, not width/height\nloading-states — Skeleton screens or spinners\nStyle Selection (MEDIUM)\nstyle-match — Match style to product type\nconsistency — Use same style across all pages\nno-emoji-icons — Use SVG icons, not emojis\nCharts & Data (LOW)\nchart-type — Match chart type to data type\ncolor-guidance — Use accessible color palettes\ndata-table — Provide table alternative for accessibility\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install ui-ux-pro-max\n\nPrerequisites\n\nPython 3 is required for the search CLI.\n\npython3 --version\n\nWorkflow\n\nWhen a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow these steps.\n\nStep 1: Analyze Requirements\n\nExtract from the user request:\n\nProduct type: SaaS, e-commerce, portfolio, dashboard, landing page\nStyle keywords: minimal, playful, professional, elegant, dark mode\nIndustry: healthcare, fintech, gaming, education\nStack: React, Vue, Next.js, or default to html-tailwind\nStep 2: Generate Design System\n\nAlways start with --design-system to get comprehensive recommendations:\n\npython3 scripts/search.py \"<product_type> <industry> <keywords>\" --design-system [-p \"Project Name\"]\n\n\nThis 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.\n\nExample:\n\npython3 scripts/search.py \"beauty spa wellness service\" --design-system -p \"Serenity Spa\"\n\nStep 2b: Persist Design System\n\nSave the design system for hierarchical retrieval across sessions:\n\npython3 scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\"\n\n\nCreates:\n\ndesign-system/MASTER.md — Global source of truth\ndesign-system/pages/ — Folder for page-specific overrides\n\nWith page override:\n\npython3 scripts/search.py \"<query>\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n\n\nHierarchical 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.\n\nStep 3: Supplement with Domain Searches\n\nAfter generating the design system, use domain searches for additional detail:\n\npython3 scripts/search.py \"<keyword>\" --domain <domain> [-n <max_results>]\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\n\nGet implementation-specific best practices. Default to html-tailwind if unspecified.\n\npython3 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\nDomains\nDomain\tUse For\tExample Keywords\nproduct\tProduct type recommendations\tSaaS, e-commerce, portfolio, healthcare\nstyle\tUI styles, colors, effects\tglassmorphism, minimalism, dark mode\ntypography\tFont pairings, Google Fonts\telegant, playful, professional\ncolor\tColor palettes by product type\tsaas, ecommerce, healthcare, fintech\nlanding\tPage structure, CTA strategies\thero, testimonial, pricing, social-proof\nchart\tChart types, library recs\ttrend, comparison, timeline, funnel\nux\tBest practices, anti-patterns\tanimation, accessibility, z-index\nreact\tReact/Next.js performance\twaterfall, bundle, suspense, memo\nweb\tWeb interface guidelines\taria, focus, keyboard, semantic\nprompt\tAI prompts, CSS keywords\t(style name)\nStacks\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\njetpack-compose\tComposables, Modifiers, State Hoisting\nOutput Formats\n# ASCII box (default) — best for terminal display\npython3 scripts/search.py \"fintech crypto\" --design-system\n\n# Markdown — best for documentation\npython3 scripts/search.py \"fintech crypto\" --design-system -f markdown\n\nExample Workflow\n\nUser request: \"Build a landing page for a professional skincare service\"\n\nStep 1 — Analyze: Beauty/Spa service, elegant/professional, html-tailwind default.\n\nStep 2 — Design system:\n\npython3 scripts/search.py \"beauty spa wellness service elegant\" --design-system -p \"Serenity Spa\"\n\n\nStep 3 — Supplement:\n\npython3 scripts/search.py \"animation accessibility\" --domain ux\npython3 scripts/search.py \"elegant luxury serif\" --domain typography\n\n\nStep 4 — Stack:\n\npython3 scripts/search.py \"layout responsive form\" --stack html-tailwind\n\n\nThen synthesize design system + detailed searches and implement.\n\nSearch Tips\nBe specific — \"healthcare SaaS dashboard\" beats \"app\"\nSearch multiple times — Different keywords reveal different insights\nCombine domains — Style + Typography + Color = complete system\nAlways check UX — Search \"animation\", \"z-index\", \"accessibility\" for common issues\nUse the stack flag — Get implementation-specific best practices\nIterate — If first search misses, try different keywords\nCommon Rules for Professional UI\nIcons & Visual Elements\nRule\tDo\tDon't\nNo emoji icons\tUse SVG icons (Heroicons, Lucide, Simple Icons)\tUse emojis as UI icons\nStable hover states\tUse color/opacity transitions\tUse scale transforms that shift layout\nCorrect brand logos\tResearch official SVG from Simple Icons\tGuess or use incorrect logo paths\nConsistent icon sizing\tFixed viewBox (24x24) with w-6 h-6\tMix different icon sizes\nInteraction & Cursor\nRule\tDo\tDon't\nCursor pointer\tcursor-pointer on all clickable elements\tLeave default cursor on interactive elements\nHover feedback\tVisual feedback (color, shadow, border)\tNo indication element is interactive\nSmooth transitions\ttransition-colors duration-200\tInstant changes or >500ms\nLight/Dark Mode Contrast\nRule\tDo\tDon't\nGlass card (light)\tbg-white/80 or higher opacity\tbg-white/10 (too transparent)\nText contrast (light)\t#0F172A (slate-900) for text\t#94A3B8 (slate-400) for body text\nMuted text (light)\t#475569 (slate-600) minimum\tgray-400 or lighter\nBorder visibility\tborder-gray-200 in light mode\tborder-white/10 (invisible)\nLayout & Spacing\nRule\tDo\tDon't\nFloating navbar\ttop-4 left-4 right-4 spacing\tStick to top-0 left-0 right-0\nContent padding\tAccount for fixed navbar height\tLet content hide behind fixed elements\nConsistent max-width\tSame max-w-6xl or max-w-7xl\tMix different container widths\nPre-Delivery Checklist\nVisual Quality\n No emojis used as icons (use SVG instead)\n All icons from consistent set (Heroicons/Lucide)\n Brand logos verified (Simple Icons)\n Hover states don't cause layout shift\n Theme colors used directly (bg-primary not var() wrapper)\nInteraction\n All clickable elements have cursor-pointer\n Hover states provide clear visual feedback\n Transitions are 150-300ms\n Focus states visible for keyboard navigation\nLight/Dark Mode\n Light mode text has 4.5:1 minimum contrast\n Glass/transparent elements visible in light mode\n Borders visible in both modes\n Both modes tested before delivery\nLayout\n Floating elements have proper edge spacing\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/wpank/ui-ux",
    "publisherUrl": "https://clawhub.ai/wpank/ui-ux",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}