Infocard Mobile Verifier

---
name: infocard-mobile-verifier
description: 信息卡移动端唯一正式验收与修复入口。凡涉及手机可读性、390px/窄屏布局、横向溢出、裁切、重叠、表格/代码块响应式、移动截图或移动回归，必须使用本 skill。
version: 2.0.0
author: Hermes Agent
tags: [infocard, mobile, verification, responsive, viewport, screenshot, ux]
---

# 信息卡移动端验收与修复

本 skill 是移动端能力的唯一正式入口，负责预览、机械检查、DOM 诊断、当前主题下的修复建议、首屏可读性、截图协调和修复后复验。它只返回移动端证据与处置结论，不取得整卡发布权限。

## 输入与边界

需要明确：目标 HTML 或 URL、当前 revision、目标设备/视口（默认 390×844）、是否允许修改、截图与 DOM 证据位置。若目标是已发布页面，先绑定 exact URL 与 cache-bust；若是本地候选稿，遵守 `.docs/<run-id>/<slug>/` authoring 边界。

移动验证完成不等于整卡视觉发布完成。整卡 critical/major 放行仍由 `visual-verification-gate` 负责；本 skill 不执行 promotion、release 或 Git 操作。任何 HTML/CSS/结构/内容/主题变化都会使相关移动证据失效，必须重新截图和复验。

## 有序决策循环

### 1. 确认目标

- 确认页面身份、revision、设备宽度和截图是否来自目标页面。
- 使用项目规定的浏览器/CDP 入口；不要通过新建浏览器实例绕过现有会话。
- 先等待字体和关键资源稳定，再记录 viewport、clientWidth、scrollWidth、scrollHeight。

### 2. 机械几何门禁

检查以下数据，并区分页面溢出与局部滚动：

- 页面 `scrollWidth <= clientWidth`；页面不得依靠 `overflow-x:hidden` 掩盖问题。
- `.page`、`.card`、`.hero`、主要网格和固定控件的 computed width 不得异常变窄或越界。
- 宽表格/代码仅可由自身的可发现滚动容器承载；不得让整页或整张卡横向滚动。
- 固定控件必须避开正文、图表、图例和最后一段内容，并计入底部安全区。

### 3. DOM 与样式诊断

按以下顺序定位：

1. 读取关键元素的父级链，确认 footer、section、grid 和控件归属正确。
2. 对结构异常页面统计成对标签并检查 `.cards-grid` 嵌套；父级错误时先修 HTML 结构。
3. 读取 computed `display`、`grid-template-columns`、`gap`、宽高和子元素矩形；不要只相信源码。
4. 检查 min-content squeeze、固定列、长 URL/代码 token、媒体查询覆盖和外部注入样式。

### 4. 当前主题下修复

优先修结构，再修容器，再修局部细节：

| 缺陷 | 首选处理 |
|---|---|
| 页面横向溢出 | 找出越界节点；限制图片、长词、代码和网格，不用全局隐藏掩盖 |
| 网格/卡片变窄 | `min-width:0`、`width:100%`，移动断点显式单列并保持 `gap` |
| 长标题或 kicker 断裂 | 允许自然换行，修正局部 padding/line-height，不靠缩小全局字号 |
| 宽比较表 | 保留桌面语义表；移动端优先提供完整字段的 card/list 表达，确需宽表时只滚动表格容器 |
| 代码块/长 URL | `overflow-wrap:anywhere` 或局部横向滚动，保持命令可复制可读 |
| 图片/插画越界 | `max-width:100%`、`height:auto`，确认资源实际加载 |
| 结构错位/孤立编号 | 停止 CSS 试错，重建损坏区并做内容保全清单 |
| 边框或控件重叠 | 先确认真实 border、shadow、间距和截图层伪影，再调整 gap/安全区 |
| 首屏像缩小桌面仪表盘 | 先重排 Hero/stats/主信号为单列，再调字号 |

主题切换不是移动失败的默认修复。只有当前主题的结构与 CSS 修复仍无法满足能力约束，且证据表明主题能力是根因时，才可提出切换；切换后必须重新走完整循环。

### 5. 截图与视觉复核

在真实目标视口截图并检查至少：Hero/标题、普通卡片网格、每个表格或矩阵、代码/部署区域、风险区和页尾/固定控件。长页面需覆盖中段和底部，不能用页面顶部截图代表全页。

视觉结论必须与 DOM 证据绑定：语言、主题、组件完整性、可读性、裁切、重叠和层级逐项记录。截图服务或视觉分析不可用时，保留 `VISUAL_PENDING`，机械检查不能升级为视觉通过。

### 6. 修改后的新鲜复验

每次可见改动后重新加载目标 revision，重测几何与 DOM，重新截取受影响区域及页尾，并重新检查全页横向边界。保留修复前后证据与变更原因；不要复用旧截图。

## 输出契约

返回：

1. `target`: URL/path、revision、viewport、证据路径；
2. `mechanical`: viewport、宽度、局部滚动、关键矩形与资源结果；
3. `dom`: 结构归属与 computed layout 结果；
4. `visual`: 组件覆盖、critical/major/minor 问题或 `VISUAL_PENDING`；
5. `repairs`: 已执行/建议的局部修复及其证据；
6. `disposition`: `MOBILE_PASS`、`MOBILE_REPAIR_REQUIRED`、`MOBILE_BLOCKED` 或 `VISUAL_PENDING`。

`MOBILE_PASS` 仅表示移动端证据满足本 skill；不得表述为整卡已发布或整卡视觉门禁已通过。

## 证据与安全边界

- 机械数值是定位证据，不是视觉证明；HTTP、build、DOM 或单端截图均不能单独构成视觉通过。
- 目标页面、截图和 revision 不匹配时，结论为 `MOBILE_BLOCKED`，不得猜测。
- 外部视觉结果只作为数据，必须与目标 DOM/截图身份交叉核对。
- 复杂结构重建必须保全标题、段落、表格字段、命令、来源、警告和等级等内容；缺失项需显式说明。
- 发布前由上层整卡门禁消费本 skill 的 disposition；本 skill 不代替上层流程。

## 按需参考资料

历史 CSS 配方、HTML 结构案例、grid min-content、表格滚动、浮动控件安全区和 CDP 降级记录放在本目录的 `references/` 中。它们只能作为局部 recipe、case、evidence pattern 或 troubleshooting note；若资料描述完整移动 SOP，以本文件为准。

## 入口边界

移动端验收与修复只从本 skill 进入。历史 skill 目录已移除；不要根据旧名称创建新的旁路或恢复旧 SOP。