用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ccwq/infocard-pub --skill infocard-visual-pass-loop命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 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-visual-pass-loop |
| description | Screenshot-and-fix loop when 200 passes but theme is broken. |
| version | 1.0.0 |
| author | Hermes Agent |
| license | MIT |
| metadata | {"hermes":{"tags":["infocard","visual-verification","theme","hardblue","darkblue","hard-gate"],"related_skills":["infocard-publish-sop","theme-visual-reference-workflow"]}} |
The missing chapter between npm run build → HTTP 200 and PUBLISHED.
curl -I <url> returns 200.In any of these cases: do not push again yet. Run this loop.
scripts/capture-infocard-screenshots.sh).vision_analyze with a "list every defect as CRITICAL/MAJOR/MINOR" prompt.HTTP 200 and npm run build success are NEVER sufficient evidence of completion.
| Symptom | Root cause | Fix |
|---|---|---|
| Plain text rendering, no colors, mojibake | <style> block missing from final HTML | Rebuild full HTML: head + inline style + body. Never split across files. |
| Hero bar absent | .hero-bar rule not in template CSS | Add .hero-bar{height:14px;border-radius:999px;background:linear-gradient(...);...} to the template. |
| Sections float without container | .section, .card, .grid-2, .risk-grid not defined | Add background+border+box-shadow rules to each container class. |
| Theme not dominant | Wrong template cloned | Confirm theme/<style>.html matches the meta's style: field before cloning. |
| Mobile overflow / illegible | No @media (max-width: 720px) rules | Add responsive rules to collapse grid columns to 1fr. |
See scripts/capture-infocard-screenshots.sh for the verified Chrome headless invocation. It follows chrome-automation-safety: per-run temporary profile, no broad process cleanup, and no default --no-sandbox. Always:
4183, 4184, ...);curl -sI to verify the preview before screenshotting;?v=<n> query on every retry.When reporting completion, MUST include:
Visual pass:
- desktop 1280×1800: <count> screenshots, 0 critical, 0 major
- mobile 720×1600: <count> screenshots, 0 critical, 0 major
- commit: <hash>
- cache-bust URL: <url>?cb=<hash>
Without this report, the card is 视觉未通过 — 待修复, NOT 已发布.
A page identity check is necessary but not visual evidence. If URL/title/readyState and DOM checks succeed while Page.captureScreenshot times out, classify the run as SCREENSHOT_TIMEOUT / VISUAL_PENDING unless a readable screenshot is actually produced and reviewed. Do not upgrade HTTP 200, CSS/theme signatures, or scrollWidth == clientWidth into a visual pass.
Before retrying, confirm the exact target identity and use one fresh owned target for a viewport capture; do not blindly repeat full-page captures. If the fallback capture path also times out or produces no verifiable PNG, retain the pending state and report the concrete infrastructure failure. A publication that proceeds under an approved infrastructure-only fallback must remain PUBLISHED_PENDING_VISUAL, never PUBLISHED with an implied visual pass.
When using live-server, its configured port may already be occupied and the server may auto-select a different port. Read the actual serving URL from the server output, verify that URL with curl, and use the same port for browser review. Never review a stale page on the originally requested port.
references/pitfalls-20260728-visual-gate.md — full incident transcript of the 2026-07-28 case.infocard-pub-hardening — additional screenshot and preview hardening notes (currently user-owned; adopt before autonomous edits).