TopRank Skills

Home / Claw Skills / Autres / React Nextjs Generator
Official OpenClaw rules 15%

React Nextjs Generator

React Next.js 项目生成器技能

Stars

0

Installs

0

Status

ACTIVE

Visibility

PUBLIC

安装方式

直接复制以下提示词,发送给你的 AI 助手即可完成安装。

请先检查是否已安装 SkillHub 商店,若未安装,请根据 https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/skillhub.md 安装 SkillHub 商店,然后安装 React Nextjs Generator 技能。 若已安装,则直接安装 React Nextjs Generator 技能。

Overview

Skill Key
batype/react-nextjs-generator
Author
batype
Source Repo
openclaw/skills
Version
-
Source Path
skills/batype/react-nextjs-generator
Latest Commit SHA
1e4abe9f5260f96cbf8d6a2afa8b450f98abc7e7

Extracted Content

SKILL.md excerpt

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

# 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 Claw Skills