用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/ccwq/infocard-pub --skill infocard-mobile-verifier命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Use before infocard .docs authoring to select a registered theme from content-aware candidates. Owns the only content-to-theme association, capability filtering, bounded reproducible variation, and theme-decision.json.
Use when one URL or a complete user brief should become one published infocard through the .docs promotion workflow.
Light-batch publish 2–3 cards in parallel without worktree.
| 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/结构/内容/主题变化都会使相关移动证据失效,必须重新截图和复验。
检查以下数据,并区分页面溢出与局部滚动:
scrollWidth <= clientWidth;页面不得依靠 overflow-x:hidden 掩盖问题。.page、.card、.hero、主要网格和固定控件的 computed width 不得异常变窄或越界。按以下顺序定位:
.cards-grid 嵌套;父级错误时先修 HTML 结构。display、grid-template-columns、gap、宽高和子元素矩形;不要只相信源码。优先修结构,再修容器,再修局部细节:
| 缺陷 | 首选处理 |
|---|---|
| 页面横向溢出 | 找出越界节点;限制图片、长词、代码和网格,不用全局隐藏掩盖 |
| 网格/卡片变窄 | 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 修复仍无法满足能力约束,且证据表明主题能力是根因时,才可提出切换;切换后必须重新走完整循环。
在真实目标视口截图并检查至少:Hero/标题、普通卡片网格、每个表格或矩阵、代码/部署区域、风险区和页尾/固定控件。长页面需覆盖中段和底部,不能用页面顶部截图代表全页。
视觉结论必须与 DOM 证据绑定:语言、主题、组件完整性、可读性、裁切、重叠和层级逐项记录。截图服务或视觉分析不可用时,保留 VISUAL_PENDING,机械检查不能升级为视觉通过。
每次可见改动后重新加载目标 revision,重测几何与 DOM,重新截取受影响区域及页尾,并重新检查全页横向边界。保留修复前后证据与变更原因;不要复用旧截图。
返回:
target: URL/path、revision、viewport、证据路径;mechanical: viewport、宽度、局部滚动、关键矩形与资源结果;dom: 结构归属与 computed layout 结果;visual: 组件覆盖、critical/major/minor 问题或 VISUAL_PENDING;repairs: 已执行/建议的局部修复及其证据;disposition: MOBILE_PASS、MOBILE_REPAIR_REQUIRED、MOBILE_BLOCKED 或 VISUAL_PENDING。MOBILE_PASS 仅表示移动端证据满足本 skill;不得表述为整卡已发布或整卡视觉门禁已通过。
MOBILE_BLOCKED,不得猜测。历史 CSS 配方、HTML 结构案例、grid min-content、表格滚动、浮动控件安全区和 CDP 降级记录放在本目录的 references/ 中。它们只能作为局部 recipe、case、evidence pattern 或 troubleshooting note;若资料描述完整移动 SOP,以本文件为准。
移动端验收与修复只从本 skill 进入。历史 skill 目录已移除;不要根据旧名称创建新的旁路或恢复旧 SOP。