{ "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": { "downloadMode": "redirect", "downloadUrl": "/downloads/frontend", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md", "animation.md", "colors.md", "examples.md", "mobile.md", "stack.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/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." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/frontend", "agentPageUrl": "https://openagent3.xyz/skills/frontend/agent", "manifestUrl": "https://openagent3.xyz/skills/frontend/agent.json", "briefUrl": "https://openagent3.xyz/skills/frontend/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": "When to Use", "body": "User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish." }, { "title": "Quick Reference", "body": "TopicFileStack & toolingstack.mdTypography rulestypography.mdColor systemscolors.mdMobile patternsmobile.mdAnimationanimation.mdExamplesexamples.md" }, { "title": "1. Mobile-First Always", "body": "Start with mobile layout, enhance upward\nEvery grid must collapse to single column\nTouch targets minimum 44x44px\nTest on real devices, not just simulators" }, { "title": "2. Typography Matters", "body": "Avoid generic fonts (Inter, Roboto, Arial)\nUse dramatic size jumps (2x+), not timid increments\nBody text 16-18px minimum\nSee typography.md for specific recommendations" }, { "title": "3. Color with Purpose", "body": "70-20-10 rule: primary, secondary, accent\nCommit to light OR dark — no muddy mid-grays\nNever solid white backgrounds — add depth\nSee colors.md for CSS variables and patterns" }, { "title": "4. Feedback on Every Interaction", "body": "Acknowledge taps within 100ms\nOptimistic updates for instant feel\nLoading states for operations >1s\nPreserve user input on errors" }, { "title": "5. Accessibility Non-Negotiable", "body": "Color contrast 4.5:1 (text), 3:1 (UI)\nFocus states on all interactive elements\nSemantic HTML (nav, main, section, article)\nKeyboard navigation works for everything" }, { "title": "6. Performance from Start", "body": "Lazy load below-fold content\nImage placeholders prevent layout shift\nCode split heavy components\nTarget LCP <2.5s, CLS <0.1" }, { "title": "7. One Memorable Element", "body": "Every page needs one unforgettable design choice\nTypography treatment, hero animation, unusual layout\nTimid designs fail — commit to an aesthetic" }, { "title": "Frontend Traps", "body": "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" }, { "title": "Scope", "body": "This skill ONLY:\n\nProvides frontend patterns and guidelines\nRecommends stack and tooling choices\nGuides responsive implementation\n\nThis skill NEVER:\n\nMakes network requests\nAccesses user data\nStores any information" }, { "title": "Security & Privacy", "body": "This skill is read-only guidance. No data is collected, sent, or stored." }, { "title": "Feedback", "body": "If useful: clawhub star frontend\nStay updated: clawhub sync" } ], "body": "When to Use\n\nUser needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.\n\nQuick Reference\nTopic\tFile\nStack & tooling\tstack.md\nTypography rules\ttypography.md\nColor systems\tcolors.md\nMobile patterns\tmobile.md\nAnimation\tanimation.md\nExamples\texamples.md\nCore Rules\n1. Mobile-First Always\nStart with mobile layout, enhance upward\nEvery grid must collapse to single column\nTouch targets minimum 44x44px\nTest on real devices, not just simulators\n2. Typography Matters\nAvoid generic fonts (Inter, Roboto, Arial)\nUse dramatic size jumps (2x+), not timid increments\nBody text 16-18px minimum\nSee typography.md for specific recommendations\n3. Color with Purpose\n70-20-10 rule: primary, secondary, accent\nCommit to light OR dark — no muddy mid-grays\nNever solid white backgrounds — add depth\nSee colors.md for CSS variables and patterns\n4. Feedback on Every Interaction\nAcknowledge taps within 100ms\nOptimistic updates for instant feel\nLoading states for operations >1s\nPreserve user input on errors\n5. Accessibility Non-Negotiable\nColor contrast 4.5:1 (text), 3:1 (UI)\nFocus states on all interactive elements\nSemantic HTML (nav, main, section, article)\nKeyboard navigation works for everything\n6. Performance from Start\nLazy load below-fold content\nImage placeholders prevent layout shift\nCode split heavy components\nTarget LCP <2.5s, CLS <0.1\n7. One Memorable Element\nEvery page needs one unforgettable design choice\nTypography treatment, hero animation, unusual layout\nTimid designs fail — commit to an aesthetic\nFrontend Traps\nTrap\tConsequence\tFix\nGeneric fonts\tLooks like every other site\tUse distinctive fonts\nSolid white backgrounds\tFlat, lifeless\tAdd gradients, grain, depth\nMobile as afterthought\tBroken for 60% of users\tMobile-first always\nForm error clears input\tUser rage\tPreserve input, highlight error\nNo loading states\tUser thinks broken\tShow progress immediately\nTimid type scale\tNo visual hierarchy\tUse 2x+ jumps for headlines\nScope\n\nThis skill ONLY:\n\nProvides frontend patterns and guidelines\nRecommends stack and tooling choices\nGuides responsive implementation\n\nThis skill NEVER:\n\nMakes network requests\nAccesses user data\nStores any information\nSecurity & Privacy\n\nThis skill is read-only guidance. No data is collected, sent, or stored.\n\nFeedback\nIf useful: clawhub star frontend\nStay updated: clawhub sync" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/ivangdavila/frontend", "publisherUrl": "https://clawhub.ai/ivangdavila/frontend", "owner": "ivangdavila", "version": "1.0.2", "license": null, "verificationStatus": "Indexed source record" }, "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" } }