@agile-team/wl-skills-ui 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/CHANGELOG.md +207 -0
  2. package/README.md +623 -0
  3. package/SKILL.md +632 -0
  4. package/bin/wl-ui.js +794 -0
  5. package/design/spec/color.md +41 -0
  6. package/design/spec/spacing.md +28 -0
  7. package/design/spec/typography.md +29 -0
  8. package/design/tokens/base.css +144 -0
  9. package/design/tokens/index.css +8 -0
  10. package/dist/ag-grid-override.scss +1 -0
  11. package/dist/element.scss +1 -0
  12. package/dist/index.scss +1 -0
  13. package/dist/portal.scss +1 -0
  14. package/dist/style-override.scss +1 -0
  15. package/dist/tokens.css +144 -0
  16. package/es/chunk-GBB7LDKQ.js +261 -0
  17. package/es/chunk-MDI2SCUP.js +281 -0
  18. package/es/chunk-QDTNMM7W.js +286 -0
  19. package/es/chunk-YLNAFAWE.js +233 -0
  20. package/es/common-preset.d.ts +38 -0
  21. package/es/common-preset.js +157 -0
  22. package/es/index.d.ts +32 -0
  23. package/es/index.js +1 -0
  24. package/es/presets/security.d.ts +16 -0
  25. package/es/presets/security.js +99 -0
  26. package/es/renderers-BFRSp2BH.d.ts +51 -0
  27. package/es/renderers-DMZbi_Gs.d.ts +51 -0
  28. package/es/renderers-DWhUlI2y.d.ts +47 -0
  29. package/es/types-04qLKHMt.d.ts +62 -0
  30. package/es/types-BrCPjAH6.d.ts +62 -0
  31. package/es/types-QZ1gy9KX.d.ts +63 -0
  32. package/examples/migration-operations-to-renderOps.md +107 -0
  33. package/examples/wk-exempt.example.json +30 -0
  34. package/mcp/server.js +394 -0
  35. package/package.json +130 -0
  36. package/reference/SelectPopupCom.vue +634 -0
  37. package/reference/ag-cell-renders.ts +644 -0
  38. package/reference/define-columns.ts +185 -0
  39. package/reference/jhlc.d.ts +1 -0
  40. package/scanner/coverage.mjs +287 -0
  41. package/scanner/exempt.mjs +127 -0
  42. package/scanner/fix.mjs +216 -0
  43. package/scanner/index.mjs +403 -0
  44. package/scanner/integration.mjs +155 -0
  45. package/scanner/report.mjs +459 -0
  46. package/scanner/rules/_shared.mjs +134 -0
  47. package/scanner/rules/button.mjs +97 -0
  48. package/scanner/rules/color.mjs +118 -0
  49. package/scanner/rules/componentFamily.mjs +184 -0
  50. package/scanner/rules/dialog.mjs +42 -0
  51. package/scanner/rules/form.mjs +86 -0
  52. package/scanner/rules/index.mjs +58 -0
  53. package/scanner/rules/table.mjs +170 -0
  54. package/scanner/rules/tag.mjs +245 -0
  55. package/scanner/snapshot.mjs +198 -0
  56. package/skills/_flows/full-audit.md +65 -0
  57. package/skills/_flows/legacy-skin-align.md +71 -0
  58. package/skills/_flows/new-project-init.md +80 -0
  59. package/skills/_flows/progressive-migrate.md +49 -0
  60. package/skills/_meta/_compat/README.md +47 -0
  61. package/skills/_meta/_compat/editors.json +76 -0
  62. package/skills/_meta/_compat/headers/agents.txt +7 -0
  63. package/skills/_meta/_compat/headers/claude-code.txt +7 -0
  64. package/skills/_meta/_compat/headers/cline.txt +7 -0
  65. package/skills/_meta/_compat/headers/cursor-mdc.txt +5 -0
  66. package/skills/_meta/_compat/headers/github-copilot.txt +5 -0
  67. package/skills/_meta/_compat/headers/kiro.txt +4 -0
  68. package/skills/_meta/_compat/headers/qoder.txt +4 -0
  69. package/skills/_meta/_compat/headers/trae.txt +3 -0
  70. package/skills/_meta/_compat/headers/windsurf.txt +5 -0
  71. package/skills/_meta/_detection.md +81 -0
  72. package/skills/_meta/_registry.md +96 -0
  73. package/skills/element/component-family/SKILL.md +71 -0
  74. package/skills/element/el-dialog/SKILL.md +124 -0
  75. package/skills/element/el-form/SKILL.md +84 -0
  76. package/skills/element/el-table/SKILL.md +86 -0
  77. package/skills/element/el-tag/SKILL.md +127 -0
  78. package/skills/layouts/detail-page/SKILL.md +99 -0
  79. package/skills/layouts/form-dialog/SKILL.md +128 -0
  80. package/skills/layouts/list-page/SKILL.md +111 -0
  81. package/skills/layouts/tree-list/SKILL.md +108 -0
  82. package/skills/ops/audit/SKILL.md +109 -0
  83. package/skills/ops/fix/SKILL.md +52 -0
  84. package/skills/ops/fix/USAGE.md +24 -0
  85. package/skills/ops/migrate/SKILL.md +157 -0
  86. package/skills/ops/scan/SKILL.md +71 -0
  87. package/skills/ops/scan/USAGE.md +16 -0
  88. package/skills/runtime/design-tokens/SKILL.md +88 -0
  89. package/skills/runtime/design-tokens/USAGE.md +19 -0
  90. package/skills/runtime/migration/SKILL.md +106 -0
  91. package/skills/runtime/migration/USAGE.md +34 -0
  92. package/skills/runtime/style-align/SKILL.md +124 -0
  93. package/skills/runtime/style-align/USAGE.md +52 -0
  94. package/skills/vendors/ag-grid/SKILL.md +94 -0
  95. package/skills/vendors/base-table/SKILL.md +57 -0
  96. package/skills/vendors/c-components/SKILL.md +36 -0
  97. package/skills/vendors/custom-wrappers/SKILL.md +45 -0
  98. package/skills/vendors/jh-components/SKILL.md +42 -0
  99. package/skills/vendors/unknown-wrapper/SKILL.md +44 -0
  100. package/standards/engineering/01-import-order.md +46 -0
  101. package/standards/engineering/02-naming.md +54 -0
  102. package/standards/engineering/03-scss-structure.md +59 -0
  103. package/standards/ui/01-table.md +111 -0
  104. package/standards/ui/02-button.md +83 -0
  105. package/standards/ui/03-form.md +118 -0
  106. package/standards/ui/04-tag-status.md +110 -0
  107. package/standards/ui/05-dialog-pagination.md +118 -0
  108. package/styles/element/_card.scss +26 -0
  109. package/styles/element/_descriptions.scss +22 -0
  110. package/styles/element/_dialog.scss +43 -0
  111. package/styles/element/_drawer.scss +22 -0
  112. package/styles/element/_feedback.scss +52 -0
  113. package/styles/element/_form.scss +22 -0
  114. package/styles/element/_navigation.scss +36 -0
  115. package/styles/element/_overlay.scss +32 -0
  116. package/styles/element/_pagination.scss +16 -0
  117. package/styles/element/_steps.scss +32 -0
  118. package/styles/element/_table.scss +13 -0
  119. package/styles/element/_tabs.scss +40 -0
  120. package/styles/element/_tree.scss +27 -0
  121. package/styles/element/_upload.scss +34 -0
  122. package/styles/element/index.scss +17 -0
  123. package/styles/index.scss +21 -0
  124. package/styles/layouts/_detail-page.scss +27 -0
  125. package/styles/layouts/_form-dialog.scss +19 -0
  126. package/styles/layouts/_list-page.scss +47 -0
  127. package/styles/layouts/_tree-list.scss +33 -0
  128. package/styles/layouts/index.scss +6 -0
  129. package/styles/presets/element-only.scss +6 -0
  130. package/styles/presets/full.scss +12 -0
  131. package/styles/presets/security.scss +37 -0
  132. package/styles/presets/skin.scss +14 -0
  133. package/styles/presets/tokens-only.scss +7 -0
  134. package/styles/tokens/index.scss +79 -0
  135. package/styles/vendors/_ag-grid.scss +273 -0
  136. package/styles/vendors/_base-components.scss +480 -0
  137. package/styles/vendors/_base-query-toolbar.scss +253 -0
  138. package/styles/vendors/_base-table.scss +41 -0
  139. package/styles/vendors/_c-components.scss +34 -0
  140. package/styles/vendors/_custom-wrappers.scss +30 -0
  141. package/styles/vendors/_jh-drag-col.scss +63 -0
  142. package/styles/vendors/_jh-pagination.scss +81 -0
  143. package/styles/vendors/_jh-tree.scss +196 -0
  144. package/styles/vendors/_portal.scss +114 -0
  145. package/styles/vendors/index.scss +17 -0
  146. package/templates/ag-grid-page/TPL-AG-GRID.md +76 -0
  147. package/templates/form-dialog/TPL-FORM-DIALOG.md +165 -0
  148. package/templates/list-page/TPL-LIST.md +139 -0
  149. package/templates/tree-list/TPL-TREE-LIST.md +176 -0
  150. package/templates/ui-optimization-report/TPL-UI-OPTIM-REPORT.md +343 -0
@@ -0,0 +1,65 @@
1
+ ---
2
+ description: |
3
+ 全量审计流程 — 不修改任何文件,输出按 layer/vendor 分层的可读报告。
4
+ 适用:项目接入前评估、CI 检查、季度健康度盘点。
5
+ applyTo: "**/*.{vue,scss}"
6
+ ---
7
+
8
+ # Flow: full-audit
9
+
10
+ > 纯审计流程(read-only)
11
+
12
+ ## 触发短语
13
+
14
+ - "用 wk-ui 全量审计当前项目"
15
+ - "audit 流程跑一下"
16
+ - "出一份风格健康度报告"
17
+
18
+ ## 执行步骤
19
+
20
+ ### Phase 1 — 扫描全量
21
+ ```bash
22
+ npx wk-ui scan --target src --outFile audit-report.md
23
+ ```
24
+
25
+ ### Phase 2 — 按层分组统计
26
+ 报告按以下维度汇总:
27
+
28
+ | 维度 | 说明 |
29
+ |---|---|
30
+ | **Layer** | L0 tokens / L1 element / L2 vendors / L3 layouts |
31
+ | **Vendor** | element / base-table / jh / c-prefix / custom / ag-grid |
32
+ | **Severity** | error / warn / info |
33
+ | **File** | 按文件归集,便于点选跳转 |
34
+
35
+ ### Phase 3 — 探测未识别封装
36
+ - 扫描 `src/components/` 下 `.vue` 文件
37
+ - 输出"未匹配 vendor skill"清单
38
+ - 给出"是否扩展 skills/vendors/_registry.md"建议
39
+
40
+ ### Phase 4 — 探测未覆盖布局
41
+ - 扫描页面级容器 class(`.list-*` / `.tree-*` 等)
42
+ - 对比 `styles/layouts/` 已有骨架
43
+ - 输出"是否新增 layouts/<name>.scss" 建议
44
+
45
+ ### Phase 5 — 输出建议清单
46
+
47
+ ```
48
+ [audit] 总计:123 处问题
49
+ L0 tokens: 45 处(颜色硬编码)
50
+ L1 element: 56 处(size/对齐/empty-text)
51
+ L2 vendors: 22 处(base-table 12 / jh 7 / custom 3)
52
+ L3 layouts: 0 处
53
+
54
+ [扩展建议]
55
+ - 发现未识别封装组件 3 个:<MyChart>, <RichEditor>, <TableExport>
56
+ → 建议在 skills/vendors/custom-wrappers/ 追加识别规则
57
+ - 发现新页面骨架 1 个:.dashboard-grid(src/views/dashboard)
58
+ → 建议在 styles/layouts/ 新增 _dashboard.scss
59
+ ```
60
+
61
+ ## 不做的事
62
+
63
+ - ❌ 不修改任何文件
64
+ - ❌ 不触发 fix
65
+ - ❌ 仅诊断和建议
@@ -0,0 +1,71 @@
1
+ ---
2
+ description: |
3
+ 老项目化妆对齐流程 — 不破坏业务代码,仅注入 tokens + element + vendors 三层覆盖。
4
+ 适用:不可全面改造的存量项目,只想统一视觉。
5
+ applyTo: "**/*.{vue,scss,html}"
6
+ ---
7
+
8
+ # Flow: legacy-skin-align
9
+
10
+ > 化妆模式(Skin Mode)— 最大覆盖、最小侵入
11
+
12
+ ## 触发短语
13
+
14
+ - "用 wk-ui 给这个老项目化妆对齐"
15
+ - "legacy-skin 流程跑一下"
16
+ - "skin mode 接入"
17
+
18
+ ## 执行步骤
19
+
20
+ ### Phase 0 — 安装/更新 Skill 与 MCP 配置
21
+ ```bash
22
+ npx wk-ui init --project . --mode skin
23
+ npx wk-ui doctor --project .
24
+ ```
25
+
26
+ 该命令会写入 AI 编辑器规则、触发提示、`.mcp.json` 和 `.wk-skills-ui-manifest.json`。已安装项目可改用 `npx wk-ui update --project .`。
27
+
28
+ (AI 严格按序)
29
+
30
+ ### Phase 1 — 接入 tokens
31
+ 1. 检查 `index.html`,在 `<head>` 内追加:
32
+ ```html
33
+ <link rel="stylesheet" href="/node_modules/@agile-team/wk-skills-ui/design/tokens/base.css" />
34
+ ```
35
+ 2. 检查 `vite.config.ts` / `webpack` 是否能解析 `node_modules` 路径
36
+
37
+ ### Phase 2 — 接入 skin 预设
38
+ 1. 找到全局 SCSS 入口(`src/main.scss` / `src/styles/index.scss`)
39
+ 2. 在文件最顶部追加:
40
+ ```scss
41
+ @use '@agile-team/wk-skills-ui/styles/presets/skin' as *;
42
+ ```
43
+ 3. **不**引入 `layouts/` 层(避免和老项目布局冲突)
44
+
45
+ ### Phase 3 — 触发 vendors 层 skill 修复
46
+ 按优先级顺序,逐个 skill 触发:
47
+ 1. `vendors/base-table` — 修 BaseTable* 的 R001/R002/R003/R014
48
+ 2. `vendors/jh-components` — 修 jh-* 的 R006/R007/R011
49
+ 3. `vendors/c-components` — 修 C_*/c_* 的对齐
50
+ 4. `vendors/custom-wrappers` — 兜底自封装
51
+ 5. `vendors/ag-grid` — 修 AG Grid 列对齐
52
+
53
+ ### Phase 4 — 触发 element 层 skill 修复
54
+ 针对原生使用的 el-* 控件:
55
+ - `element/el-table` → R001/R002/R014
56
+ - `element/el-form` → R006/R008
57
+ - `element/el-dialog` → R011/R015
58
+ - `element/el-tag` → R009/R010
59
+
60
+ ### Phase 5 — 触发 tokens 层修复
61
+ - `runtime/design-tokens` → R016/R017/R018(颜色硬编码 → CSS 变量)
62
+
63
+ ### Phase 6 — 不做的事
64
+ - ❌ **不要**重写业务代码逻辑
65
+ - ❌ **不要**替换组件为 runtime API(那是 native mode 的事)
66
+ - ❌ **不要**修改业务 layout 容器 class
67
+
68
+ ## 完成后输出
69
+
70
+ - 报告:分层统计修复条目
71
+ - 建议:哪些封装组件适合下一阶段"原生迁移"
@@ -0,0 +1,80 @@
1
+ ---
2
+ description: |
3
+ 新项目原生接入流程 — 从零搭建一个符合团队规范的 Vue + Element Plus 项目。
4
+ 接入完整 5 层(tokens + element + vendors + layouts + runtime),最大化业务代码精简。
5
+ applyTo: "**/*.{vue,ts,scss,html}"
6
+ ---
7
+
8
+ # Flow: new-project-init
9
+
10
+ > 原生模式(Native Mode)— 完整接入
11
+
12
+ ## 触发短语
13
+
14
+ - "用 wk-ui 给新项目接入"
15
+ - "new-project 流程跑一下"
16
+ - "native mode 完整接入"
17
+
18
+ ## 执行步骤
19
+
20
+ ### Phase 0 — 安装/更新 Skill 与 MCP 配置
21
+ ```bash
22
+ npx wk-ui init --project . --mode native
23
+ npx wk-ui doctor --project .
24
+ ```
25
+
26
+ 该命令会写入 AI 编辑器规则、触发提示、`.mcp.json` 和 `.wk-skills-ui-manifest.json`。已安装项目可改用 `npx wk-ui update --project .`。
27
+
28
+
29
+
30
+ ### Phase 1 — 安装包
31
+ ```bash
32
+ pnpm add @agile-team/wk-skills-ui
33
+ ```
34
+
35
+ ### Phase 2 — 注入 tokens
36
+ `index.html` `<head>`:
37
+ ```html
38
+ <link rel="stylesheet" href="/node_modules/@agile-team/wk-skills-ui/design/tokens/base.css" />
39
+ ```
40
+
41
+ ### Phase 3 — 接入完整样式
42
+ `src/styles/index.scss`:
43
+ ```scss
44
+ @use '@agile-team/wk-skills-ui/styles' as *; // 等价于 presets/full
45
+ ```
46
+
47
+ ### Phase 4 — 接入 runtime
48
+ `src/main.ts`:
49
+ ```ts
50
+ import { installCommonPreset } from '@agile-team/wk-skills-ui/runtime/common-preset';
51
+ installCommonPreset();
52
+ ```
53
+
54
+ ### Phase 5 — 使用模板生成第一个页面
55
+ - 列表页:参考 `templates/list-page/TPL-LIST.md`
56
+ - 表单弹窗:参考 `templates/form-dialog/TPL-FORM-DIALOG.md`
57
+ - 左树右表:参考 `templates/tree-list/TPL-TREE-LIST.md`
58
+ - AG Grid 页:参考 `templates/ag-grid-page/TPL-AG-GRID.md`
59
+
60
+ ### Phase 6 — 业务定制 preset(按需)
61
+ ```bash
62
+ npx wk-ui add-preset my-biz
63
+ # 生成 runtime/presets/my-biz.ts,自定义业务字段映射
64
+ ```
65
+
66
+ ### Phase 7 — CI 接入
67
+ `package.json` `scripts`:
68
+ ```json
69
+ {
70
+ "ui:check": "wk-ui check --project .",
71
+ "ui:fix": "wk-ui fix --target src --dry-run"
72
+ }
73
+ ```
74
+
75
+ ## 完成后
76
+
77
+ 新项目应做到:
78
+ - 业务代码不写颜色硬编码(用 CSS 变量)
79
+ - 列表页用 `defineColumns()` + `renderOps()` 风格
80
+ - 控件全部用 `size="small"`、日期 `width:100%`、表单 `label-width="150px"`
@@ -0,0 +1,49 @@
1
+ ---
2
+ description: |
3
+ 渐进式迁移流程 — 把 vendor 封装组件逐步替换为 runtime API(拿到源码后的演进路径)。
4
+ applyTo: "**/*.{vue,ts}"
5
+ ---
6
+
7
+ # Flow: progressive-migrate
8
+
9
+ > 从 L2 vendors 升级到 L4 runtime(业务代码大幅精简)
10
+
11
+ ## 触发短语
12
+
13
+ - "用 wk-ui 把这个文件迁移到 runtime"
14
+ - "progressive-migrate 流程跑一下"
15
+
16
+ ## 前置条件
17
+
18
+ - 已经接入 wk-skills-ui
19
+ - 已经拿到目标封装组件的源码控制权(或确认可改造)
20
+
21
+ ## 执行步骤
22
+
23
+ ### Phase 1 — 选定一个文件 / 一个组件
24
+ - 优先选页面文件(小范围)
25
+ - 列表页 / 表单 / 弹窗皆可
26
+
27
+ ### Phase 2 — 列定义改造
28
+ - `<el-table-column prop="status" />` + 自定义 slot
29
+ → `defineColumns([{ name: 'status', ... }])` + 自动 COLUMN_AUTO_MAP
30
+
31
+ ### Phase 3 — 操作列改造
32
+ - `<el-button @click="...">查看</el-button>` 串
33
+ → `renderOps([{ type: 'view', onClick: ... }, ...])`
34
+
35
+ ### Phase 4 — 字段映射改造
36
+ - 业务自定义状态字段 → 注册到 `installCommonPreset` 之外的 `add-preset`
37
+ ```bash
38
+ npx wk-ui add-preset my-biz
39
+ ```
40
+
41
+ ### Phase 5 — 验证
42
+ - 业务功能不变
43
+ - DOM 类名继续匹配 vendors/* 全局样式
44
+ - scanner 报告无 L1/L2 违规
45
+
46
+ ## 注意
47
+
48
+ - 一次只迁一个文件,提交一次,方便回退
49
+ - vendors/ 全局样式保留,确保未迁移的页面继续生效
@@ -0,0 +1,47 @@
1
+ # 多编辑器兼容指南
2
+
3
+ wk-skills-ui 的 Skills 可通过 `wk-ui init/update` 安装到不同 AI 编辑器。兼容层只负责“把同一套 Skill 知识转换成编辑器可识别的规则文件”,不绑定任何具体业务项目。
4
+
5
+ ## 支持的编辑器
6
+
7
+ | 编辑器 | 安装路径 | 形式 | 说明 |
8
+ |---|---|---|---|
9
+ | GitHub Copilot | `.github/instructions/wk-skills/*.instructions.md` | 多文件 | 使用 `applyTo` frontmatter |
10
+ | Cursor | `.cursor/rules/*.mdc` | 多文件 | 使用 mdc frontmatter |
11
+ | Windsurf | `.windsurf/rules/*.md` | 多文件 | 纯 Markdown 规则 |
12
+ | Kiro | `.kiro/steering/*.md` | 多文件 | steering 文档 |
13
+ | Trae | `.trae/rules/*.md` | 多文件 | description frontmatter |
14
+ | Claude Code | `CLAUDE.md` | 单文件 | 合并全部 Skill,适合 Claude Code 自动加载 |
15
+ | Cline | `.clinerules` | 单文件 | 合并全部 Skill |
16
+ | Generic Agents | `AGENTS.md` | 单文件 | 通用 Agent 协议 |
17
+ | Qoder | `.qoder/rules/*.md` | 多文件 | Qoder 项目规则 |
18
+
19
+ ## 常用命令
20
+
21
+ ```bash
22
+ # 自动检测编辑器并安装
23
+ npx wk-ui init --project .
24
+
25
+ # 指定编辑器
26
+ npx wk-ui init --project . --editor github-copilot
27
+ npx wk-ui init --project . --editor claude-code
28
+ npx wk-ui init --project . --editor cline
29
+ npx wk-ui init --project . --editor agents-generic
30
+ npx wk-ui init --project . --editor qoder
31
+
32
+ # 增量更新 / 对比 / 清理
33
+ npx wk-ui update --project .
34
+ npx wk-ui diff --project .
35
+ npx wk-ui clean --project . --dry-run
36
+ ```
37
+
38
+ ## 安装时还会写入
39
+
40
+ - `.github/wk-skills-ui/TRIGGER_PROMPTS.md`:AI 触发提示
41
+ - `.github/wk-skills-ui/README.md`:业务项目内说明
42
+ - `.mcp.json`:`wk-skills-ui` MCP Server 配置
43
+ - `.wk-skills-ui-manifest.json`:安装清单,供 `update/diff/clean/doctor` 使用
44
+
45
+ ## 格式模板
46
+
47
+ 各编辑器的头模板位于 `headers/`。`wk-ui init/update` 会读取对应 `headers/*.txt`,再拼接 Skill 主体内容生成目标文件。新增编辑器时只需增加 header 并在 CLI/注册表中声明安装路径。
@@ -0,0 +1,76 @@
1
+ {
2
+ "editors": [
3
+ {
4
+ "id": "github-copilot",
5
+ "name": "GitHub Copilot",
6
+ "description": "VS Code GitHub Copilot Chat Agent 模式",
7
+ "skillFormat": "SKILL.md with YAML frontmatter (applyTo: glob)",
8
+ "installPath": ".github/instructions/wk-skills/",
9
+ "headerFile": "headers/github-copilot.txt"
10
+ },
11
+ {
12
+ "id": "cursor",
13
+ "name": "Cursor",
14
+ "description": "Cursor AI 编辑器 .mdc 规则文件",
15
+ "skillFormat": ".mdc files with YAML frontmatter (globs:)",
16
+ "installPath": ".cursor/rules/",
17
+ "headerFile": "headers/cursor-mdc.txt"
18
+ },
19
+ {
20
+ "id": "windsurf",
21
+ "name": "Windsurf",
22
+ "description": "Windsurf AI 编辑器规则文件",
23
+ "skillFormat": "Plain markdown, no frontmatter",
24
+ "installPath": ".windsurf/rules/",
25
+ "headerFile": "headers/windsurf.txt"
26
+ },
27
+ {
28
+ "id": "kiro",
29
+ "name": "Kiro",
30
+ "description": "Kiro AI 编辑器 steering 文档",
31
+ "skillFormat": "Markdown with YAML frontmatter (inclusion: manual)",
32
+ "installPath": ".kiro/steering/",
33
+ "headerFile": "headers/kiro.txt"
34
+ },
35
+ {
36
+ "id": "trae",
37
+ "name": "Trae",
38
+ "description": "Trae AI 编辑器规则文件",
39
+ "skillFormat": "Markdown with description frontmatter",
40
+ "installPath": ".trae/rules/",
41
+ "headerFile": "headers/trae.txt"
42
+ },
43
+ {
44
+ "id": "claude-code",
45
+ "name": "Claude Code",
46
+ "description": "Claude Code 项目规则文件",
47
+ "skillFormat": "Plain markdown",
48
+ "installPath": "./",
49
+ "headerFile": "headers/claude-code.txt"
50
+ },
51
+ {
52
+ "id": "cline",
53
+ "name": "Cline",
54
+ "description": "Cline 规则文件",
55
+ "skillFormat": "Plain markdown",
56
+ "installPath": "./",
57
+ "headerFile": "headers/cline.txt"
58
+ },
59
+ {
60
+ "id": "agents-generic",
61
+ "name": "Generic Agents",
62
+ "description": "AGENTS.md 通用代理协议",
63
+ "skillFormat": "Plain markdown",
64
+ "installPath": "./",
65
+ "headerFile": "headers/agents.txt"
66
+ },
67
+ {
68
+ "id": "qoder",
69
+ "name": "Qoder",
70
+ "description": "Qoder IDE 规则文件",
71
+ "skillFormat": "Markdown with description frontmatter",
72
+ "installPath": ".qoder/rules/",
73
+ "headerFile": "headers/qoder.txt"
74
+ }
75
+ ]
76
+ }
@@ -0,0 +1,7 @@
1
+ # AGENTS.md — UI 风格对齐代理协议
2
+
3
+ > 此文件遵循 agents.md 跨编辑器协议,可被任意支持该协议的 AI 代理读取。
4
+ > 由 @agile-team/wk-skills-ui 自动生成。更新方式:npx wk-ui update
5
+
6
+ ---
7
+
@@ -0,0 +1,7 @@
1
+ # Claude Code UI 风格对齐规则
2
+
3
+ > 由 @agile-team/wk-skills-ui 自动生成。请勿手动编辑。
4
+ > 更新方式:npx wk-ui update
5
+
6
+ ---
7
+
@@ -0,0 +1,7 @@
1
+ # Cline UI 风格对齐规则
2
+
3
+ > 由 @agile-team/wk-skills-ui 自动生成。请勿手动编辑。
4
+ > 更新方式:npx wk-ui update
5
+
6
+ ---
7
+
@@ -0,0 +1,5 @@
1
+ ---
2
+ description: {SKILL_DESCRIPTION}
3
+ globs: {APPLY_GLOB}
4
+ alwaysApply: false
5
+ ---
@@ -0,0 +1,5 @@
1
+ ---
2
+ description: |
3
+ {SKILL_DESCRIPTION}
4
+ applyTo: "{APPLY_GLOB}"
5
+ ---
@@ -0,0 +1,4 @@
1
+ ---
2
+ inclusion: manual
3
+ description: {SKILL_DESCRIPTION}
4
+ ---
@@ -0,0 +1,4 @@
1
+ ---
2
+ description: {SKILL_DESCRIPTION}
3
+ ---
4
+
@@ -0,0 +1,3 @@
1
+ ---
2
+ description: {SKILL_DESCRIPTION}
3
+ ---
@@ -0,0 +1,5 @@
1
+ # {SKILL_NAME}
2
+
3
+ <!-- Windsurf 规则文件:直接放入 .windsurf/rules/ 目录,无需 frontmatter -->
4
+ <!-- 文件名建议:wk-skills-{skill-id}.md -->
5
+
@@ -0,0 +1,81 @@
1
+ # Detection Cheatsheet — 全 vendor 识别特征速查表
2
+
3
+ > 供 AI 快速判定一个组件标签属于哪个 layer / vendor
4
+
5
+ ## L1 — Element Plus 原生
6
+
7
+ | 标签 | Skill |
8
+ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
9
+ | `<el-table>` `<el-table-column>` | element/el-table |
10
+ | `<el-form>` `<el-form-item>` | element/el-form |
11
+ | `<el-dialog>` | element/el-dialog |
12
+ | `<el-tag>` | element/el-tag |
13
+ | `<el-button>` | element/el-table(操作列) / element/el-button(独立) |
14
+ | `<el-input>` `<el-select>` `<el-date-picker>` | element/el-form |
15
+ | `<el-pagination>` | element/el-dialog(位置约束) |
16
+ | `<el-tree>` | element/el-tree |
17
+ | `<el-message-box>` `ElMessageBox.*` | element/el-dialog |
18
+ | `<el-card>` | element/el-card |
19
+ | `<el-tabs>` `<el-tab-pane>` | element/el-tabs |
20
+ | `<el-descriptions>` `<el-descriptions-item>` | element/el-descriptions |
21
+ | `<el-drawer>` | element/el-drawer |
22
+ | `<el-upload>` | element/el-upload |
23
+ | `<el-steps>` `<el-step>` | element/el-steps |
24
+ | `<el-popover>` `<el-tooltip>` `<el-dropdown>` | element/el-overlay |
25
+ | `<el-menu>` `<el-menu-item>` `<el-sub-menu>` `<el-breadcrumb>` | element/el-navigation |
26
+ | `<el-empty>` `<el-result>` `<el-alert>` `<el-badge>` `<el-avatar>` `<el-timeline>` `<el-collapse>` | element/el-feedback |
27
+
28
+ ## L2 — Vendor 封装
29
+
30
+ | 前缀 / 标签 | 优先级 | Skill |
31
+ | ---------------------------------------------------------------------- | ------ | ------------------------------------------ |
32
+ | `<BaseTable>` `<base-table>` `<BaseDataTable>` | #1 | vendors/base-table |
33
+ | `<BaseQuery>` `<BaseToolbar>` `<base-*>` 其它 | #1 | vendors/base-components(暂随 base-table) |
34
+ | `<jh-table>` `<jh-form>` `<jh-tree>` `<jh-pagination>` `<jh-drag-col>` | #2 | vendors/jh-components |
35
+ | `<C_*>` `<c-*>` | #3 | vendors/c-components |
36
+ | `src/components/PascalCase.vue` 无前缀 | #4 | vendors/custom-wrappers |
37
+ | `.ag-root-wrapper` / AG Grid API | — | vendors/ag-grid |
38
+ | Portal/Popper 弹层(teleport) | — | 使用 styles/vendors/\_portal.scss |
39
+ | 不匹配以上任何一种 | — | vendors/unknown-wrapper(兜底) |
40
+
41
+ ## L3 — Layout 骨架
42
+
43
+ | 类名 / 容器 | Skill |
44
+ | -------------------------------------- | --------------------------------- |
45
+ | `.list-page` 或 搜索+表格+分页结构 | layouts/list-page |
46
+ | `.tree-list` 或 `.drag-col-container` | layouts/tree-list |
47
+ | `.form-dialog` 或 el-dialog 内 el-form | layouts/form-dialog |
48
+ | `.detail-page` 或 描述列表 + 卡片 | layouts/detail-page |
49
+ | 未匹配 | 输出"建议在 styles/layouts/ 新增" |
50
+
51
+ ## B 端业务场景
52
+
53
+ | 结构特征 | 场景 | 推荐 Skill |
54
+ | ------------------------------- | ----------------- | ------------------------ |
55
+ | 查询表单 + 表格 | query-table | layouts/list-page |
56
+ | 工具栏 / 批量操作栏 | toolbar-actions | layouts/list-page |
57
+ | 树 + 表格 / BaseTable | tree-table | layouts/tree-list |
58
+ | el-dialog + el-form | dialog-form | layouts/form-dialog |
59
+ | el-drawer + 表单/详情 | drawer-detail | layouts/detail-page |
60
+ | el-card + el-descriptions | detail-card | layouts/detail-page |
61
+ | el-tabs + 表格/详情/表单 | tab-workbench | element/component-family |
62
+ | el-upload | attachment-upload | element/component-family |
63
+ | el-steps / el-timeline | process-flow | element/component-family |
64
+ | el-empty / el-result / el-alert | feedback-state | element/component-family |
65
+
66
+ ## L0 — Tokens
67
+
68
+ | 模式 | Rule |
69
+ | ------------------------ | ---- |
70
+ | `<style>` 块内 hex 颜色 | R016 |
71
+ | `<template>` 内 hex 颜色 | R017 |
72
+ | `<script>` 内 hex 颜色 | R018 |
73
+
74
+ ## 扩展机制
75
+
76
+ 发现新模式时:
77
+
78
+ 1. 在本表追加一行
79
+ 2. 在 `styles/vendors/` 或 `styles/layouts/` 追加对应 SCSS
80
+ 3. 在 `skills/vendors/` 或 `skills/layouts/` 追加 SKILL.md
81
+ 4. 在 `scanner/rules/` 追加规则(带 layer + vendor 元数据)
@@ -0,0 +1,96 @@
1
+ # Skills Registry — wk-skills-ui v1.3
2
+
3
+ > 全部可被 AI 编辑器加载的 skill 索引,按 5 层架构组织。
4
+
5
+ ## 五层架构总览
6
+
7
+ ```
8
+ L0 tokens → 设计令牌(颜色/间距/圆角/字号)
9
+ L1 element → Element Plus 控件对齐
10
+ L2 vendors → 封装组件化妆(Base / jh / C_/c_ / custom + AG Grid)
11
+ L3 layouts → 团队约定页面骨架
12
+ L4 runtime → 业务渲染 API(defineColumns / renderOps / preset)
13
+ ```
14
+
15
+ ## 入口(Flows · 组合流程)
16
+
17
+ | Flow | 适用 |
18
+ | --------------------------------------------------------------- | -------------------- |
19
+ | [\_flows/new-project-init](../_flows/new-project-init.md) | 新项目从零接入 |
20
+ | [\_flows/legacy-skin-align](../_flows/legacy-skin-align.md) | 老项目化妆模式 |
21
+ | [\_flows/full-audit](../_flows/full-audit.md) | 全量审计(不修) |
22
+ | [\_flows/progressive-migrate](../_flows/progressive-migrate.md) | 渐进式迁移到 runtime |
23
+
24
+ ## 单点 Skills(按层)
25
+
26
+ ### L1 element/
27
+
28
+ | Skill | 处理规则 |
29
+ | ------------------------ | -------------------------------------------------------- |
30
+ | element/el-table | R001 R002 R003 R014 |
31
+ | element/el-form | R006 R007 R008 |
32
+ | element/el-dialog | R011 R015 |
33
+ | element/el-tag | R009 R010 |
34
+ | element/component-family | R031-R037,首批 B 端高频 Element Plus 组件族聚合治理入口 |
35
+ | element/el-card | 卡片容器、详情卡片、统计卡片样式管控 |
36
+ | element/el-tabs | Tab 详情页、配置页、主从切换样式管控 |
37
+ | element/el-descriptions | 详情页、只读展示区样式管控 |
38
+ | element/el-tree | 左树右表、组织树、区域树样式管控 |
39
+ | element/el-drawer | 抽屉详情、抽屉编辑样式管控 |
40
+ | element/el-upload | 附件上传、图片上传、文件列表样式管控 |
41
+ | element/el-steps | 审批流、流程状态样式管控 |
42
+ | element/el-overlay | popover/tooltip/dropdown 弹层样式管控 |
43
+ | element/el-navigation | menu/breadcrumb 导航样式管控 |
44
+ | element/el-feedback | empty/result/alert/badge/timeline 反馈样式管控 |
45
+
46
+ ### L2 vendors/
47
+
48
+ | Skill | 优先级 | 说明 |
49
+ | ----------------------- | ------ | -------------- |
50
+ | vendors/base-table | #1 | Base\* 系列 |
51
+ | vendors/jh-components | #2 | jh-\* 系列 |
52
+ | vendors/c-components | #3 | C*/c* 前缀 |
53
+ | vendors/custom-wrappers | #4 | 兜底(无前缀) |
54
+ | vendors/unknown-wrapper | — | 兜底探测 |
55
+ | vendors/ag-grid | — | AG Grid |
56
+
57
+ ### L3 layouts/
58
+
59
+ | Skill | 说明 |
60
+ | ------------------- | ----------------------------------------- |
61
+ | layouts/list-page | 列表页骨架(搜索 + 工具栏 + 表格 + 分页) |
62
+ | layouts/tree-list | 左树右表双栏骨架(含 jh-drag-col) |
63
+ | layouts/form-dialog | 新增/编辑/详情三态表单弹窗 |
64
+ | layouts/detail-page | 只读展示页(el-descriptions 为主) |
65
+
66
+ ### L4 runtime/
67
+
68
+ | Skill | 说明 |
69
+ | --------------------- | ---------------------------- |
70
+ | runtime/style-align | 主样式对齐 skill(聚合入口) |
71
+ | runtime/design-tokens | R016 R017 R018 颜色 token |
72
+ | runtime/migration | 从零迁入 / 渐进迁移指南 |
73
+
74
+ ### Ops/
75
+
76
+ | Skill | 用途 |
77
+ | ------------------ | ---------------------------------------------------- |
78
+ | ops/scan | 扫描诊断 |
79
+ | ops/fix | 自动修复 |
80
+ | ops/audit | 只读全量审计 + 报告 |
81
+ | ops/migrate | 渐进迁移(skin → native) |
82
+ | ops/route-intent | 自然语言意图识别,推荐 flow/tool/skill |
83
+ | ops/recommend-flow | 根据扫描 JSON 推荐 nextActions 与 wl-skills-kit 桥接 |
84
+
85
+ ## 多编辑器适配
86
+
87
+ 详见 [`_compat/README`](../_compat/README.md):支持 GitHub Copilot / Cursor / Windsurf / Kiro / Trae。
88
+
89
+ ## 扩展机制
90
+
91
+ 新增 skill 步骤:
92
+
93
+ 1. 在对应 layer 目录建子目录 + `SKILL.md`
94
+ 2. 更新本文件索引
95
+ 3. 必要时更新 `_detection.md` 识别表
96
+ 4. 必要时更新 `scanner/rules/` 规则(带 layer + vendor 元数据)