Search

PythonReactSEOPDF
OpenClaw

React Nextjs Generator

React Next.js 项目生成器技能

batype0 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 batype/react-nextjs-generator

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

React Next.js 项目生成器技能

描述

根据需求文档和UI设计图生成完整的React + Next.js项目,使用Ant Design、Tailwind CSS和Zustand技术栈。

使用方法

当用户上传需求文档和UI设计图时,执行以下步骤:

  1. 分析需求文档内容
  2. 解析UI设计图元素
  3. 生成项目结构
  4. 创建页面组件
  5. 配置状态管理
  6. 设置样式系统

技术栈

  • React
  • Next.js
  • Ant Design (antd)
  • Tailwind CSS
  • Zustand (状态管理)

工作流程

  1. 接收需求文档和UI图
  2. 分析并提取关键信息
  3. 创建项目目录结构
  4. 生成基础配置文件
  5. 创建页面和组件
  6. 集成状态管理
  7. 应用样式配置

Source information

Source
github
Repository
openclaw/skills
Path
skills/batype/react-nextjs-generator
Version
—
Commit
1e4abe9f5260f96cbf8d6a2afa8b450f98abc7e7
Classification source
rules
Status
active
Visibility
public

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

README

React Next.js 项目生成器

这个技能可以根据需求文档和UI设计图自动生成完整的React + Next.js项目,使用Ant Design、Tailwind CSS和Zustand技术栈。

功能特性

  • 根据需求文档自动生成项目结构
  • 分析UI设计图并生成相应组件
  • 集成Ant Design组件库
  • 配置Tailwind CSS样式系统
  • 使用Zustand进行状态管理
  • 创建响应式布局
  • 生成页面路由结构

使用方法

  1. 准备需求文档(文本格式),包含:

    • 项目名称和描述
    • 页面列表及功能
    • 组件需求
    • 特殊功能要求
  2. 如有UI设计图,准备好图片文件

  3. 调用此技能并提供上述材料

技术栈

  • React: 构建用户界面的JavaScript库
  • Next.js: React框架,提供SSR等功能
  • Ant Design: 企业级UI组件库
  • Tailwind CSS: 实用优先的CSS框架
  • Zustand: 轻量级状态管理库

输出内容

  • 完整的Next.js项目结构
  • 配置好的开发环境
  • 基础页面和组件
  • 状态管理store
  • 响应式布局组件
  • 可直接运行的代码

Extracted content

SKILL.md
# React Next.js 项目生成器技能

## 描述
根据需求文档和UI设计图生成完整的React + Next.js项目,使用Ant Design、Tailwind CSS和Zustand技术栈。

## 使用方法
当用户上传需求文档和UI设计图时,执行以下步骤:

1. 分析需求文档内容
2. 解析UI设计图元素
3. 生成项目结构
4. 创建页面组件
5. 配置状态管理
6. 设置样式系统

## 技术栈
- React
- Next.js
- Ant Design (antd)
- Tailwind CSS
- Zustand (状态管理)

## 工作流程
1. 接收需求文档和UI图
2. 分析并提取关键信息
3. 创建项目目录结构
4. 生成基础配置文件
5. 创建页面和组件
6. 集成状态管理
7. 应用样式配置
README
# React Next.js 项目生成器

这个技能可以根据需求文档和UI设计图自动生成完整的React + Next.js项目,使用Ant Design、Tailwind CSS和Zustand技术栈。

## 功能特性

- 根据需求文档自动生成项目结构
- 分析UI设计图并生成相应组件
- 集成Ant Design组件库
- 配置Tailwind CSS样式系统
- 使用Zustand进行状态管理
- 创建响应式布局
- 生成页面路由结构

## 使用方法

1. 准备需求文档(文本格式),包含:
   - 项目名称和描述
   - 页面列表及功能
   - 组件需求
   - 特殊功能要求

2. 如有UI设计图,准备好图片文件

3. 调用此技能并提供上述材料

## 技术栈

- **React**: 构建用户界面的JavaScript库
- **Next.js**: React框架,提供SSR等功能
- **Ant Design**: 企业级UI组件库
- **Tailwind CSS**: 实用优先的CSS框架
- **Zustand**: 轻量级状态管理库

## 输出内容

- 完整的Next.js项目结构
- 配置好的开发环境
- 基础页面和组件
- 状态管理store
- 响应式布局组件
- 可直接运行的代码

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.