@qilitt-mickey/vue3-temp-skill 1.0.8

package/README.md

@@ -0,0 +1,229 @@
+# vue3-temp-skill
+
+Vue 3 企业级中后台项目开发规范技能包 -- 让 AI 编程助手按照团队规范生成代码，并自动审查代码质量。
+
+## 这是什么
+
+一个 AI Skill 文件包，包含 32 个功能模块，覆盖 Vue 3 中后台项目从开发到交付的完整流程。安装后，只需一个命令 `/vue3-temp-skill` 加上自然语言描述需求，AI 就会自动匹配对应模块规范生成代码，并在生成后自动执行代码质量审查。
+
+## 使用方式
+
+```
+/vue3-temp-skill <你的需求描述>
+```
+
+示例：
+
+- `/vue3-temp-skill 帮我开发一个客户管理模块，需要按客户名称、状态查询，字段包括客户编号、名称、联系方式、创建时间`
+- `/vue3-temp-skill 封装一个部门选择器组件，支持远程搜索和分页`
+- `/vue3-temp-skill 给这个页面加上按钮权限，只有 admin 角色能看到删除按钮`
+- `/vue3-temp-skill 帮我做一个知识图谱页面，用力导向布局`
+- `/vue3-temp-skill 开发一个 BPMN 工作流查看页面`
+
+AI 接收到请求后会自动完成：
+
+1. 分析需求，自动匹配对应的规范模块（无需手动指定）
+2. 按照项目模板规范生成完整代码
+3. 自动执行代码质量审查（类型安全、组件规范、API 对接、安全检查、性能、样式、业务逻辑、代码风格）
+4. 如发现问题直接修正，输出最终可用代码
+
+## 包含的模块
+
+技能包内置 32 个规范模块，AI 根据需求自动匹配，无需手动选择：
+
+| 模块 | 覆盖场景 |
+|------|---------|
+| vue-core | 项目基础、组件开发、路由/状态管理/i18n |
+| http-api | API 接口调用、文件上传下载、加密请求 |
+| ui-components | Re* 公共组件开发、组件库维护 |
+| crud-pages | 查询列表页、表单页、详情/编辑页 |
+| advanced-ui | 选择器、高级表格、图表、工作流 |
+| layout-theme | 布局、主题、响应式、PC/移动端双端 |
+| permission-auth | 页面/按钮权限、自定义指令、Hooks |
+| mobile-h5 | 移动端页面、Vant 组件、微信集成 |
+| build-optim | Vite 构建、代码分割、ESLint 工具链 |
+| code-quality | 代码审查、AI 代码自检、Code Review（始终生效） |
+| api-check | 前后端接口联调、契约验证、Mock |
+| feedback-loading | Loading 遮罩、Message 提示、MessageBox 弹窗 |
+| base-code-dict | 码表/字典数据获取、缓存、映射显示 |
+| download-export | 文件下载、模板下载、文件流导出 |
+| seamless-scroll | 无缝滚动、公告栏、排行榜滚动 |
+| qrcode-barcode | 二维码/条形码生成与展示 |
+| rich-text | 富文本编辑器录入、图文混排 |
+| verify-captcha | 滑块验证、拖拽验证、图片验证码、短信倒计时 |
+| data-screen | 数据大屏/可视化大屏开发 |
+| form-advanced | 图标选择器、分段控制器、卡片选择、锚点、地址解析 |
+| feedback-ui | 通知栏、水印、时间轴、闪烁点、打字机动画 |
+| graph-relation | 知识图谱、关系图谱、力导向布局 |
+| workflow-bpmn | BPMN 工作流查看、流程审批可视化 |
+| flowchart-g6 | G6 流程图、树形流程、Vue 节点渲染 |
+| data-mapping | JsPlumb 字段映射、拖拽连线 |
+| websocket-realtime | WebSocket 实时通信、多实例管理 |
+| file-management | 附件上传管理、文件预览 |
+| directives-advanced | 高级自定义指令（复制、自适应字体） |
+| data-compare | 编辑页数据变更对比、高亮、汇总弹窗、表格行增删改 |
+| detail-page | 详情页/编辑页跳转与数据回显 |
+| data-writeback | 表单数据回显、编辑回填、多表单校验 |
+| tree-table | 树形表格、树结构转换、树形连线 |
+
+## 安装
+
+### 前置条件
+
+- Node.js >= 22.12.0
+- npm / pnpm / yarn 均可
+
+### 安装到指定 AI 工具
+
+包已发布在 **npmjs.org**，直接安装即可，**无需** GitHub Token / 额外 registry 配置。
+
+```bash
+# 通过 npx（推荐，自动使用最新版本）
+npx @qilitt/vue3-temp-skill@latest install cursor       # Cursor
+npx @qilitt/vue3-temp-skill@latest install qoder        # Qoder
+npx @qilitt/vue3-temp-skill@latest install copilot      # GitHub Copilot
+npx @qilitt/vue3-temp-skill@latest install windsurf     # Windsurf
+npx @qilitt/vue3-temp-skill@latest install gemini       # Gemini CLI
+npx @qilitt/vue3-temp-skill@latest install trae         # Trae
+npx @qilitt/vue3-temp-skill@latest install claude       # Claude Code
+npx @qilitt/vue3-temp-skill@latest install universal    # 通用标准
+npx @qilitt/vue3-temp-skill@latest install all          # 安装到所有工具
+
+# 通过 pnpm
+pnpm dlx @qilitt/vue3-temp-skill@latest install cursor
+
+# 全局安装后使用
+npm install -g @qilitt/vue3-temp-skill
+vue3-temp-skill install cursor
+```
+
+> 若本机曾经配置过 `@qilitt:registry=https://npm.pkg.github.com`，请删除该配置，否则仍会走旧源并 401：  
+> `npm config delete @qilitt:registry`  
+> 并检查 `~/.npmrc` 中是否还有 `npm.pkg.github.com` 相关行。
+
+### 安装到指定项目
+
+```bash
+npx @qilitt/vue3-temp-skill@latest install cursor --project ./my-vue-app
+```
+
+### 更新技能
+
+当技能包发布新版本后，使用 `update` 命令同步更新：
+
+```bash
+# 更新所有已安装的目标到最新版本
+npx @qilitt/vue3-temp-skill@latest update
+
+# 更新指定目标
+npx @qilitt/vue3-temp-skill@latest update cursor
+```
+
+> `@latest` 标签确保 npx 每次都下载最新版本，无需手动清理缓存。
+
+### 其他命令
+
+```bash
+# 查看已安装的目标
+npx @qilitt/vue3-temp-skill list
+
+# 卸载
+npx @qilitt/vue3-temp-skill uninstall cursor     # 卸载指定目标
+npx @qilitt/vue3-temp-skill uninstall            # 卸载全部
+```
+
+## 目录结构
+
+```
+vue3-temp-skill/
+├── bin/
+│   └── cli.js              # CLI 入口（npx 调用）
+├── SKILL.md                # 主入口：路由索引 + 核心规范 + 质量审查清单
+├── references/             # 32 个模块详细文档
+│   ├── vue-core.md             # 项目基础规范
+│   ├── http-api.md             # HTTP 与 API 规范
+│   ├── ui-components.md        # Re* 组件开发规范
+│   ├── crud-pages.md           # CRUD 页面开发流程
+│   ├── advanced-ui.md          # 高级 UI 组件
+│   ├── layout-theme.md         # 布局与主题
+│   ├── permission-auth.md      # 权限与指令
+│   ├── mobile-h5.md            # 移动端与微信
+│   ├── build-optim.md          # 构建与工程化
+│   ├── code-quality.md         # 代码质量审查
+│   ├── api-check.md            # 接口对接检查
+│   ├── feedback-loading.md     # 反馈与 Loading
+│   ├── base-code-dict.md       # 基础代码（字典）
+│   ├── download-export.md      # 下载与导出
+│   ├── seamless-scroll.md      # 无缝滚动
+│   ├── qrcode-barcode.md       # 二维码与条形码
+│   ├── rich-text.md            # 富文本编辑器
+│   ├── verify-captcha.md       # 验证码与校验
+│   ├── data-screen.md          # 数据大屏
+│   ├── form-advanced.md        # 高级表单组件
+│   ├── feedback-ui.md          # 展示类反馈组件
+│   ├── graph-relation.md       # 知识图谱
+│   ├── workflow-bpmn.md        # BPMN 工作流
+│   ├── flowchart-g6.md         # G6 流程图
+│   ├── data-mapping.md         # JsPlumb 字段映射
+│   ├── websocket-realtime.md   # WebSocket 实时通信
+│   ├── file-management.md      # 文件管理
+│   ├── directives-advanced.md  # 高级自定义指令
+│   ├── data-compare.md         # 数据变更对比
+│   ├── detail-page.md          # 详情页开发
+│   ├── data-writeback.md       # 数据回显
+│   └── tree-table.md           # 树形表格
+├── package.json            # npm 包配置
+├── install.js              # 兼容旧版安装脚本
+└── README.md
+```
+
+## 自定义
+
+根据你的团队情况修改 `SKILL.md` 和 `references/` 下的文件：
+
+1. 调整技术栈版本号、组件库选择
+2. 修改组件命名规则、目录结构约定
+3. 补充团队特有的业务组件和 API 模式
+4. 调整代码质量检查清单
+
+## 维护者：发布到 npmjs.org
+
+### 首次发布（一次性）
+
+1. 注册 [npmjs.com](https://www.npmjs.com/signup)，账号开启 **2FA**
+2. 确保能使用 scope `@qilitt`（用户名或组织名为 `qilitt`；被占用则需改 `package.json` 的 `name`）
+3. 本机登录：
+   ```bash
+   npm login
+   ```
+4. 确认不会指到旧源：
+   ```bash
+   npm config delete @qilitt:registry
+   npm config get registry
+   # 应为 https://registry.npmjs.org/
+   ```
+5. 在本仓库目录首次发布：
+   ```bash
+   npm publish --access public
+   ```
+6. 验证：
+   ```bash
+   npm view @qilitt/vue3-temp-skill version
+   npx @qilitt/vue3-temp-skill@latest --help
+   ```
+
+### 日常发版
+
+```bash
+npm run release          # 补丁 1.0.8 → 1.0.9
+npm run release:minor    # 次版本
+npm run release:major    # 主版本
+```
+
+脚本会：升版本 → git commit → push Gitee → `npm publish --access public`。
+
+> 旧版 GitHub Packages 上的包可不再维护；请通知已配置 `@qilitt:registry=https://npm.pkg.github.com` 的用户删除该配置。
+
+## License
+
+MIT