搜索

PythonReactSEOPDF
OpenClaw

React Nextjs Generator

React Next.js 项目生成器技能

batype0 来源安装数☆ 0 仓库 Stars

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求,再添加到工作流。

SkillHub CLI

skillhub install batype/react-nextjs-generator

打开来源仓库,查看说明和兼容环境后,按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent,让它先读取说明、核对依赖,并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

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
github
Repository
openclaw/skills
Path
skills/batype/react-nextjs-generator
Version
—
Commit
1e4abe9f5260f96cbf8d6a2afa8b450f98abc7e7
分类来源
rules
状态
active
可见性
public

这些信息来自收录时的来源分析,可能滞后;使用前请核对最新来源文件。

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
  • 响应式布局组件
  • 可直接运行的代码

来源内容

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
- 响应式布局组件
- 可直接运行的代码

相关技能

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.