# Send Frontend Design 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": "frontend",
    "name": "Frontend Design",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/ivangdavila/frontend",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/frontend",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/frontend",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "animation.md",
      "colors.md",
      "examples.md",
      "mobile.md",
      "stack.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "frontend",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-03T11:44:15.311Z",
      "expiresAt": "2026-05-10T11:44:15.311Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend",
        "contentDisposition": "attachment; filename=\"frontend-1.0.2.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "frontend"
      },
      "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/frontend"
    },
    "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/frontend",
    "downloadUrl": "https://openagent3.xyz/downloads/frontend",
    "agentUrl": "https://openagent3.xyz/skills/frontend/agent",
    "manifestUrl": "https://openagent3.xyz/skills/frontend/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/frontend/agent.md"
  }
}
```
## Documentation

### When to Use

User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.

### Quick Reference

TopicFileStack & toolingstack.mdTypography rulestypography.mdColor systemscolors.mdMobile patternsmobile.mdAnimationanimation.mdExamplesexamples.md

### 1. Mobile-First Always

Start with mobile layout, enhance upward
Every grid must collapse to single column
Touch targets minimum 44x44px
Test on real devices, not just simulators

### 2. Typography Matters

Avoid generic fonts (Inter, Roboto, Arial)
Use dramatic size jumps (2x+), not timid increments
Body text 16-18px minimum
See typography.md for specific recommendations

### 3. Color with Purpose

70-20-10 rule: primary, secondary, accent
Commit to light OR dark — no muddy mid-grays
Never solid white backgrounds — add depth
See colors.md for CSS variables and patterns

### 4. Feedback on Every Interaction

Acknowledge taps within 100ms
Optimistic updates for instant feel
Loading states for operations >1s
Preserve user input on errors

### 5. Accessibility Non-Negotiable

Color contrast 4.5:1 (text), 3:1 (UI)
Focus states on all interactive elements
Semantic HTML (nav, main, section, article)
Keyboard navigation works for everything

### 6. Performance from Start

Lazy load below-fold content
Image placeholders prevent layout shift
Code split heavy components
Target LCP <2.5s, CLS <0.1

### 7. One Memorable Element

Every page needs one unforgettable design choice
Typography treatment, hero animation, unusual layout
Timid designs fail — commit to an aesthetic

### Frontend Traps

TrapConsequenceFixGeneric fontsLooks like every other siteUse distinctive fontsSolid white backgroundsFlat, lifelessAdd gradients, grain, depthMobile as afterthoughtBroken for 60% of usersMobile-first alwaysForm error clears inputUser ragePreserve input, highlight errorNo loading statesUser thinks brokenShow progress immediatelyTimid type scaleNo visual hierarchyUse 2x+ jumps for headlines

### Scope

This skill ONLY:

Provides frontend patterns and guidelines
Recommends stack and tooling choices
Guides responsive implementation

This skill NEVER:

Makes network requests
Accesses user data
Stores any information

### Security & Privacy

This skill is read-only guidance. No data is collected, sent, or stored.

### Feedback

If useful: clawhub star frontend
Stay updated: clawhub sync
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: ivangdavila
- Version: 1.0.2
## 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-03T11:44:15.311Z
- Expires at: 2026-05-10T11:44:15.311Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/frontend)
- [Send to Agent page](https://openagent3.xyz/skills/frontend/agent)
- [JSON manifest](https://openagent3.xyz/skills/frontend/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/frontend/agent.md)
- [Download page](https://openagent3.xyz/downloads/frontend)