# React Next JS

> 根据需求文档和UI设计图生成完整的React + Next.js项目，使用Ant Design、Tailwind CSS和Zustand技术栈。 Use when this capability is needed.

- Skill: `tomevault-io/react-next-js` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-next-js`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-next-js/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-next-js

---


# 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: [modbender/skill-library-mcp](https://github.com/modbender/skill-library-mcp) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-15 -->