fe-kit

前端项目脚手架 CLI：初始化新项目、增强现有项目，并管理开发工具、Skills、MCP 与框架规则（Vue / React / Next.js + TypeScript）。

完整使用说明见 fe-kit CLI 操作手册。

当前重要变更

• TSLint 已移除：TSLint 早在 2019 年即被官方废弃，fe-kit 不再提供 TSLint 选项与生成器。请使用 ESLint + typescript-eslint（已为默认）。
• 配置输出路径变更：Skills、Rules、MCP 不再写入 .fe-kit/ 作为编辑器配置，改为直接写入各编辑器标准目录（见下文）。如果你之前依赖 .fe-kit/skills.json 或 .fe-kit/mcp.json 作为编辑器读取入口，需手动迁移。
• Qoder 成为默认适配目标：新项目和无历史配置的增强流程默认选择 Qoder；已有项目继续沿用 .fe-kit/ 中保存的工具选择。

编辑器配置输出

init / enhance 执行后，根据选择的开发工具，配置会写入以下编辑器标准目录：

| 编辑器 | Rules | Skills | MCP | | ------ | ----- | ------ | --- | | Qoder | .qoder/rules/*.md | .qoder/skills/<id>/SKILL.md | .mcp.json（mcpServers） | | Cursor | .cursor/rules/*.mdc | —（通过 rules 生效） | .cursor/mcp.json（mcpServers） | | Claude Code | .claude/rules/*.md | .claude/skills/<id>/SKILL.md | .mcp.json（mcpServers） | | VS Code + Copilot | .github/copilot-instructions.md | —（通过 instructions 生效） | .vscode/mcp.json（servers） | | CodeBuddy CN | .codebuddy/rules/*.mdc | —（通过 rules 生效） | .mcp.json（mcpServers） | | Trae | .trae/rules/*.md | .trae/rules/<id>.md | .trae/mcp.json（mcpServers） | | IDEA | .idea/fe-kit/rules/*.md | —（占位集成） | —（占位集成） |

.fe-kit/ 目录仍用于存储 fe-kit 内部元数据（project.json、skills.json、mcp.json、tools.json 等），但不再作为编辑器配置的输出目标。

环境要求

• Node.js ≥ 18
• pnpm ≥ 9（本仓库通过 packageManager 固定版本，建议启用 Corepack：corepack enable）

包管理与发布

• 仅使用 pnpm 安装依赖；勿提交 package-lock.json（已在 .gitignore 中忽略）。
• 发布目标为 npm 公共仓库（publishConfig.registry 已指向 https://registry.npmjs.org/）。
• 版本与变更记录 使用 Changesets：
  1. 完成功能或修复后：pnpm changeset，按提示选择 semver bump 并写摘要。
  2. 准备发版：pnpm version-packages（更新 package.json 版本并写入 CHANGELOG.md），提交改动。
  3. 发布：pnpm release（先 build，再 changeset publish；prepublishOnly 也会保证发布前构建）。

首次发包前需在 npm 登录：npm login（或 pnpm publish 使用的同一 npm 身份）。

安装与运行

发布包名为 fe-kit-cli，命令名为 fe-kit。

直接全局安装：

pnpm add -g fe-kit-cli
fe-kit --help

在仓库里本地运行：

pnpm install
pnpm run build
node dist/cli.mjs --help

本地 link 成全局命令：

pnpm run build
pnpm link --global
fe-kit --help

# 用完可执行
pnpm unlink --global fe-kit-cli

当前 CLI 帮助输出如下：

Usage: fe-kit [options] [command]

Frontend project scaffold CLI - init, enhance, and manage your dev environment.

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  init            Initialize a new frontend project with Vue, React, or Next.js + TypeScript
  enhance         Enhance an existing frontend project with dev tools, skills, MCP, and rules
  help [command]  display help for command

使用说明

1. 初始化新项目

在任意目录运行：

fe-kit init

init 会按顺序询问这些信息：

1. 项目名与目标路径。
2. 项目用途：Web App、后台管理或门户。
3. 工程 Preset：Minimal、Standard 或 Enterprise。
4. 框架与构建工具。
5. 路由、状态管理、单元测试与端到端测试。
6. 开发工具适配，默认选择 qoder。
7. 高级设置：质量工具、Skills、MCP 与 feature domains。
8. 包管理器、依赖安装和 Git 初始化选项。
9. 在统一确认摘要中检查最终方案后再执行。

执行完成后，CLI 会：

1. 生成对应模板项目。
2. 按 bootstrap conventions 生成 src/core、src/features、docs、plan 等目录骨架。
3. 为部分空目录写入 .gitkeep，用于保留目录结构；当目录已有真实文件，或你不想保留空目录时，这些 .gitkeep 可以直接删除。
4. 写入 docs/bootstrap/ 下的 checklist、prompt 和脚手架说明。
5. 生成项目级 .github/copilot-instructions.md 基础约束。
6. 写入 lint/format 相关配置。
7. 生成项目 README。
8. 写入 .fe-kit/ 元数据。
9. 按所选工具写入 rules、skills、MCP 配置。

2. 增强已有项目

进入已有项目根目录后运行：

fe-kit enhance

enhance 要求当前目录至少存在 package.json。执行时会先自动识别：

1. 项目名。
2. 框架与构建工具。
3. 是否存在 TypeScript。
4. 是否已经初始化 Git。

随后进入交互选择：

1. 要写入配置的开发工具。
2. 要安装/配置的质量工具。
3. 与检测到的框架匹配的推荐 Skills。
4. 要补充的 MCP 服务。

当前默认勾选策略与 init 不同：

1. 默认选中 eslint、prettier、editorconfig。
2. stylelint 默认不选。
3. commitlint 默认不选。
4. Skills 有历史记录时保留原选择；没有记录时使用框架推荐。

执行完成后，CLI 会在保留现有项目基础上更新 .fe-kit/ 元数据，并把新增配置合并到对应工具目录。

2.1 非交互模式（适合 CI）

init 与 enhance 已支持通过参数运行，搭配 --yes 可跳过交互。

init 示例：

fe-kit init \
  --project-name demo-app \
  --project-path ./demo-app \
  --framework react \
  --router react-router \
  --state-management zustand \
  --bundler vite \
  --lint-tools eslint,prettier,editorconfig \
  --dev-tools qoder,cursor \
  --skills design-taste-frontend,frontend-patterns \
  --mcp-servers context7 \
  --feature-domains auth,dashboard \
  --app-type admin \
  --preset enterprise \
  --unit-testing vitest \
  --e2e-testing playwright \
  --install true \
  --package-manager pnpm \
  --git-init true \
  --git-commit true \
  --git-message "chore: initialize project" \
  --yes

enhance 示例：

fe-kit enhance \
  --dev-tools qoder,cursor \
  --quality-tools eslint,prettier,editorconfig,commitlint \
  --skills tdd-workflow \
  --mcp-servers context7 \
  --yes

参数说明：

1. --yes：对未显式传入的项使用默认值。
2. --dry-run：打印完整生成计划，不创建目录或写入文件。
3. --preset：选择 minimal|standard|enterprise；显式参数始终覆盖 Preset 默认值。
4. --app-type：记录项目用途，可选 web-app|admin|portal。
5. init 默认会安装依赖（--install 默认为 true），可显式传 --install false 关闭。
6. --package-manager 可指定 pnpm|npm|yarn|bun，默认 pnpm。
7. Git 自动化默认关闭：--git-init true 初始化仓库，--git-commit true 创建首提交，提交信息可由 --git-message 指定。

3. 内置能力范围

当前脚手架内置的主要选择项如下：

1. 框架：vue、react、next。
2. 构建工具：vite、webpack、rspack、next（仅 Next.js）。
3. 开发工具：qoder、cursor、claude-code、vscode、codebuddy-cn、trae、idea。
4. MCP：context7、exa-search；默认不启用，包版本固定且写入前执行权限预检。
5. Skills：交互模式只展示当前技术栈的推荐项；--skills 仍可显式启用安全审查、TDD、E2E、Vue 调试等专项能力。

默认推荐矩阵：

| 技术栈 | 推荐 Skills | |--------|-------------| | React | design-taste-frontend、frontend-patterns | | Next.js | design-taste-frontend、frontend-patterns | | Vue | design-taste-frontend、vue-best-practices | | Vue + Vue Router | 追加 vue-router-best-practices | | Vue + Pinia | 追加 vue-pinia-best-practices | | Nuxt（enhance） | design-taste-frontend、vue-best-practices |

eval-harness、旧版 frontend-design、ui-ux-pro-max、using-superpowers 和 verification-loop 已从源码与发布包移除：它们分别存在运行时耦合、能力重叠或体积过大的问题。

4. 输出结果怎么看

执行 init 或 enhance 后，建议优先检查这些位置：

1. .fe-kit/project.json：项目基础元数据。
2. .fe-kit/skills.json：启用的内置技能记录。
3. .fe-kit/mcp.json：MCP 记录与适配状态。
4. .fe-kit/tools.json：选中的开发工具记录。
5. 对应编辑器目录：例如 .qoder/、.cursor/、.claude/、.vscode/、.github/、.trae/、.idea/fe-kit/。

开发与构建

pnpm install
pnpm run build    # 产出 dist/
pnpm run dev      # tsup watch
pnpm run typecheck

Smoke 校验

用于验证脚手架稳定性与模板可运行性：

# 模板矩阵全量冒烟（react/vue × vite/webpack/rspack，next × next）
pnpm run test:smoke:templates

# 一键执行全部 smoke
pnpm run test:smoke

命令

| 命令 | 说明 | | ---- | ---- | | init | 交互式初始化 Vue、React 或 Next.js + TypeScript 项目 | | enhance | 在已有前端项目中叠加开发工具、Skills、MCP、规则等 |

仓库结构（节选）

• src/ — CLI 源码、模板、规则与内置资源
• src/adapters/ — 各编辑器输出适配（Cursor / Claude Code / VS Code / CodeBuddy / Trae / IDEA）
• src/rules/ — 内置规则 Markdown 源（按 common / react / vue 分类）
• src/skills/ — 技能目录（catalog.ts + 各 <skill>/SKILL.md 预设模板，构建时拷贝到 dist/skills/）
• src/constants/dependency-versions.ts — 脚手架版本矩阵单一来源（模板依赖/生成器依赖统一从这里维护）
• dist/ — 构建产物（发布内容）
• plan/ — 见下文

plan/ 目录

用于存放与代码实现解耦的规划和协作材料，便于长期维护与对齐方向：

• 现有方案：已采纳或正在执行的技术方案、架构决策记录等
• 后续计划：路线图、里程碑、待启动功能的概要说明
• 待办与跟踪：任务清单、复盘要点、会议结论摘要等

建议按主题或时间分子目录或文件命名（例如 plan/2026-q2-roadmap.md），避免与 src/ 内的可执行逻辑混放。该目录不参与 CLI 打包；新增文档无需改构建配置。