Rechercher

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 installations selon la source☆ 0 Étoiles du dépôt

Installation

Suivez les instructions du dépôt pour votre agent. Consultez les fichiers et dépendances avant l’installation.

SkillHub CLI

skillhub install h4gen/frontend-builder

Examinez la source et la compatibilité, puis suivez les étapes d’installation.

Donnez le lien à votre agent et demandez-lui d’examiner instructions et dépendances avant d’expliquer les étapes.

Voir la source ↗Guides

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

Informations sur la source

Source
github
Repository
openclaw/skills
Path
skills/h4gen/frontend-builder
Version
—
Commit
e1e6653582ad02e6432437211182e2001735c330
Source de classification
rules
Statut
active
Visibilité
public

Ces informations proviennent de l’analyse indexée et peuvent être anciennes. Vérifiez les fichiers actuels.

Contenu extrait

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

Skills associés

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.