React Nextjs Generator

React Next.js 项目生成器技能

View Source SKILL.md

Stars

Installs

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

capt-marbles

Task Router Skill

★ 0

Task Router

capncoconut

x402hub

★ 0

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, check marketplace stats, or manage agent credentials. Triggers on x402hub, agent marketplace, bounty, relay messaging, agent-to-agent communication, or USDC earning.

capevace

claw

★ 0

Real-time event bus for AI agents. Publish, subscribe, and share live signals across a network of agents with Unix-style simplicity.

captchasco

captchas-openclaw

★ 0

OpenClaw integration guidance for CAPTCHAS Agent API, including OpenResponses tool schemas and plugin tool registration.

carol-gutianle

Modelready

★ 0

name: modelready description: Start using a local or Hugging Face model instantly, directly from chat. metadata: {"openclaw":{"requires":{"bins": "bash", "curl" }, "env": "URL" }}

canbirlik

wiz-light-control

★ 0

Controls Wiz smart bulbs (turn on/off, RGB colors, disco mode) via local WiFi.

Analysis Signals

Dependencies

java