搜索

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

1password

daggerkun007

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.