vite-starter

Files (3)

• SKILL.md
• react-ts-pnpm.json · assets/
• vue-ts-pnpm.json · assets/

SKILL.md (first lines)

# Vite 前端项目脚手架

使用 create-vite 快速创建现代前端项目，支持官方模板和社区模板，自动处理 TypeScript 配置验证。

## 工作流程

### 第 1 步：收集用户偏好

**必须询问以下信息（如果用户未提供）：**

| 偏好项 | 选项 | 说明 |
|--------|------|------|
| **框架** | React、Vue、Svelte、Solid、Preact、Lit、Qwik、Vanilla | 核心框架选择 |
| **语言** | TypeScript（推荐）、JavaScript | 是否启用 TypeScript |
| **包管理器** | pnpm（推荐）、npm、yarn、bun | 依赖管理工具 |
| **项目名称** | 字符串 | 目录名，可用 `.` 表示当前目录 |
| **构建器** | React 专属：Babel（默认）或 SWC（大型项目推荐） | 仅 React 项目需要选择 |

**偏好收集原则：**
- 如果用户已在请求中明确了某些偏好，无需重复询问
- 对于缺失的关键偏好，一次性列出所有问题，避免多轮对话
- 如果用户没有特殊要求，可直接提议推荐组合并请求确认

**推荐组合：**
```
React + TypeScript + pnpm + SWC → react-swc-ts 模板（性能最佳）
Vue + TypeScript + pnpm         → vue-ts 模板
Svelte + TypeScript + pnpm      → svelte-ts 模板
```

---

### 第 2 步：保存偏好到 assets 目录

将用户偏好保存为 JSON 文件，便于下次复用。

**存储位置：** `./assets/` 目录（相对于技能目录）

**文件命名规则：** `{描述性名称}.json`，例如 `react-ts-pnpm.json`

**文件格式：**
```json
{
  "name": "react-ts-pnpm",
  "description": "React + TypeScript + pnpm + SWC",
  "framework": "react",
  "language": "typescript",
  "packageManager": "pnpm",
  "template": "react-swc-ts",
  "createdAt": "2024-01-01"
}
```

**下次使用时：** 列出 `./assets/` 中已有的偏好文件，让用户选择直接复用或创建新的。

---

### 第 3 步：选择并执行安装命令

#### 官方模板（推荐，快速稳定）

**所有官方模板 ID：**

| 模板 ID | 框架 | 语言 | 备注 |
|---------|------|------|------|
| `vanilla` | Vanilla JS | JavaScript | |
| `vanilla-ts` | Vanilla JS | TypeScript | |
| `vue` | Vue 3 | JavaScript | |
| `vue-ts` | Vue 3 | TypeScript | |
| `react` | React | JavaScript | Babel |
| `react-ts` | React | TypeScript | Babel |
| `react-swc` | React | JavaScript | SWC（更快） |
| `react-swc-ts` | React | TypeScript | SWC（更快，推荐） |
| `react-compiler` | React | JavaScript | React Compiler（实验性） |
| `react-compiler-ts` | React | TypeScript | React Compiler（实验性） |
| `preact` | Preact | JavaScript | |
| `preact-ts` | Preact | TypeScript | |
| `lit` | Lit | JavaScript | Web Components |
| `lit-ts` | Lit | TypeScript | Web Components |
| `svelte` | Svelte | JavaScript | |
| `svelte-ts` | Svelte | TypeScript | |
| `solid` | Solid | JavaScript | |
| `solid-ts` | Solid | TypeScript | |
| `qwik` | Qwik | JavaScript | Resumability |
| `qwik-ts` | Qwik | TypeScript | Resumability |

**各包管理器命令：**

```bash
# pnpm（推荐）
pnpm create vite <项目名称> --template <模板ID>

# npm（注意：npm 7+ 需要 -- 分隔符）
npm create vite@latest <项目名称> -- --template <模板ID>

# yarn
yarn create vite <项目名称> --template <模板ID>

# bun
bun create vite <项目名称> --template <模板ID>
```

**在当前目录创建（使用 `.`）：**
```bash
pnpm create vite . --template react-swc-ts
```

**非交互式（CI/CD 或脚本环境）：**
```bash
pnpm create vite my-app --template react-swc-ts --no-interactive
```

#### 社区模板（功能更完整）

参考 [Awesome Vite 社区模板](https://github.com/vitejs/awesome-vite#templates) 获取完整列表。

使用 `tiged`（`degit` 的维护版本）克隆社区模板：
```bash
# 安装 tiged

From cruldra/skills, MIT.

More from cruldra/skills