{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/frontend-builder",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-builder",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "references/inspected-skills.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-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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/frontend-builder",
    "agentPageUrl": "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"
  },
  "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": "Purpose",
        "body": "Enable non-programmers to get production-grade frontend components from natural-language requirements.\n\nThis meta-skill coordinates three upstream skills and produces implementation-ready output, usually as one .tsx file plus concise setup notes.\n\nIt does not replace upstream skill logic and does not assume hidden dependencies are already installed."
      },
      {
        "title": "Required Installed Skills",
        "body": "frontend-design-ultimate (inspected latest: 1.0.0)\nshadcn-ui (inspected latest: 1.0.0)\nreact-expert (inspected latest: 0.1.0)\n\nInstall/update:\n\nnpx -y clawhub@latest install frontend-design-ultimate\nnpx -y clawhub@latest install shadcn-ui\nnpx -y clawhub@latest install react-expert\nnpx -y clawhub@latest update --all\n\nVerify:\n\nnpx -y clawhub@latest list"
      },
      {
        "title": "OpenClaw Compatibility Notes",
        "body": "This skill is written to match OpenClaw skill-loading rules:\n\nSKILL.md with YAML frontmatter and Markdown body\nsingle-line frontmatter keys\nmetadata encoded as a single-line JSON object\nno unsupported custom top-level frontmatter keys\n\nIf this file is edited later, keep those constraints intact."
      },
      {
        "title": "Runtime Prerequisites",
        "body": "Minimum local stack:\n\nNode.js 18+\nnpm\nReact + TypeScript project with Tailwind configured\n\nAdjacent ecosystem dependencies (from inspected upstream skill content):\n\ntailwindcss (layout/styling baseline)\nlucide-react (icons used by many shadcn examples)\nnext-themes (theme toggle patterns in shadcn guidance)\nreact-hook-form, zod, @hookform/resolvers (form patterns)\noptional: framer-motion (motion patterns from frontend-design-ultimate)\noptional: recharts or equivalent if a real chart package is required\n\nIf user wants shadcn components and they are missing, include explicit setup commands in output:\n\nnpx shadcn@latest init\nnpx shadcn@latest add card button badge tabs table sheet sidebar\n\nDo not assume Next.js unless the user says Next.js.\nDefault to framework-agnostic React .tsx output that can run in Vite or Next.js with minimal adaptation."
      },
      {
        "title": "Inputs the LM Must Collect First",
        "body": "ui_goal (dashboard, landing page, admin panel, etc.)\ntheme_mode (dark, light, or system)\nprimary_metrics (for example revenue, MRR, growth)\nchart_expectation (line, bar, area; static or interactive)\nlayout_density (compact, balanced, spacious)\nbrand_constraints (colors, logo, typography constraints)\ntarget_framework (vite-react, nextjs, or generic-react)\nsingle_file_strict (true/false)\n\nIf any critical input is missing, make explicit defaults and state them in Assumptions."
      },
      {
        "title": "frontend-design-ultimate",
        "body": "Use for visual direction and anti-generic design decisions:\n\nchoose strong aesthetic direction\ndefine typographic hierarchy and color system\nenforce mobile-first responsiveness\navoid boilerplate “AI-slop” layouts\n\nFrom inspected upstream guidance:\n\ncommit to one clear tone\ninclude an unforgettable visual element\nprefer CSS variables and strong contrast\navoid generic default fonts"
      },
      {
        "title": "shadcn-ui",
        "body": "Use for robust UI primitives and composition patterns:\n\ncards, tabs, sheets, navigation, table, badges, dialogs\ntheming conventions and dark mode compatibility\npredictable component structure for fast shipping\n\nFrom inspected upstream guidance:\n\ncomponents are copied into the project (not a hosted runtime UI SDK)\ninclude install commands for any components you reference\nprefer composable primitives for layout and data display"
      },
      {
        "title": "react-expert",
        "body": "Use for behavioral correctness and maintainability:\n\nstate design and data flow\nstrict TypeScript-first component patterns\naccessibility and predictable rendering behavior\noptional performance hardening for non-trivial UI\n\nFrom inspected upstream guidance:\n\navoid state mutation and unstable keys\nuse semantic structure and cleanup in effects\nship clear typed interfaces for props/data"
      },
      {
        "title": "Canonical Causal Chain",
        "body": "Use this exact orchestration order.\n\nRequirement Parse\n\nNormalize user request into goals, constraints, and output contract.\n\nDesign Direction (frontend-design-ultimate)\n\nSelect one explicit aesthetic mode.\nDefine palette, type scale, spacing, and page composition.\nDecide dark-mode token strategy.\n\nComponent Architecture (shadcn-ui)\n\nMap UI blocks to component primitives (sidebar, card, tabs, table, badge).\nDeclare required shadcn installs for referenced primitives.\n\nReact Glue Logic (react-expert)\n\nImplement typed data models and render loops.\nAdd local state/hooks where required.\nKeep logic simple and deterministic for copy-paste usability.\n\nOutput Assembly\n\nProduce one .tsx file by default.\nInclude short Setup section with required install commands.\nInclude Assumptions and Adaptation Notes."
      },
      {
        "title": "Output Contract",
        "body": "Default output must contain:\n\nSetup:\n\nexact npm/npx commands for missing dependencies\nshadcn component add commands used by generated code\n\n\n\nSingle TSX File:\n\none self-contained React component in TypeScript\nimports listed at top\nmock data included inline unless user supplies real data source\n\n\n\nAssumptions:\n\nexplicit defaults chosen due to missing input\n\n\n\nAdaptation Notes:\n\nwhere to plug in real API data\nwhich imports to remove if a component is unavailable\n\nNo auxiliary script generation. No multi-file scaffolding unless user explicitly asks."
      },
      {
        "title": "Chart Handling Rule",
        "body": "If chart library is not guaranteed in target project:\n\ndefault to a semantic “chart-ready” card layout with placeholders, or\nuse lightweight inline SVG chart logic in the same .tsx.\n\nDo not hallucinate unavailable chart components.\nIf using external chart lib (for example Recharts), include install command and clearly label as optional."
      },
      {
        "title": "Scenario Mapping: Revenue Dashboard (Dark Mode)",
        "body": "For scenario:\n\"I need a dark-mode dashboard showing revenue metrics\"\n\nExecution:\n\nfrontend-design-ultimate defines dark palette, bold typography, and dashboard composition (sidebar + metric grid + chart area).\nshadcn-ui maps layout to Card, Badge, Tabs, optional Sidebar primitives.\nreact-expert creates typed metric arrays and rendering loops for KPI tiles + trend view.\nfinal output returns one production-usable .tsx component plus setup commands."
      },
      {
        "title": "Quality Gates",
        "body": "Before finalizing output, ensure:\n\ncomponent compiles as TSX (no missing symbols in emitted code)\ndesign is intentional, not default-template generic\ndark mode tokens are coherent and readable\nmobile behavior is included (sm/md/lg responsive strategy)\nall referenced UI components are listed in setup commands\nno fake API calls presented as real integrations\n\nIf any gate fails, return Needs Revision with a concrete missing-items list."
      },
      {
        "title": "Guardrails",
        "body": "Never claim “works out of the box” without listing dependency assumptions.\nNever emit components from libraries not declared in setup.\nNever hide unresolved decisions (state them under Assumptions).\nPrefer one high-quality component over broad but shallow scaffolding."
      },
      {
        "title": "Failure Handling",
        "body": "Missing upstream skills: stop and report exact missing skills.\nMissing project context: output generic React version and mark adaptation points.\nMissing chart dependency: provide fallback rendering path and optional install command.\nConflicting constraints (for example “single file” + “full app routing”): prioritize single-file contract and document tradeoff."
      }
    ],
    "body": "Purpose\n\nEnable non-programmers to get production-grade frontend components from natural-language requirements.\n\nThis meta-skill coordinates three upstream skills and produces implementation-ready output, usually as one .tsx file plus concise setup notes.\n\nIt does not replace upstream skill logic and does not assume hidden dependencies are already installed.\n\nRequired Installed Skills\nfrontend-design-ultimate (inspected latest: 1.0.0)\nshadcn-ui (inspected latest: 1.0.0)\nreact-expert (inspected latest: 0.1.0)\n\nInstall/update:\n\nnpx -y clawhub@latest install frontend-design-ultimate\nnpx -y clawhub@latest install shadcn-ui\nnpx -y clawhub@latest install react-expert\nnpx -y clawhub@latest update --all\n\n\nVerify:\n\nnpx -y clawhub@latest list\n\nOpenClaw Compatibility Notes\n\nThis skill is written to match OpenClaw skill-loading rules:\n\nSKILL.md with YAML frontmatter and Markdown body\nsingle-line frontmatter keys\nmetadata encoded as a single-line JSON object\nno unsupported custom top-level frontmatter keys\n\nIf this file is edited later, keep those constraints intact.\n\nRuntime Prerequisites\n\nMinimum local stack:\n\nNode.js 18+\nnpm\nReact + TypeScript project with Tailwind configured\n\nAdjacent ecosystem dependencies (from inspected upstream skill content):\n\ntailwindcss (layout/styling baseline)\nlucide-react (icons used by many shadcn examples)\nnext-themes (theme toggle patterns in shadcn guidance)\nreact-hook-form, zod, @hookform/resolvers (form patterns)\noptional: framer-motion (motion patterns from frontend-design-ultimate)\noptional: recharts or equivalent if a real chart package is required\n\nIf user wants shadcn components and they are missing, include explicit setup commands in output:\n\nnpx shadcn@latest init\nnpx shadcn@latest add card button badge tabs table sheet sidebar\n\n\nDo 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.\n\nInputs the LM Must Collect First\nui_goal (dashboard, landing page, admin panel, etc.)\ntheme_mode (dark, light, or system)\nprimary_metrics (for example revenue, MRR, growth)\nchart_expectation (line, bar, area; static or interactive)\nlayout_density (compact, balanced, spacious)\nbrand_constraints (colors, logo, typography constraints)\ntarget_framework (vite-react, nextjs, or generic-react)\nsingle_file_strict (true/false)\n\nIf any critical input is missing, make explicit defaults and state them in Assumptions.\n\nTool Responsibilities\nfrontend-design-ultimate\n\nUse for visual direction and anti-generic design decisions:\n\nchoose strong aesthetic direction\ndefine typographic hierarchy and color system\nenforce mobile-first responsiveness\navoid boilerplate “AI-slop” layouts\n\nFrom inspected upstream guidance:\n\ncommit to one clear tone\ninclude an unforgettable visual element\nprefer CSS variables and strong contrast\navoid generic default fonts\nshadcn-ui\n\nUse for robust UI primitives and composition patterns:\n\ncards, tabs, sheets, navigation, table, badges, dialogs\ntheming conventions and dark mode compatibility\npredictable component structure for fast shipping\n\nFrom inspected upstream guidance:\n\ncomponents are copied into the project (not a hosted runtime UI SDK)\ninclude install commands for any components you reference\nprefer composable primitives for layout and data display\nreact-expert\n\nUse for behavioral correctness and maintainability:\n\nstate design and data flow\nstrict TypeScript-first component patterns\naccessibility and predictable rendering behavior\noptional performance hardening for non-trivial UI\n\nFrom inspected upstream guidance:\n\navoid state mutation and unstable keys\nuse semantic structure and cleanup in effects\nship clear typed interfaces for props/data\nCanonical Causal Chain\n\nUse this exact orchestration order.\n\nRequirement Parse\nNormalize user request into goals, constraints, and output contract.\nDesign Direction (frontend-design-ultimate)\nSelect one explicit aesthetic mode.\nDefine palette, type scale, spacing, and page composition.\nDecide dark-mode token strategy.\nComponent Architecture (shadcn-ui)\nMap UI blocks to component primitives (sidebar, card, tabs, table, badge).\nDeclare required shadcn installs for referenced primitives.\nReact Glue Logic (react-expert)\nImplement typed data models and render loops.\nAdd local state/hooks where required.\nKeep logic simple and deterministic for copy-paste usability.\nOutput Assembly\nProduce one .tsx file by default.\nInclude short Setup section with required install commands.\nInclude Assumptions and Adaptation Notes.\nOutput Contract\n\nDefault output must contain:\n\nSetup:\n\nexact npm/npx commands for missing dependencies\nshadcn component add commands used by generated code\n\nSingle TSX File:\n\none self-contained React component in TypeScript\nimports listed at top\nmock data included inline unless user supplies real data source\n\nAssumptions:\n\nexplicit defaults chosen due to missing input\n\nAdaptation Notes:\n\nwhere to plug in real API data\nwhich imports to remove if a component is unavailable\n\nNo auxiliary script generation. No multi-file scaffolding unless user explicitly asks.\n\nChart Handling Rule\n\nIf chart library is not guaranteed in target project:\n\ndefault to a semantic “chart-ready” card layout with placeholders, or\nuse lightweight inline SVG chart logic in the same .tsx.\n\nDo not hallucinate unavailable chart components. If using external chart lib (for example Recharts), include install command and clearly label as optional.\n\nScenario Mapping: Revenue Dashboard (Dark Mode)\n\nFor scenario: \"I need a dark-mode dashboard showing revenue metrics\"\n\nExecution:\n\nfrontend-design-ultimate defines dark palette, bold typography, and dashboard composition (sidebar + metric grid + chart area).\nshadcn-ui maps layout to Card, Badge, Tabs, optional Sidebar primitives.\nreact-expert creates typed metric arrays and rendering loops for KPI tiles + trend view.\nfinal output returns one production-usable .tsx component plus setup commands.\nQuality Gates\n\nBefore finalizing output, ensure:\n\ncomponent compiles as TSX (no missing symbols in emitted code)\ndesign is intentional, not default-template generic\ndark mode tokens are coherent and readable\nmobile behavior is included (sm/md/lg responsive strategy)\nall referenced UI components are listed in setup commands\nno fake API calls presented as real integrations\n\nIf any gate fails, return Needs Revision with a concrete missing-items list.\n\nGuardrails\nNever claim “works out of the box” without listing dependency assumptions.\nNever emit components from libraries not declared in setup.\nNever hide unresolved decisions (state them under Assumptions).\nPrefer one high-quality component over broad but shallow scaffolding.\nFailure Handling\nMissing upstream skills: stop and report exact missing skills.\nMissing project context: output generic React version and mark adaptation points.\nMissing chart dependency: provide fallback rendering path and optional install command.\nConflicting constraints (for example “single file” + “full app routing”): prioritize single-file contract and document tradeoff."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/h4gen/frontend-builder",
    "publisherUrl": "https://clawhub.ai/h4gen/frontend-builder",
    "owner": "h4gen",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}