@agile-team/wl-skills-ui

解决什么问题

适用于已接入的 PC Vue 3 + Element Plus 管理端。UniApp、小程序、App/PDA、移动 H5 不套用本包规则。工具独立可用；工程目录与接口约定由 Kit 管，Git 钩子和 CI 门禁由 Gate 编排。

三步接入

以下命令在实际业务项目根目录执行。Node.js 22+ 用于工具；项目仍使用自己的 Vue 和 Element Plus。

1. 安装并选对模式

pnpm add @agile-team/wl-skills-ui
pnpm exec wl-ui init --project . --profile native-element

init 安装 AI 入口、规范与 MCP 配置，记录所选 Profile；不自动改写项目已有 SCSS 和 runtime import。下面以 native-element 为例。

2. 接入样式和运行时

// 项目全局样式入口，在项目基础样式之后引入
@use "@agile-team/wl-skills-ui/styles/presets/native-element" as *;

// src/main.ts
import "@agile-team/wl-skills-ui/runtime/profiles/native-element";

其他 Profile 的对应入口用 pnpm exec wl-ui profiles 查询；只选一组，AG Grid 按项目实际使用开启。

3. 检查接入，看到第一份反馈

pnpm exec wl-ui check --project . --fail-on-error
pnpm exec wl-ui scan --target src --output summary

check 验证样式、运行时等接入项；scan 返回实际文件数、问题数量和规则分布。启动业务项目，打开列表、表单与弹窗确认实际效果；静态扫描不能代替浏览器验收。

一个场景：列表页调整后如何闭环

假设修改了 src/views/order/index.vue，出现按钮尺寸、控件宽度或表格对齐问题。已接入的 AI 按下面流程调用工具；技术经理也可直接复现。

# 1. 识别本次任务、目标和待检查项，取得 runId
pnpm exec wl-ui task "修复样式：订单列表页" --target src/views/order/index.vue --json

# 2. 使用返回的 runId 检查同一目标
pnpm exec wl-ui scan --target src/views/order/index.vue --run-id <runId> --output summary

# 3. 修复后复扫，并回查实际结果
pnpm exec wl-ui scan --target src/views/order/index.vue --run-id <runId> --fail-on-error
pnpm exec wl-ui status --run-id <runId> --json

脚本负责确定性扫描与机械修复，AI 处理布局语义和业务取舍。修复默认保留快照；命令与回滚见 任务与检查回执、pnpm exec wl-ui --help。

自动执行放在哪里

把 wl-ui scan --target src --changed --base origin/main --fail-on-error 接入已配置的 Git 钩子或 CI，开发者提交时获得反馈；origin/main 替换为项目实际基线分支。交付阶段保留完整扫描和浏览器验收。使用 Gate 时由 Gate 配置调用本包，统一汇总结果。

本包的 init 提供工具与 AI 入口，实际自动调用取决于宿主、钩子和流水线接线。首次接入用一处可定位的问题验证“触发 → 报告 → 修复 → 复扫”，安装成功本身不代表检查已经执行。

按需深入

WL 系列

WL · World Leading。各包按职责独立接入，已接且适用的包可共享任务 runId。