# Send UI to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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. ``` ### Upgrade existing ```text 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. ``` ## Machine-readable fields ```json { "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": { "downloadUrl": "/downloads/ui", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "ui", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-01T15:57:42.739Z", "expiresAt": "2026-05-08T15:57:42.739Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui", "contentDisposition": "attachment; filename=\"ui-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "ui" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "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." ] } }, "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" } } ``` ## Documentation ### Visual Hierarchy One focal point per screen—eye knows where to go first Size, color, weight establish importance—primary action most prominent Group related elements—proximity implies relationship White space is not wasted space—breathing room aids scanning ### Typography Maximum 2-3 font families—more creates visual noise Clear size scale: title > heading > body > caption—distinct steps, not gradual Line height 1.4-1.6 for body text—too tight or loose hurts readability Line length 45-75 characters—prevents eye fatigue Left-align body text—centered only for short headings ### Color Usage Primary color for primary actions—one dominant brand color Semantic colors consistent: red=error, green=success, yellow=warning Don't rely on color alone—add icons, text, patterns for accessibility Neutral palette for most UI—color for emphasis, not everywhere Test color blindness scenarios—8% of men affected ### Spacing System Use consistent scale: 4px, 8px, 16px, 24px, 32px, 48px Apply same spacing for same relationships—all card padding equal More space around groups than within—visual grouping through proximity Generous padding on touch targets—44px minimum for mobile ### Alignment Grid system for consistency—8px or 4px base grid Align to invisible lines—elements share edges, not scattered Left edge strongest for LTR—anchor content predictably Optical alignment when needed—visual center differs from mathematical ### Component States Default, hover, active, focus, disabled—all states designed Focus state visible and clear—keyboard users need this Disabled looks disabled—reduced opacity, no pointer cursor Loading state replaces content—not just overlay Error state in context—red border, inline message ### Icons Consistent style throughout—don't mix outlined and filled Recognizable at small sizes—simple shapes work better Labels when meaning ambiguous—icon + text clearer than icon alone Touch target larger than visual icon—44px tap area, 24px icon ### Imagery Consistent aspect ratios—don't stretch or skew Fallback for failed loads—placeholder, not broken image Alt text for content images—decorative images alt="" Compress appropriately—quality vs file size balance ### Responsive Design Design for smallest screen first—enhance for larger Breakpoints based on content—not arbitrary device widths Touch targets larger on touch screens—hover states only on desktop Consider landscape orientation—especially for tablets ### Dark Mode Not just color inversion—redesign depth and emphasis Reduce contrast slightly—pure white on black strains eyes Shadows don't work same—use lighter surfaces for elevation Test all states—errors, success, charts, images Respect system preference—but allow override ### Motion and Animation Duration 150-300ms for transitions—fast but perceptible Ease-out for entering—starts fast, settles in Ease-in for exiting—accelerates out of view Consistent timing across similar interactions Purpose: guide attention, show relationships, provide feedback ### Design Tokens Define tokens for colors, spacing, typography—single source of truth Semantic naming: color-error not color-red Enables theming and dark mode—swap token values Scales with product—change once, update everywhere ### Common Mistakes Too many font sizes—stick to the scale Inconsistent spacing—creates unpolished feel Low contrast text—4.5:1 minimum for accessibility Buttons that don't look clickable—affordance matters Different styles for same component—cards should match cards ## Trust - Source: tencent - Verification: Indexed source record - Publisher: ivangdavila - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-01T15:57:42.739Z - Expires at: 2026-05-08T15:57:42.739Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/ui) - [Send to Agent page](https://openagent3.xyz/skills/ui/agent) - [JSON manifest](https://openagent3.xyz/skills/ui/agent.json) - [Markdown brief](https://openagent3.xyz/skills/ui/agent.md) - [Download page](https://openagent3.xyz/downloads/ui)