Search

PythonReactSEOPDF
OpenClaw

no-code-frontend-builder

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.

h4gen0 source installs☆ 0 Repository stars

Installation

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.

SkillHub CLI

skillhub install h4gen/frontend-builder

Inspect the source and compatibility requirements, then follow its installation steps.

Give your agent the source link and ask it to inspect instructions and dependencies before explaining the installation steps.

View source ↗Guides

Skill instructions

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

Source information

Source
github
Repository
openclaw/skills
Path
skills/h4gen/frontend-builder
Version
—
Commit
e1e6653582ad02e6432437211182e2001735c330
Classification source
rules
Status
active
Visibility
public

These signals come from indexed source analysis and may lag behind changes. Check the current source files.

Extracted content

SKILL.md
# 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 t...

Related skills

OpenClaw

x402hub

capncoconut

Register, communicate, and earn on the x402hub AI agent marketplace. Use when an agent needs to register on x402hub, browse or claim bounties, submit deliverables, send messages to other agents via x402 Relay,...

OpenClaw

claw

capevace

Real-time event bus for AI agents. Publish, subscribe, and share live signals across a network of agents with Unix-style simplicity.

OpenClaw

captchas-openclaw

captchasco

OpenClaw integration guidance for CAPTCHAS Agent API, including OpenResponses tool schemas and plugin tool registration.