@qilitt-mickey/vue3-temp-skill

vue3-temp-skill

面向 vue3-web-temp 及其派生 Vue 3 项目的工程技能。支持常规功能开发，也支持与通用设计技能 project-ui-design 同轮协作：按原稿调整真实项目的页面、布局和组件表现，保留项目业务与工程约束。

双技能使用

在目标项目中附上设计图、设计文件路径或已确定的 Demo：

/project-ui-design 按照设计效果进行还原落地到项目中
/vue3-temp-skill 代码规范按照此要求

两行先后顺序不影响职责顺序；不需要人工搬运 JSON 或另开会话。不支持 Slash 的编辑器可直接读取两个 SKILL.md 及其相对资源。缺少原稿时明确补充来源，不把内置示例当成用户选定设计。

执行链路

设计还原：项目探查 → 固定原稿与视觉交接 → 保存业务基线 → 调整真实视图 → 工程检查、业务回归与原稿对照 → 修正差异。

常规开发：项目探查 → scripts/match.py 按需路由 → 复用项目组件、Hooks、HTTP 和类型 → 完成行为闭环 → 工程与功能检查。

原稿决定视觉，项目源码和用户明确需求决定业务，模板规范决定工程实现。

• 可调整页面模板、壳层布局、视觉容器、CSS 及项目自有 Re* 组件的表现层；不限于加 class 或生成三份 CSS。
• 保留项目的字段、菜单、列、筛选、按钮、枚举、API、权限、校验、状态和业务顺序；不复制 Demo 业务凑截图。
• 保留组件公开接口、useTableSearch 定高与滚动链、ReTableBar、RePagination、ReTableOperate 和详情返回链；共享改动检查所有受影响调用处。

原稿与证据

新交接格式为 ui.design-handoff/1.0。同一任务保存于 <项目根>/.design/<任务名>/：

原稿始终可重新打开。逐区域、逐实例、逐状态、逐视口检查；必需元素缺失不能记为跳过。只在已验证的可比范围内报告结果，不把业务内容差异改成 Demo 数据，不用“CSS 存在”或脚本退出成功替代视觉证据。

旧格式兼容

已有 ui.visual-contract/1.0 仍可读取：保留原文件，找回其设计来源，复用可信规格并补新交接。旧 adapter、mapping 和角色规则仅作为排查线索，不覆盖原稿值。

旧 generate-css.mjs 与 verify-render.mjs 已停止执行，调用会给出迁移提示。旧 check-landing.mjs 只有显式 --legacy-diagnostics 才运行文本诊断，始终标记视觉未验证并非零退出；它不是当前验收入口。

主要规范

安装与更新

要求 Node.js >= 22.12.0；能力路由需要 Python 3，无 Python 时按技能入口表加载规范。命令形状与 project-ui-design 完全一致，只有包名不同；-y 让 npx 跳过确认提示。

npx -y @qilitt-mickey/vue3-temp-skill@latest install     # 安装：自动探测本机已装编辑器
npx -y @qilitt-mickey/vue3-temp-skill@latest update      # 更新：把已安装目标刷到当前版本
npx -y @qilitt-mickey/vue3-temp-skill@latest list        # 查看装到了哪些目录、哪个版本
npx -y @qilitt-mickey/vue3-temp-skill@latest uninstall   # 卸载：只清理本包托管的文件

需要精确控制落点时：

npx -y @qilitt-mickey/vue3-temp-skill@latest install qoder                          # 只装 Qoder
npx -y @qilitt-mickey/vue3-temp-skill@latest install all                            # 全装，含未探测到的编辑器
npx -y @qilitt-mickey/vue3-temp-skill@latest install copilot --project /path/to/app # 项目级（copilot/gemini 必须带 --project）

省略 target 是自动探测，install all 是显式全装，两者不同；update / uninstall 不带 target 时按已安装记录整批处理。目标与选项以 --help 为准。

安装器携带运行时资源；项目级说明使用独立托管区块，避免覆盖用户说明及另一套技能。旧版本冲突按提示处理，勿直接覆盖未知文件。

设计还原需要两套技能同时在位：

npx -y @qilitt-mickey/project-ui-design@latest install
npx -y @qilitt-mickey/vue3-temp-skill@latest install

在源码仓库内改动后想先自测，用同一套参数直接跑本地 CLI：node bin/cli.js install qoder。

npm test
python scripts/match.py --batch

源码检查通过不代表所有编辑器已经实机验证。

与模板及设计侧的边界

模板 AGENTS.md 提供当前项目事实与入口；本包维护 Vue 模板的工程流程和适配；设计侧保持通用，不维护模板路径、组件名、CSS 选择器或业务映射。

新增业务能力时增加按需 reference 并登记路由；新增 Vue 组件库时增加适配规范并验证实际 DOM。其他框架使用各自项目技能，通用设计交接无需修改。

发布入口保留在 package.json；提交、发布和安装到用户环境均需明确授权。本次源码更新不等于已经发布或更新了机器上的已安装技能。