自制前端专用 AI 技能！搭建 Vite+React 脚手架自带 AGENTS.md

1 技能说明

2 技能下载

GitHub地址如下：

魔方Skills如下：

3 视频演示

具体使用可以参考B站视频： Claude配合自制前端脚手架Skill火力全开撸代码

4 如何制作

4.1 先封装脚手架代码模板

先基于前端研发规范定制一个带AGENTS.md的脚手架代码模板，提交代码仓库地址，并公开，如下（点击这里跳转至代码仓库）：

4.2 再制作一个cli推送至npm仓库

npm脚手架包： vite8-react19-app-cli

4.3 再利用技能 skill-creator 创建 vrcli-app-init技能

有了以上两步后，你只需要在Agent（ClaudeCode、Codex、Openclaw、Hermes等）工具中提出创建对应技能的需求即可，然后一步步完善，部分技能内容如下：

md 复制代码

---
name: vrcli-app-init
description: >
  当用户提到"构建前端项目"、"创建React项目"、"初始化前端工程"、"搭建Vite+React项目"、
  "create a react project"、"init a frontend project"、或表达想要快速创建一个基于
  Vite+React技术栈的前端应用时触发此技能。无论是中文还是英文的建项目请求都应该响应。
  适用于用户需要一个开箱即用的现代化前端项目脚手架的场景。
---

# Vrcli App Init

使用 `vrcli` 命令快速构建基于 **Vite + React** 技术栈的前端项目。此技能负责检查环境、安装 CLI 工具、并执行项目初始化。

## 核心流程

### 第一步：检查 Node.js 环境

在开始之前，必须确保用户机器上安装了 Node.js 且版本满足要求。

1. 执行 `node --version` 检查 Node 是否已安装。
2. 如果命令报错（Node 未安装），告知用户需要先安装 Node.js（版本 ≥ 22），并给出指引：
   - 推荐使用 [nvm-windows](https://github.com/coreybutler/nvm-windows)（Windows）或 [nvm](https://github.com/nvm-sh/nvm)（macOS/Linux）管理 Node 版本
   - 或从 [nodejs.org](https://nodejs.org/) 下载 LTS 版本安装
   - **停下来等待用户安装完成，不要继续后续步骤**
3. 如果 Node 已安装但版本低于 22，告知用户当前版本和所需版本（≥ 22），建议升级：
   - `nvm install 22` → `nvm use 22`（如果使用 nvm）
   - **停下来等待用户升级完成，不要继续后续步骤**
4. 版本 ≥ 22 则通过，告知用户环境检查结果并继续。

5 演示效果（基于CC-Cli）

查看安装的技能
当我们提到要构建前端react项目时，触发该技能并初始化项目，随后就是安装依赖、启动项目
由于vrcli脚手架创建的项目里已经内置了详细的AGENTS.md文档，所以这里我们问claude，它会读取这个文件内容而不需要重新扫描整个项目
这里希望在顶部菜单导航【数据】的右边增加一个一级导航【聊天】并关联对应的路由页面，由于之前定过了AGENTS.md，所以claude会严格按照这个文档里的约束来，包括导航在哪个目录下配置，路由页在哪个目录下新增等

查看源码，确实是按规范来的，很标准
最后提出一个基于antd ui的需求，做一个用户登录表单，并明确说明登录事件不需要实现，只需要弹出消息即可，效果如下

代码内容如下