{
  "schemaVersion": "1.0",
  "item": {
    "slug": "ui-skills",
    "name": "Ui Skills",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/CorrectRoadH/ui-skills",
    "canonicalUrl": "https://clawhub.ai/CorrectRoadH/ui-skills",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/ui-skills",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-skills",
    "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-skills"
    },
    "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-skills",
    "agentPageUrl": "https://openagent3.xyz/skills/ui-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-skills/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 Skills",
        "body": "Opinionated constraints for building better interfaces with agents."
      },
      {
        "title": "Stack",
        "body": "MUST use Tailwind CSS defaults (spacing, radius, shadows) before custom values\nMUST use motion/react (formerly framer-motion) when JavaScript animation is required\nSHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS\nMUST use cn utility (clsx + tailwind-merge) for class logic"
      },
      {
        "title": "Components",
        "body": "MUST use accessible component primitives for anything with keyboard or focus behavior (Base UI, React Aria, Radix)\nMUST use the project’s existing component primitives first\nNEVER mix primitive systems within the same interaction surface\nSHOULD prefer Base UI for new primitives if compatible with the stack\nMUST add an aria-label to icon-only buttons\nNEVER rebuild keyboard or focus behavior by hand unless explicitly requested"
      },
      {
        "title": "Interaction",
        "body": "MUST use an AlertDialog for destructive or irreversible actions\nSHOULD use structural skeletons for loading states\nNEVER use h-screen, use h-dvh\nMUST respect safe-area-inset for fixed elements\nMUST show errors next to where the action happens\nNEVER block paste in input or textarea elements"
      },
      {
        "title": "Animation",
        "body": "NEVER add animation unless it is explicitly requested\nMUST animate only compositor props (transform, opacity)\nNEVER animate layout properties (width, height, top, left, margin, padding)\nSHOULD avoid animating paint properties (background, color) except for small, local UI (text, icons)\nSHOULD use ease-out on entrance\nNEVER exceed 200ms for interaction feedback\nMUST pause looping animations when off-screen\nMUST respect prefers-reduced-motion\nNEVER introduce custom easing curves unless explicitly requested\nSHOULD avoid animating large images or full-screen surfaces"
      },
      {
        "title": "Typography",
        "body": "MUST use text-balance for headings and text-pretty for body/paragraphs\nMUST use tabular-nums for data\nSHOULD use truncate or line-clamp for dense UI\nNEVER modify letter-spacing (tracking-) unless explicitly requested"
      },
      {
        "title": "Layout",
        "body": "MUST use a fixed z-index scale (no arbitrary z-x)\nSHOULD use size-x for square elements instead of w-x + h-x"
      },
      {
        "title": "Performance",
        "body": "NEVER animate large blur() or backdrop-filter surfaces\nNEVER apply will-change outside an active animation\nNEVER use useEffect for anything that can be expressed as render logic"
      },
      {
        "title": "Design",
        "body": "NEVER use gradients unless explicitly requested\nNEVER use purple or multicolor gradients\nNEVER use glow effects as primary affordances\nSHOULD use Tailwind CSS default shadow scale unless explicitly requested\nMUST give empty states one clear next action\nSHOULD limit accent color usage to one per view\nSHOULD use existing theme or Tailwind CSS color tokens before introducing new ones"
      }
    ],
    "body": "UI Skills\n\nOpinionated constraints for building better interfaces with agents.\n\nStack\nMUST use Tailwind CSS defaults (spacing, radius, shadows) before custom values\nMUST use motion/react (formerly framer-motion) when JavaScript animation is required\nSHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS\nMUST use cn utility (clsx + tailwind-merge) for class logic\nComponents\nMUST use accessible component primitives for anything with keyboard or focus behavior (Base UI, React Aria, Radix)\nMUST use the project’s existing component primitives first\nNEVER mix primitive systems within the same interaction surface\nSHOULD prefer Base UI for new primitives if compatible with the stack\nMUST add an aria-label to icon-only buttons\nNEVER rebuild keyboard or focus behavior by hand unless explicitly requested\nInteraction\nMUST use an AlertDialog for destructive or irreversible actions\nSHOULD use structural skeletons for loading states\nNEVER use h-screen, use h-dvh\nMUST respect safe-area-inset for fixed elements\nMUST show errors next to where the action happens\nNEVER block paste in input or textarea elements\nAnimation\nNEVER add animation unless it is explicitly requested\nMUST animate only compositor props (transform, opacity)\nNEVER animate layout properties (width, height, top, left, margin, padding)\nSHOULD avoid animating paint properties (background, color) except for small, local UI (text, icons)\nSHOULD use ease-out on entrance\nNEVER exceed 200ms for interaction feedback\nMUST pause looping animations when off-screen\nMUST respect prefers-reduced-motion\nNEVER introduce custom easing curves unless explicitly requested\nSHOULD avoid animating large images or full-screen surfaces\nTypography\nMUST use text-balance for headings and text-pretty for body/paragraphs\nMUST use tabular-nums for data\nSHOULD use truncate or line-clamp for dense UI\nNEVER modify letter-spacing (tracking-) unless explicitly requested\nLayout\nMUST use a fixed z-index scale (no arbitrary z-x)\nSHOULD use size-x for square elements instead of w-x + h-x\nPerformance\nNEVER animate large blur() or backdrop-filter surfaces\nNEVER apply will-change outside an active animation\nNEVER use useEffect for anything that can be expressed as render logic\nDesign\nNEVER use gradients unless explicitly requested\nNEVER use purple or multicolor gradients\nNEVER use glow effects as primary affordances\nSHOULD use Tailwind CSS default shadow scale unless explicitly requested\nMUST give empty states one clear next action\nSHOULD limit accent color usage to one per view\nSHOULD use existing theme or Tailwind CSS color tokens before introducing new ones"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/CorrectRoadH/ui-skills",
    "publisherUrl": "https://clawhub.ai/CorrectRoadH/ui-skills",
    "owner": "CorrectRoadH",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/ui-skills",
    "downloadUrl": "https://openagent3.xyz/downloads/ui-skills",
    "agentUrl": "https://openagent3.xyz/skills/ui-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-skills/agent.md"
  }
}