@gong-ym/ai-spec-auto 0.2.3

package/.agents/skills/domains/web/design-analysis/rules/workflow-output-checklist.md

@@ -0,0 +1,70 @@
+---
+title: 第四步：输出文档要求
+impact: HIGH
+impactDescription: 文档路径、结构和质量要求，输出前需过质量检查清单
+tags: workflow, output, checklist
+---
+
+# 第四步：输出文档要求
+
+## 概述
+
+第四步是将分析结果输出为「UI 分析清单」文档，供开发与验收参照。本文档说明文档路径、结构和质量要求。
+
+## 4.1 文档路径
+
+```
+docs/样式还原/<页面或模块名称>-UI分析清单.md
+```
+
+**示例**：
+- `docs/样式还原/用户中心-UI分析清单.md`
+- `docs/样式还原/商品列表页-UI分析清单.md`
+
+## 4.2 文档结构（必须包含）
+
+文档必须包含以下章节，详见 `output-analysis-checklist.md` 获取完整模板：
+
+1. **文档说明**：设计稿路径/链接、分析日期
+2. **一、设计稿整体分析**：页面状态、整体尺寸、区域划分、区域间间距
+3. **二、区域详细分析**：按从上到下、从左到右、从外到里顺序，每个区域包含所有文字、图片、布局、层级
+4. **三、样式规范汇总**：颜色、字体、圆角、间距、阴影、效果
+5. **四、交互状态分析**：默认 / hover / active / 禁用等（如有）
+6. **五、占位元素说明**：图标占位尺寸与位置、图片占位尺寸与比例
+7. **六、常见遗漏检查点**：本次分析已核对项，可列 checklist
+8. **七、实现建议**：组件划分、主流网页设计常识、常见错误模式
+9. **八、验证检查清单**：后续验收时用的布局/样式/元素/交互检查项
+10. **九、备注**：坐标系统、响应式、占位策略等
+
+## 4.3 文档质量要求
+
+| 要求 | 说明 |
+|------|------|
+| **分析顺序** | 区域与章节按「从上到下、从左到右、从外到里」书写，与前端布局一致，避免漏掉顶部或某一侧 |
+| **文字、图片、布局、层级** | 四者为页面元素重中之重，均不允许出错：所有文字与图片无遗漏；布局（位置/尺寸/间距/对齐）与设计稿一致；层级（嵌套与先后）正确无丢层或颠倒 |
+| 完整性 | 覆盖设计稿中所有关键区域与关键元素，无「略」式省略 |
+| 准确性 | 尺寸、颜色、字号等从设计稿中读取并写明，不猜测 |
+| 可执行 | 开发仅凭此文档即可实现布局与样式，无需反复看图 |
+| 可维护 | 设计稿变更时，同步更新本文档并标注更新日期 |
+
+## 质量检查清单
+
+输出文档前，检查以下项：
+
+- [ ] 文档路径正确，符合命名规范
+- [ ] 文档结构完整，包含所有必需章节
+- [ ] 分析顺序正确（从上到下、从左到右、从外到里）
+- [ ] 所有文字、图片、布局、层级都已记录，无遗漏
+- [ ] 样式规范汇总完整，包含颜色、字体、圆角、间距、阴影
+- [ ] 实现建议包含组件划分、设计常识、常见错误模式
+- [ ] 文档可执行，开发人员无需反复看图即可实现
+- [ ] 文档可维护，设计稿变更时可同步更新
+
+## 相关规则
+
+- `output-analysis-checklist.md` - UI 分析清单文档完整模板
+- `analysis-order.md` - 分析顺序（必守）
+- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
+- `workflow-layout-map.md` - 第一步：建立布局 Map
+- `workflow-element-extraction.md` - 第二步：区域与元素提取
+- `workflow-style-summary.md` - 第三步：样式规范汇总

package/.agents/skills/domains/web/design-analysis/rules/workflow-style-summary.md

@@ -0,0 +1,91 @@
+---
+title: 第三步：样式规范汇总
+impact: HIGH
+impactDescription: 颜色、字体、圆角、间距、阴影等样式规范汇总，便于开发与验收统一使用
+tags: workflow, style, summary
+---
+
+# 第三步：样式规范汇总
+
+## 概述
+
+在分析清单中单独成章，便于开发与验收统一使用。汇总设计稿中的颜色、字体、圆角、间距、阴影等样式规范，形成可复用的样式指南。
+
+## 汇总内容
+
+### 颜色规范
+
+提取设计稿中的主要颜色，按用途分类：
+
+| 用途 | 颜色值 | 说明 |
+|------|--------|------|
+| 主文本 | `#13131c` | 主要文字颜色 |
+| 次要文本 | `#13131c73` | 次要文字颜色（含透明度） |
+| 边框 | `#13131c40` | 边框颜色 |
+| 背景 | `#ffffff` | 页面背景色 |
+| 按钮主色 | `#1890ff` | 主要按钮颜色 |
+| 按钮禁用 | `#d9d9d9` | 禁用状态颜色 |
+
+### 字体规范
+
+按用途汇总字体族、字号、字重、行高：
+
+| 用途 | 字体族 | 字号 | 字重 | 行高 | 示例 |
+|------|--------|------|------|------|------|
+| 大标题 | PingFang SC | 24px | 600 | 32px | 页面主标题 |
+| 副标题 | PingFang SC | 18px | 500 | 26px | 区块标题 |
+| 正文 | PingFang SC | 14px | 400 | 20px | 普通文本 |
+| 说明文字 | PingFang SC | 12px | 400 | 18px | 辅助说明 |
+| 按钮文字 | PingFang SC | 14px | 500 | 20px | 按钮内文字 |
+
+### 圆角规范
+
+按元素类型汇总圆角值：
+
+| 元素类型 | 圆角值 | 说明 |
+|----------|--------|------|
+| 卡片 | 12px | 卡片容器 |
+| 按钮 | 8px | 按钮圆角 |
+| 输入框 | 8px | 输入框圆角 |
+| 图片 | 8px | 图片圆角 |
+| 标签 | 4px | 标签圆角 |
+
+### 间距规范
+
+按层级汇总间距值：
+
+| 层级 | 间距值 | 说明 |
+|------|--------|------|
+| 页面边距 | 132px | 页面左右边距 |
+| 区块间距 | 24px | 区块之间的垂直间距 |
+| 组件内 gap | 12px | 组件内部元素间距 |
+| 组件内 padding | 16px | 组件内边距 |
+
+### 阴影与效果
+
+汇总阴影和特殊效果：
+
+| 效果类型 | 参数 | 说明 |
+|----------|------|------|
+| 卡片阴影 | `0 2px 8px rgba(0,0,0,0.1)` | 卡片阴影 |
+| 按钮阴影 | `0 1px 4px rgba(0,0,0,0.1)` | 按钮阴影 |
+| 背景模糊 | `backdrop-filter: blur(17.5px)` | 背景模糊效果 |
+
+## 汇总方法
+
+1. **从区域分析中提取**：在第二步「区域与元素提取」时，记录每个区域的样式信息
+2. **按类型分类**：将相同类型的样式值归类汇总
+3. **去重合并**：相同的样式值只记录一次，避免重复
+4. **标注用途**：明确每个样式值的用途和使用场景
+
+## 使用建议
+
+- **开发时**：参考样式规范汇总，确保实现时使用统一的样式值
+- **验收时**：对照样式规范汇总，检查实现是否符合设计稿规范
+- **维护时**：设计稿变更时，同步更新样式规范汇总
+
+## 相关规则
+
+- `workflow-element-extraction.md` - 第二步：区域与元素提取（提取样式信息）
+- `output-analysis-checklist.md` - UI 分析清单文档模板（包含样式规范汇总章节）
+- `workflow-output-checklist.md` - 第四步：输出文档要求

package/.agents/skills/domains/web/route-permission-map/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: route-permission-map
+description: 从路由配置、权限守卫和菜单/侧栏配置中整理“路由 ↔ 权限 ↔ 菜单”映射，并检查未保护路由、死链、权限不一致和懒加载问题。当用户说“路由和菜单对一下”“未保护路由”“路由权限映射”“菜单权限不一致”时使用。
+compatibility: Requires a local repository workspace with route definitions, menu/sidebar config, and permission guard code available for inspection.
+---
+
+# 路由权限映射与审计
+
+## 使用时机
+
+当你需要：
+
+- 核对路由、菜单和权限是否一致
+- 审查未保护路由、死链或错误的菜单显隐
+- 梳理某个前端应用的权限边界
+
+## 核心原则
+
+- 先识别框架，再按对应分支扫描
+- 只根据仓库实际代码与配置建立映射，不臆测隐藏规则
+- 输出以映射表、问题项和修复建议为主
+- 若在当前协议流程中，优先把结论沉淀到 `checklist.md`、`verification-review-notes` 或用户指定文档
+
+## 步骤 1：识别前端框架
+
+先看 `package.json`：
+
+- `next` → Next.js
+- `vue` / `vue-router` → Vue
+- `react` + `react-router` / `react-router-dom` → React
+- 多应用仓库时，按当前目标应用所在子包判断
+
+## 步骤 2：定位三类来源
+
+必须同时找出：
+
+1. 路由定义
+2. 权限守卫或路由级权限元数据
+3. 菜单 / 侧栏配置
+
+优先提取这些字段：
+
+- `path`
+- `component / element / page`
+- `meta.roles / meta.permission / requiresAuth`
+- 菜单 `title / icon / hidden / children`
+- 是否懒加载
+
+## 步骤 3：建立映射表
+
+至少输出：
+
+| path | 路由来源 | 权限/角色 | 菜单标题 | 是否隐藏 | 是否懒加载 |
+|------|----------|-----------|----------|----------|------------|
+
+如果菜单来自接口，明确写出“菜单数据来自接口，需和前后端约定对齐”。
+
+## 步骤 4：执行四类检查
+
+### 1. 未保护路由
+
+- 除登录页、404、公开页外，未被任何 guard 或权限元数据覆盖的路由
+
+### 2. 死链
+
+- 菜单 path 在路由清单中不存在
+- redirect 目标不存在
+
+### 3. 菜单与权限不一致
+
+- 菜单做了权限控制但路由无守卫
+- 路由有权限要求但菜单无显隐控制
+
+### 4. 懒加载合理性
+
+- 首屏关键路由被过度懒加载
+- 子页面拆包过细，导致请求过多
+
+## 输出模板
+
+```md
+## 路由权限映射报告
+
+### 路由清单
+| path | 权限/角色 | 是否懒加载 | 来源 |
+|------|-----------|------------|------|
+
+### 菜单映射
+| 菜单 path | 菜单标题 | 路由存在 | 权限是否一致 |
+|-----------|----------|----------|--------------|
+
+### 发现的问题
+- 未保护路由：
+- 死链：
+- 菜单与权限不一致：
+- 懒加载建议：
+```
+
+## 注意事项
+
+- 路径统一按正斜杠比较
+- 区分公开页与“漏加守卫”的业务页
+- 只给出审计与修复建议，不自动改代码

package/.agents/skills/domains/web/ui-verification/SKILL.md

@@ -0,0 +1,114 @@
+---
+name: ui-verification
+description: 当用户需要按设计稿验收页面、复核 UI 还原质量或输出 UI 问题清单时，使用浏览器工具对实际页面与设计稿做可追踪比对并沉淀验收结论。
+compatibility: Requires browser tooling plus access to the target page, design source (.pen/Figma), and local docs/样式还原/ output paths.
+---
+
+# UI 验收
+
+## 核心原则
+
+**最终验收标准**：以**实际运行页面的效果**与 **UI 稿（.pen 或 Figma）** 进行比对得出结论，而不是仅凭代码或分析清单推断。
+
+**工具选择**：优先使用 Cursor 的 Browser（`@Browser`），仅当不在 Cursor 或 Browser 不可用时使用 Playwright MCP。详见 `rules/tools-browser-navigation.md`。
+
+**比对方式**：必须进行可落地的比对之一或组合：页面截图 vs 设计稿截图，或页面元素 vs 设计稿元素。详见 `rules/tools-design-guidelines.md`。
+
+**验收顺序**：从上到下 → 从左到右 → 从外到里。先按顺序过一遍 P0（布局、层级、内容-文字与图片），再逐项比对 P1/P2 维度。详见 `rules/comparison-*.md`。
+
+---
+
+## 使用时机
+
+当需要做「UI 还原验收」时使用本技能：
+- 实现完成后，需要对照设计稿检查还原度
+- 需要产出一份可追踪的 **UI 问题清单**，并据此修复与再验证
+- 需要做「分析不足反思」，反哺设计稿分析（design-analysis）
+
+## 环境依赖
+
+- 优先依赖 Browser 工具；不可用时再退回 Playwright MCP
+- 默认问题清单与反思文档写入 `docs/样式还原/`
+
+## 注意事项
+
+- 只看代码不看页面，验收结果无效
+- 没有设计稿时，本技能不能替代需求定义
+
+---
+
+## 前置条件
+
+- **有可访问的实现页面**：本地或目标环境已启动；在 Cursor 中优先用 `@Browser` 打开目标 URL
+- **有设计稿可对照**：`.pen`（Pencil 设计稿）或 Figma 链接可访问
+- **有分析清单（推荐）**：`docs/样式还原/<名称>-UI分析清单.md` 可作为比对时的检查项
+
+若尚未有分析清单但已有设计稿，可先使用 `.agents/skills/design-analysis/SKILL.md` 产出分析清单。
+
+---
+
+## 目标产出
+
+- **UI 问题清单**：`docs/样式还原/<名称>-UI问题清单.md`（详见 `rules/workflow-problem-list.md`）
+- **分析不足反思（可选）**：反哺 design-analysis（详见 `rules/workflow-reflection.md`）
+
+---
+
+## 工作流程（5步）
+
+1. **使用浏览器工具查看实际页面**：在 Cursor 中优先使用 `@Browser`，获取实际页面可比对信息。详见 `rules/tools-browser-navigation.md` 和 `rules/tools-design-guidelines.md`
+2. **实际页面与设计稿比对**：截图比对或元素级比对，按 P0/P1/P2 维度逐项比对。详见 `rules/comparison-*.md`
+3. **产出 UI 问题清单**：将差异点记录到问题清单。详见 `rules/workflow-problem-list.md`
+4. **修复与再验证**：先修 P0，再 P1，再 P2；修复后必须再次使用 Browser 工具验证。详见 `rules/tools-browser-navigation.md`
+5. **反思分析不足（可选）**：将「哪些问题是因为分析没做到位」总结下来，反哺 design-analysis。详见 `rules/workflow-reflection.md`
+
+---
+
+## 快速参考
+
+### 编写时的设计常识（应在实现阶段遵循）
+- `rules/writing-page-container-width.md` - 页面容器宽度规则
+- `rules/writing-list-layout.md` - 横向列表布局规则
+- `rules/writing-element-completeness.md` - 元素展示完整性规则
+- `rules/writing-alignment.md` - 对齐方式规则
+
+### 常见错误模式（验收时特别关注）
+- `rules/errors-page-container-width.md` - 页面容器宽度限制
+- `rules/errors-grid-container-width.md` - Grid 容器宽度问题
+- `rules/errors-css-priority.md` - CSS 优先级覆盖
+- `rules/errors-flex-layout.md` - Flex 布局问题
+- `rules/errors-flex-column-width.md` - 换行后列宽不一致
+- `rules/errors-alignment.md` - 对齐方式错误
+- `rules/errors-button-dimensions.md` - 按钮尺寸问题
+- `rules/errors-button-position.md` - 按钮定位问题
+
+### 比对维度（P0 级，验收时不得遗漏）
+- `rules/comparison-layout.md` - 布局比对
+- `rules/comparison-hierarchy.md` - 层级比对
+- `rules/comparison-content-text.md` - 文字内容比对
+- `rules/comparison-content-image.md` - 图片内容比对
+
+### 工具使用指南
+- `rules/tools-browser-navigation.md` - 浏览器工具打开页面
+- `rules/tools-design-guidelines.md` - 设计稿工具使用（Pencil/Figma）
+
+### 工作流程模板
+- `rules/workflow-problem-list.md` - UI 问题清单文档结构
+- `rules/workflow-reflection.md` - 反思分析不足模板
+- `rules/workflow-checklist.md` - 快速检查清单
+
+---
+
+## 与其它技能的关系
+
+- **design-analysis**：依赖其产出的「UI 分析清单」；验收后的反思用于完善该技能
+- **create-proposal**：提案前置分析时若涉及设计稿，会在后置检查中确认 tasks.md 包含 UI 验收任务，引用本技能执行验收
+- **create-route / create-component**：修复问题时可能涉及路由或组件的样式与结构修改
+
+---
+
+## 相关规范
+
+- `.agents/skills/design-analysis/SKILL.md` - 设计稿分析（产出分析清单）
+- `.agents/skills/create-proposal/SKILL.md` - 提案前置分析与 OpenSpec 增强层（后置检查中确认包含验收任务）
+- `.agents/rules/09-样式规范.md` - 设计稿颜色提取

package/.agents/skills/domains/web/ui-verification/evals/evals.json

@@ -0,0 +1,16 @@
+{
+  "skill_name": "ui-verification",
+  "evals": [
+    {
+      "id": "ui-verification-output-1",
+      "prompt": "用户要求对照设计稿验收页面并输出问题清单和反思。",
+      "files": [],
+      "expected_output": "输出应明确使用浏览器工具、说明对比方式，并沉淀 UI 问题清单与再验证要求。",
+      "assertions": [
+        "强调以实际页面对比设计稿而不是只看代码",
+        "包含问题清单产物",
+        "包含修复后重新验证要求"
+      ]
+    }
+  ]
+}

package/.agents/skills/domains/web/ui-verification/evals/train_queries.json

@@ -0,0 +1,18 @@
+[
+  {
+    "query": "按设计稿验收这个页面并产出 UI 问题清单",
+    "should_trigger": true
+  },
+  {
+    "query": "帮我检查页面和 figma 是否一致",
+    "should_trigger": true
+  },
+  {
+    "query": "根据设计稿先梳理开发任务",
+    "should_trigger": false
+  },
+  {
+    "query": "帮我新建页面路由",
+    "should_trigger": false
+  }
+]

package/.agents/skills/domains/web/ui-verification/evals/validation_queries.json

@@ -0,0 +1,18 @@
+[
+  {
+    "query": "做一次 UI 还原验收，输出问题清单",
+    "should_trigger": true
+  },
+  {
+    "query": "用浏览器对照设计稿检查当前页面",
+    "should_trigger": true
+  },
+  {
+    "query": "我只有需求文字，没有设计稿",
+    "should_trigger": false
+  },
+  {
+    "query": "帮我写提案里的 design.md",
+    "should_trigger": false
+  }
+]

package/.agents/skills/domains/web/ui-verification/rules/comparison-content-image.md

@@ -0,0 +1,34 @@
+---
+title: 图片内容比对规则（P0）
+impact: CRITICAL
+impactDescription: 图片缺失/布局错均为 P0，验收时不得遗漏
+tags: comparison, content, image, p0, critical
+---
+
+## 图片内容比对规则（P0）
+
+**P0 级要求**：图片缺失、布局错为 P0，验收时不得遗漏。
+
+**比对内容**：
+- **内容 - 图片**：所有图片/占位图区域是否存在、尺寸与布局（含多图拼接）是否正确。
+
+**验收顺序**（必须按以下顺序进行，避免漏检）：
+1. **从上到下**：从页面最上方区域逐块检查到最下方，顺序与布局一致。
+2. **从左到右**：同一行或同一层级内，按从左到右依次检查，不跳过。
+3. **从外到里**：每个区块内按「外层容器 → 内层容器 → 叶子元素」逐层检查。
+
+**图片检查要点**：
+- 检查所有图片/占位图区域是否存在
+- 检查图片尺寸是否正确
+- 检查图片位置是否正确
+- 检查多图拼接方式是否正确（1/2/3/4 图拼接）
+- 检查图片比例是否正确
+- 检查占位图尺寸与布局是否正确
+
+**验收时检查**：
+- [ ] 所有图片/占位图区域是否存在？
+- [ ] 图片尺寸是否正确？
+- [ ] 图片位置是否正确？
+- [ ] 多图拼接方式是否正确（1/2/3/4 图拼接）？
+- [ ] 图片比例是否正确？
+- [ ] 占位图尺寸与布局是否正确？

package/.agents/skills/domains/web/ui-verification/rules/comparison-content-text.md

@@ -0,0 +1,30 @@
+---
+title: 文字内容比对规则（P0）
+impact: CRITICAL
+impactDescription: 文字缺失/错字均为 P0，验收时不得遗漏
+tags: comparison, content, text, p0, critical
+---
+
+## 文字内容比对规则（P0）
+
+**P0 级要求**：文字缺失、错字为 P0，验收时不得遗漏。
+
+**比对内容**：
+- **内容 - 文字**：所有可见文案是否存在、内容是否正确（欢迎语、标题、副文案、按钮/占位/Tab 等）。
+
+**验收顺序**（必须按以下顺序进行，避免漏检）：
+1. **从上到下**：从页面最上方区域逐块检查到最下方，顺序与布局一致。
+2. **从左到右**：同一行或同一层级内，按从左到右依次检查，不跳过。
+3. **从外到里**：每个区块内按「外层容器 → 内层容器 → 叶子元素」逐层检查。
+
+**文字检查要点**：
+- 检查所有可见文案是否存在（欢迎语、标题、副标题、说明、按钮/链接文案、占位文案、Tab 文字等）
+- 检查文案内容是否正确（是否有错字、漏字）
+- 检查文案是否完整（是否被截断）
+- **特别注意**：顶部或首屏的大字号文案（如欢迎语）最容易在「只记了下面小字」时被漏掉，必须优先按从上到下扫到并记录
+
+**验收时检查**：
+- [ ] 所有可见文案是否存在？
+- [ ] 文案内容是否正确（是否有错字、漏字）？
+- [ ] 文案是否完整（是否被截断）？
+- [ ] 顶部或首屏的大字号文案是否已检查？

package/.agents/skills/domains/web/ui-verification/rules/comparison-hierarchy.md

@@ -0,0 +1,33 @@
+---
+title: 层级比对规则（P0）
+impact: CRITICAL
+impactDescription: 层级丢层/顺序错均为 P0，验收时不得遗漏
+tags: comparison, hierarchy, p0, critical, nesting
+---
+
+## 层级比对规则（P0）
+
+**P0 级要求**：层级丢层、顺序颠倒为 P0，验收时不得遗漏。
+
+**比对内容**：
+- **层级**：从外到里的嵌套、父子/兄弟、先后与叠放顺序；是否丢层、顺序颠倒。
+
+**验收顺序**（必须按以下顺序进行，避免漏检）：
+1. **从上到下**：从页面最上方区域逐块检查到最下方，顺序与布局一致。
+2. **从左到右**：同一行或同一层级内，按从左到右依次检查，不跳过。
+3. **从外到里**：每个区块内按「外层容器 → 内层容器 → 叶子元素」逐层检查。
+
+**层级检查要点**：
+- 检查嵌套关系是否正确（谁包谁、父子/兄弟关系）
+- 检查区块的先后顺序是否正确
+- 检查叠放顺序（z-index）是否正确
+- 检查是否有丢层（缺少必要的容器）
+- 检查顺序是否颠倒（元素顺序与设计稿不一致）
+
+**验收时检查**：
+- [ ] 从外到里的嵌套关系是否正确？
+- [ ] 父子/兄弟关系是否正确？
+- [ ] 区块的先后顺序是否正确？
+- [ ] 叠放顺序是否正确？
+- [ ] 是否有丢层？
+- [ ] 顺序是否颠倒？

package/.agents/skills/domains/web/ui-verification/rules/comparison-layout.md

@@ -0,0 +1,35 @@
+---
+title: 布局比对规则（P0）
+impact: CRITICAL
+impactDescription: 布局错位/缺失/比例错均为 P0，验收时不得遗漏
+tags: comparison, layout, p0, critical
+---
+
+## 布局比对规则（P0）
+
+**P0 级要求**：布局错位、缺失、比例失调均为 P0，验收时不得遗漏。
+
+**比对内容**：
+- **布局**：区域位置、尺寸、排列方向、间距（gap/padding）、多图拼接方式；是否错位、缺失、比例失调。
+
+**验收顺序**（必须按以下顺序进行，避免漏检）：
+1. **从上到下**：从页面最上方区域逐块检查到最下方，顺序与布局一致。
+2. **从左到右**：同一行或同一层级内，按从左到右依次检查，不跳过。
+3. **从外到里**：每个区块内按「外层容器 → 内层容器 → 叶子元素」逐层检查。
+
+**布局检查特别关注（常见问题）**：
+- **页面容器宽度**：是否有不必要的 `max-width` 导致右侧大片留白？详见 `errors-page-container-width.md`
+- **横向列表**：是否铺满宽度，不会留大片空白？换行后列宽是否一致？详见 `errors-flex-layout.md`、`errors-flex-column-width.md`
+- **Grid 容器宽度**：Grid 容器是否有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列？详见 `errors-grid-container-width.md`
+- **Flex 布局**：需要铺满时是否使用了 `flex-grow: 1`，而非 `flex: 0 1 fixed-width`？详见 `errors-flex-layout.md`
+- **元素完整性**：是否有元素被截断（半截卡片等）？详见 `writing-element-completeness.md`
+- **对齐方式**：图标与文本是否水平居中对齐（`align-items: center`）？详见 `errors-alignment.md`
+- **CSS 优先级**：组件样式是否被页面级样式覆盖（如 `display: block` 覆盖了 `display: flex`）？详见 `errors-css-priority.md`
+- **按钮/交互元素**：高度、宽度、定位是否符合设计稿（**必须用浏览器工具实际查看渲染效果**，不能仅凭代码推测）？详见 `errors-button-dimensions.md`、`errors-button-position.md`
+
+**相关规则**：
+- `writing-page-container-width.md` - 页面容器宽度规则
+- `writing-list-layout.md` - 横向列表布局规则
+- `writing-element-completeness.md` - 元素展示完整性规则
+- `writing-alignment.md` - 对齐方式规则
+- `errors-*.md` - 所有相关错误规则

package/.agents/skills/domains/web/ui-verification/rules/errors-alignment.md

@@ -0,0 +1,42 @@
+---
+title: 对齐方式错误
+impact: MEDIUM
+impactDescription: 图标与文本顶部对齐而非居中
+tags: errors, alignment, flexbox, icon, text
+---
+
+## 对齐方式错误
+
+**错误模式**：对齐方式错误
+
+| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
+|---------|---------|----------|----------|
+| **对齐方式错误** | 图标与文本顶部对齐而非居中 | 默认使用了 `flex-start` 而非 `center` | 明确设置 `align-items: center` |
+
+**Incorrect（顶部对齐）：**
+
+```css
+.icon-text {
+  display: flex;
+  align-items: flex-start; /* 顶部对齐，视觉不协调 */
+}
+```
+
+**Correct（居中对齐）：**
+
+```css
+.icon-text {
+  display: flex;
+  align-items: center; /* 水平居中，视觉协调 */
+}
+```
+
+**验收时检查**：
+- [ ] 图标与文本的对齐方式是否正确（`align-items: center` 而非 `flex-start`）？
+
+**验收时特别关注**：
+- 必须用浏览器工具实际查看渲染效果（特别是按钮、对齐等细节）
+- 检查对齐方式是否正确设置
+
+**相关规则**：
+- `writing-alignment.md` - 对齐方式规则

package/.agents/skills/domains/web/ui-verification/rules/errors-button-dimensions.md

@@ -0,0 +1,28 @@
+---
+title: 按钮尺寸问题
+impact: MEDIUM
+impactDescription: 按钮高度/宽度与设计稿不符
+tags: errors, button, dimensions, browser-verification
+---
+
+## 按钮尺寸问题
+
+**错误模式**：按钮尺寸不对
+
+| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
+|---------|---------|----------|----------|
+| **按钮尺寸不对** | 按钮高度/宽度与设计稿不符 | 未用浏览器实际查看，仅凭代码推测 | **必须用浏览器工具查看实际渲染效果** |
+
+**核心原则**：**必须用浏览器工具实际查看渲染效果**，不能仅凭代码推测。
+
+**验收时检查**：
+- [ ] **按钮高度、宽度**：必须用浏览器工具实际查看渲染效果，不能仅凭代码推测
+- [ ] **对齐效果**：必须用浏览器查看实际对齐效果
+- [ ] **hover/active 状态**：必须用浏览器实际触发查看
+- [ ] **响应式表现**：必须用浏览器在不同视口下查看
+
+**验收时特别关注**：
+- 必须用浏览器工具实际查看渲染效果（特别是按钮、对齐等细节）
+
+**相关规则**：
+- `tools-browser-navigation.md` - 浏览器工具打开页面指南

package/.agents/skills/domains/web/ui-verification/rules/errors-button-position.md

@@ -0,0 +1,25 @@
+---
+title: 按钮定位问题
+impact: MEDIUM
+impactDescription: 按钮位置、边距与设计稿不符
+tags: errors, button, position, padding, margin
+---
+
+## 按钮定位问题
+
+**错误模式**：按钮定位不对
+
+| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
+|---------|---------|----------|----------|
+| **按钮定位不对** | 按钮位置、边距与设计稿不符 | 未仔细对照设计稿的 padding、margin、定位规则 | 验收时逐项对照设计稿的定位细节 |
+
+**验收时检查**：
+- [ ] 按钮、卡片的 padding、margin、定位是否符合设计稿？
+- [ ] 绝对定位的元素是否正确设置了 `left`、`right`、`top`、`bottom`？
+
+**验收时特别关注**：
+- 必须用浏览器工具实际查看渲染效果（特别是按钮、对齐等细节）
+
+**相关规则**：
+- `writing-alignment.md` - 对齐方式规则
+- `tools-browser-navigation.md` - 浏览器工具打开页面指南