# Send Frontend Builder 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-builder", "name": "Frontend Builder", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/h4gen/frontend-builder", "canonicalUrl": "https://clawhub.ai/h4gen/frontend-builder", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/frontend-builder", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-builder", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "references/inspected-skills.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "frontend-builder", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-03T11:44:59.229Z", "expiresAt": "2026-05-10T11:44:59.229Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-builder", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-builder", "contentDisposition": "attachment; filename=\"frontend-builder-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "frontend-builder" }, "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-builder" }, "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-builder", "downloadUrl": "https://openagent3.xyz/downloads/frontend-builder", "agentUrl": "https://openagent3.xyz/skills/frontend-builder/agent", "manifestUrl": "https://openagent3.xyz/skills/frontend-builder/agent.json", "briefUrl": "https://openagent3.xyz/skills/frontend-builder/agent.md" } } ``` ## Documentation ### Purpose Enable non-programmers to get production-grade frontend components from natural-language requirements. This meta-skill coordinates three upstream skills and produces implementation-ready output, usually as one .tsx file plus concise setup notes. It does not replace upstream skill logic and does not assume hidden dependencies are already installed. ### Required Installed Skills frontend-design-ultimate (inspected latest: 1.0.0) shadcn-ui (inspected latest: 1.0.0) react-expert (inspected latest: 0.1.0) Install/update: npx -y clawhub@latest install frontend-design-ultimate npx -y clawhub@latest install shadcn-ui npx -y clawhub@latest install react-expert npx -y clawhub@latest update --all Verify: npx -y clawhub@latest list ### OpenClaw Compatibility Notes This skill is written to match OpenClaw skill-loading rules: SKILL.md with YAML frontmatter and Markdown body single-line frontmatter keys metadata encoded as a single-line JSON object no unsupported custom top-level frontmatter keys If this file is edited later, keep those constraints intact. ### Runtime Prerequisites Minimum local stack: Node.js 18+ npm React + TypeScript project with Tailwind configured Adjacent ecosystem dependencies (from inspected upstream skill content): tailwindcss (layout/styling baseline) lucide-react (icons used by many shadcn examples) next-themes (theme toggle patterns in shadcn guidance) react-hook-form, zod, @hookform/resolvers (form patterns) optional: framer-motion (motion patterns from frontend-design-ultimate) optional: recharts or equivalent if a real chart package is required If user wants shadcn components and they are missing, include explicit setup commands in output: npx shadcn@latest init npx shadcn@latest add card button badge tabs table sheet sidebar Do not assume Next.js unless the user says Next.js. Default to framework-agnostic React .tsx output that can run in Vite or Next.js with minimal adaptation. ### Inputs the LM Must Collect First ui_goal (dashboard, landing page, admin panel, etc.) theme_mode (dark, light, or system) primary_metrics (for example revenue, MRR, growth) chart_expectation (line, bar, area; static or interactive) layout_density (compact, balanced, spacious) brand_constraints (colors, logo, typography constraints) target_framework (vite-react, nextjs, or generic-react) single_file_strict (true/false) If any critical input is missing, make explicit defaults and state them in Assumptions. ### frontend-design-ultimate Use for visual direction and anti-generic design decisions: choose strong aesthetic direction define typographic hierarchy and color system enforce mobile-first responsiveness avoid boilerplate “AI-slop” layouts From inspected upstream guidance: commit to one clear tone include an unforgettable visual element prefer CSS variables and strong contrast avoid generic default fonts ### shadcn-ui Use for robust UI primitives and composition patterns: cards, tabs, sheets, navigation, table, badges, dialogs theming conventions and dark mode compatibility predictable component structure for fast shipping From inspected upstream guidance: components are copied into the project (not a hosted runtime UI SDK) include install commands for any components you reference prefer composable primitives for layout and data display ### react-expert Use for behavioral correctness and maintainability: state design and data flow strict TypeScript-first component patterns accessibility and predictable rendering behavior optional performance hardening for non-trivial UI From inspected upstream guidance: avoid state mutation and unstable keys use semantic structure and cleanup in effects ship clear typed interfaces for props/data ### Canonical Causal Chain Use this exact orchestration order. Requirement Parse Normalize user request into goals, constraints, and output contract. Design Direction (frontend-design-ultimate) Select one explicit aesthetic mode. Define palette, type scale, spacing, and page composition. Decide dark-mode token strategy. Component Architecture (shadcn-ui) Map UI blocks to component primitives (sidebar, card, tabs, table, badge). Declare required shadcn installs for referenced primitives. React Glue Logic (react-expert) Implement typed data models and render loops. Add local state/hooks where required. Keep logic simple and deterministic for copy-paste usability. Output Assembly Produce one .tsx file by default. Include short Setup section with required install commands. Include Assumptions and Adaptation Notes. ### Output Contract Default output must contain: Setup: exact npm/npx commands for missing dependencies shadcn component add commands used by generated code Single TSX File: one self-contained React component in TypeScript imports listed at top mock data included inline unless user supplies real data source Assumptions: explicit defaults chosen due to missing input Adaptation Notes: where to plug in real API data which imports to remove if a component is unavailable No auxiliary script generation. No multi-file scaffolding unless user explicitly asks. ### Chart Handling Rule If chart library is not guaranteed in target project: default to a semantic “chart-ready” card layout with placeholders, or use lightweight inline SVG chart logic in the same .tsx. Do not hallucinate unavailable chart components. If using external chart lib (for example Recharts), include install command and clearly label as optional. ### Scenario Mapping: Revenue Dashboard (Dark Mode) For scenario: "I need a dark-mode dashboard showing revenue metrics" Execution: frontend-design-ultimate defines dark palette, bold typography, and dashboard composition (sidebar + metric grid + chart area). shadcn-ui maps layout to Card, Badge, Tabs, optional Sidebar primitives. react-expert creates typed metric arrays and rendering loops for KPI tiles + trend view. final output returns one production-usable .tsx component plus setup commands. ### Quality Gates Before finalizing output, ensure: component compiles as TSX (no missing symbols in emitted code) design is intentional, not default-template generic dark mode tokens are coherent and readable mobile behavior is included (sm/md/lg responsive strategy) all referenced UI components are listed in setup commands no fake API calls presented as real integrations If any gate fails, return Needs Revision with a concrete missing-items list. ### Guardrails Never claim “works out of the box” without listing dependency assumptions. Never emit components from libraries not declared in setup. Never hide unresolved decisions (state them under Assumptions). Prefer one high-quality component over broad but shallow scaffolding. ### Failure Handling Missing upstream skills: stop and report exact missing skills. Missing project context: output generic React version and mark adaptation points. Missing chart dependency: provide fallback rendering path and optional install command. Conflicting constraints (for example “single file” + “full app routing”): prioritize single-file contract and document tradeoff. ## Trust - Source: tencent - Verification: Indexed source record - Publisher: h4gen - 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-03T11:44:59.229Z - Expires at: 2026-05-10T11:44:59.229Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/frontend-builder) - [Send to Agent page](https://openagent3.xyz/skills/frontend-builder/agent) - [JSON manifest](https://openagent3.xyz/skills/frontend-builder/agent.json) - [Markdown brief](https://openagent3.xyz/skills/frontend-builder/agent.md) - [Download page](https://openagent3.xyz/downloads/frontend-builder)