{
  "schemaVersion": "1.0",
  "item": {
    "slug": "ui",
    "name": "UI",
    "source": "tencent",
    "type": "skill",
    "category": "通讯协作",
    "sourceUrl": "https://clawhub.ai/ivangdavila/ui",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/ui",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/ui",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui",
    "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-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"
    },
    "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",
    "agentPageUrl": "https://openagent3.xyz/skills/ui/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui/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": "Visual Hierarchy",
        "body": "One focal point per screen—eye knows where to go first\nSize, color, weight establish importance—primary action most prominent\nGroup related elements—proximity implies relationship\nWhite space is not wasted space—breathing room aids scanning"
      },
      {
        "title": "Typography",
        "body": "Maximum 2-3 font families—more creates visual noise\nClear size scale: title > heading > body > caption—distinct steps, not gradual\nLine height 1.4-1.6 for body text—too tight or loose hurts readability\nLine length 45-75 characters—prevents eye fatigue\nLeft-align body text—centered only for short headings"
      },
      {
        "title": "Color Usage",
        "body": "Primary color for primary actions—one dominant brand color\nSemantic colors consistent: red=error, green=success, yellow=warning\nDon't rely on color alone—add icons, text, patterns for accessibility\nNeutral palette for most UI—color for emphasis, not everywhere\nTest color blindness scenarios—8% of men affected"
      },
      {
        "title": "Spacing System",
        "body": "Use consistent scale: 4px, 8px, 16px, 24px, 32px, 48px\nApply same spacing for same relationships—all card padding equal\nMore space around groups than within—visual grouping through proximity\nGenerous padding on touch targets—44px minimum for mobile"
      },
      {
        "title": "Alignment",
        "body": "Grid system for consistency—8px or 4px base grid\nAlign to invisible lines—elements share edges, not scattered\nLeft edge strongest for LTR—anchor content predictably\nOptical alignment when needed—visual center differs from mathematical"
      },
      {
        "title": "Component States",
        "body": "Default, hover, active, focus, disabled—all states designed\nFocus state visible and clear—keyboard users need this\nDisabled looks disabled—reduced opacity, no pointer cursor\nLoading state replaces content—not just overlay\nError state in context—red border, inline message"
      },
      {
        "title": "Icons",
        "body": "Consistent style throughout—don't mix outlined and filled\nRecognizable at small sizes—simple shapes work better\nLabels when meaning ambiguous—icon + text clearer than icon alone\nTouch target larger than visual icon—44px tap area, 24px icon"
      },
      {
        "title": "Imagery",
        "body": "Consistent aspect ratios—don't stretch or skew\nFallback for failed loads—placeholder, not broken image\nAlt text for content images—decorative images alt=\"\"\nCompress appropriately—quality vs file size balance"
      },
      {
        "title": "Responsive Design",
        "body": "Design for smallest screen first—enhance for larger\nBreakpoints based on content—not arbitrary device widths\nTouch targets larger on touch screens—hover states only on desktop\nConsider landscape orientation—especially for tablets"
      },
      {
        "title": "Dark Mode",
        "body": "Not just color inversion—redesign depth and emphasis\nReduce contrast slightly—pure white on black strains eyes\nShadows don't work same—use lighter surfaces for elevation\nTest all states—errors, success, charts, images\nRespect system preference—but allow override"
      },
      {
        "title": "Motion and Animation",
        "body": "Duration 150-300ms for transitions—fast but perceptible\nEase-out for entering—starts fast, settles in\nEase-in for exiting—accelerates out of view\nConsistent timing across similar interactions\nPurpose: guide attention, show relationships, provide feedback"
      },
      {
        "title": "Design Tokens",
        "body": "Define tokens for colors, spacing, typography—single source of truth\nSemantic naming: color-error not color-red\nEnables theming and dark mode—swap token values\nScales with product—change once, update everywhere"
      },
      {
        "title": "Common Mistakes",
        "body": "Too many font sizes—stick to the scale\nInconsistent spacing—creates unpolished feel\nLow contrast text—4.5:1 minimum for accessibility\nButtons that don't look clickable—affordance matters\nDifferent styles for same component—cards should match cards"
      }
    ],
    "body": "Visual Hierarchy\nOne focal point per screen—eye knows where to go first\nSize, color, weight establish importance—primary action most prominent\nGroup related elements—proximity implies relationship\nWhite space is not wasted space—breathing room aids scanning\nTypography\nMaximum 2-3 font families—more creates visual noise\nClear size scale: title > heading > body > caption—distinct steps, not gradual\nLine height 1.4-1.6 for body text—too tight or loose hurts readability\nLine length 45-75 characters—prevents eye fatigue\nLeft-align body text—centered only for short headings\nColor Usage\nPrimary color for primary actions—one dominant brand color\nSemantic colors consistent: red=error, green=success, yellow=warning\nDon't rely on color alone—add icons, text, patterns for accessibility\nNeutral palette for most UI—color for emphasis, not everywhere\nTest color blindness scenarios—8% of men affected\nSpacing System\nUse consistent scale: 4px, 8px, 16px, 24px, 32px, 48px\nApply same spacing for same relationships—all card padding equal\nMore space around groups than within—visual grouping through proximity\nGenerous padding on touch targets—44px minimum for mobile\nAlignment\nGrid system for consistency—8px or 4px base grid\nAlign to invisible lines—elements share edges, not scattered\nLeft edge strongest for LTR—anchor content predictably\nOptical alignment when needed—visual center differs from mathematical\nComponent States\nDefault, hover, active, focus, disabled—all states designed\nFocus state visible and clear—keyboard users need this\nDisabled looks disabled—reduced opacity, no pointer cursor\nLoading state replaces content—not just overlay\nError state in context—red border, inline message\nIcons\nConsistent style throughout—don't mix outlined and filled\nRecognizable at small sizes—simple shapes work better\nLabels when meaning ambiguous—icon + text clearer than icon alone\nTouch target larger than visual icon—44px tap area, 24px icon\nImagery\nConsistent aspect ratios—don't stretch or skew\nFallback for failed loads—placeholder, not broken image\nAlt text for content images—decorative images alt=\"\"\nCompress appropriately—quality vs file size balance\nResponsive Design\nDesign for smallest screen first—enhance for larger\nBreakpoints based on content—not arbitrary device widths\nTouch targets larger on touch screens—hover states only on desktop\nConsider landscape orientation—especially for tablets\nDark Mode\nNot just color inversion—redesign depth and emphasis\nReduce contrast slightly—pure white on black strains eyes\nShadows don't work same—use lighter surfaces for elevation\nTest all states—errors, success, charts, images\nRespect system preference—but allow override\nMotion and Animation\nDuration 150-300ms for transitions—fast but perceptible\nEase-out for entering—starts fast, settles in\nEase-in for exiting—accelerates out of view\nConsistent timing across similar interactions\nPurpose: guide attention, show relationships, provide feedback\nDesign Tokens\nDefine tokens for colors, spacing, typography—single source of truth\nSemantic naming: color-error not color-red\nEnables theming and dark mode—swap token values\nScales with product—change once, update everywhere\nCommon Mistakes\nToo many font sizes—stick to the scale\nInconsistent spacing—creates unpolished feel\nLow contrast text—4.5:1 minimum for accessibility\nButtons that don't look clickable—affordance matters\nDifferent styles for same component—cards should match cards"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/ui",
    "publisherUrl": "https://clawhub.ai/ivangdavila/ui",
    "owner": "ivangdavila",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/ui",
    "downloadUrl": "https://openagent3.xyz/downloads/ui",
    "agentUrl": "https://openagent3.xyz/skills/ui/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui/agent.md"
  }
}