skills.rest
MMXC
MMXCCOMMUNITY
Explore all skills by this author →
GitHub

VibeX 页面生成器 Skill

Generate page structures from UI node trees with control definitions.

Updated Feb 16, 2026
Search Tags:#typescript#react#code generation#frontend development#page scaffolding#component development#ui generation
One-click install
npx skills add https://github.com/MMXC/openclaw-back --skill vibex-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: VibeX 页面生成器 Skill
Source: https://github.com/MMXC/openclaw-back/tree/main/workspace/skills/vibex-page-generator
Command: npx skills add https://github.com/MMXC/openclaw-back --skill vibex-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of complete page structures based on UI node trees, streamlining the development process for web applications.

Core Features & Use Cases

  • Page Structure Generation: Creates a full directory structure for new pages, including component skeletons, control definitions, and documentation.
  • Component Management: Organizes individual UI controls within dedicated directories, ensuring modularity and reusability.
  • Documentation Integration: Automatically appends modification history to control README files.
  • Use Case: A developer needs to quickly scaffold a new user profile page with existing Header, Avatar, and ProfileDetails components. This Skill can generate the entire page's file structure and initial code.

Quick Start

Generate a new page named 'UserProfile' using the 'Header', 'Avatar', and 'ProfileDetails' components.

Frequently Asked Questions about VibeX 页面生成器 Skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a complete React page structure from a UI node tree?▼

To scaffold a React page from a UI node tree, this generator creates a full directory structure including component skeletons, control definitions, and documentation.

What is UI node tree based page scaffolding in frontend development?▼

UI node tree based page scaffolding is a structured approach for defining page layouts and component interactions to automate web application page creation.

Can I update existing UI controls and track their modification history?▼

Yes, you can update existing UI controls, and the generator automatically appends modification history to the respective control README files.

Does this page generation approach work with TypeScript and React components?▼

Yes, this page generation approach supports TypeScript and React components, organizing individual UI controls within dedicated directories to ensure modularity.

How do I generate a user profile page using existing Header, Avatar, and ProfileDetails components?▼

You generate the user profile page by providing the component names to the generator, which outputs the entire page's file structure and initial code.

Related Skills

Explore More Software Engineering Skills→
pelithpelith

react-architect-skills

Enforce scalable React module architecture with folder-based feature, container, hook, and domain layers.

Official
Intermediate
Yukine5377Yukine5377

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend code from Brand Guideline and System Design.

Community
Advanced
ACHVMRACHVMR

smelteros-ui-patterns

Provide reusable UI patterns and templates for SmelterOS frontend development.

Official
Intermediate
CognitivemeshCognitivemesh

python-test

Scaffold pytest-based tests and BDD features for pyarnes projects.

Community
Intermediate