---
name: no-code-frontend-builder-32a08c1156ad
description: Meta-skill for generating production-ready React UI for non-programmers by orchestrating frontend-design-ultimate, shadcn-ui, and react-expert. Use when users describe UI outcomes (for example dashboards, landing pages, admin screens) and need a single copy-pasteable TSX component with explicit setup and dependency instructions.
homepage: https://clawhub.ai
user-invocable: true
disable-model-invocation: false
metadata: {"openclaw":{"emoji":"🧩","requires":{"bins":["node","npm","npx"],"env":[],"config":[]},"note":"Requires local installation of frontend-design-ultimate, shadcn-ui, and react-expert."}}
---

# 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:

```bash
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:

```bash
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:

```bash
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`.

# Tool Responsibilities

## 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.

1. `Requirement Parse`
- Normalize user request into goals, constraints, and output contract.

2. `Design Direction (frontend-design-ultimate)`
- Select one explicit aesthetic mode.
- Define palette, type scale, spacing, and page composition.
- Decide dark-mode token strategy.

3. `Component Architecture (shadcn-ui)`
- Map UI blocks to component primitives (sidebar, card, tabs, table, badge).
- Declare required shadcn installs for referenced primitives.

4. `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.

5. `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:
1. frontend-design-ultimate defines dark palette, bold typography, and dashboard composition (sidebar + metric grid + chart area).
2. shadcn-ui maps layout to `Card`, `Badge`, `Tabs`, optional `Sidebar` primitives.
3. react-expert creates typed metric arrays and rendering loops for KPI tiles + trend view.
4. 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.


---
Source attribution: modbender
Original project: https://github.com/modbender/skill-library-mcp/blob/d9c8fe903b5b4e82237dbe8d0df8567783022e18/data/frontend-builder/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2025 skill-library-mcp contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: modbender
Original project: https://github.com/modbender/skill-library-mcp/blob/d9c8fe903b5b4e82237dbe8d0df8567783022e18/data/frontend-builder/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering, Product Management
Roles: Frontend Developer, Product Manager, UX Designer
Specialties: Frontend
Tools: Clawhub, Frontend Design Ultimate, React Expert, Shadcn Ui
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 9424ec394e372a8618efd296ac28e1ecbc6f469ddc14250dcb5886d92080d7ea