Infocard Theme Validation

---
name: infocard-theme-validation
description: Use when changing infocard theme CSS or pushing docs.
version: 1.0.0
author: Hermes Agent
license: MIT
metadata:
  hermes:
    tags: [infocard, theme, validation, verification]
    related_skills: [infocard-crayon-style, web-visual-acceptance, pkwork]
---

# infocard-theme-validation

Use when modifying an `infocard-*-style` theme HTML/CSS or pushing theme-driven docs updates to `infocard-pub`. Loads after the active theme skill (`infocard-crayon-style` etc.) to enforce the user-mandated verification chain. Do not skip a step; do not treat any subset as "complete".

## Inputs

- Theme HTML/CSS path (e.g. `theme/crayon.html`) and one or more `docs/<slug>.html` targets
- Desktop viewport (default 1440×900) and mobile viewport (default 390×844)
- Public URL pattern (`https://<user>.github.io/<repo>/docs/<slug>.html`)

## Mandatory checks (all required, no exceptions)

1. **Layout intent** — Before editing: confirm scope boundary. Theme edits live in `theme/`. Docs HTMLs are out of scope unless the user explicitly approves the theme-to-docs regression sweep.
2. **Geometry (playwright)** — Capture `card-num` / `card-stripe` / `card-body` `getBoundingClientRect` at both viewports. Required tolerances:
   - Desktop: `card-num.right - card-stripe.left ≈ 4px`, `card-num` is `.skill-card` direct child
   - Mobile (≤720px): same 4px tolerance with the mobile key values
3. **Visual (vision_analyze)** — `score` + critical/major/minor list. Failing to produce this means the change is NOT done.
4. **Edge pixels (PIL)** — `Image.open(screenshot).getpixel((0,0))` etc. must equal the theme background RGB.
5. **HTML structure invariant** — `card-num` and `card-stripe` are direct children of `.skill-card`. Inline overrides (`left:72px`, `font-size:10.5px`, `padding-bottom:18px`, `min-height:0`) are forbidden except for the special deprecation card where `left:96px` replaces `left:72px`.
6. **Global defenses** — `html,body{margin:0;padding:0}` and `*,*::before,*::after{box-sizing:border-box}` must be present so external pages do not reintroduce white margins.
7. **Public HTTP** — `sleep 25` then `curl -fsS` for each affected slug; must be 200; key CSS substrings (`grid-template-columns:100px`, `left:96px`, `padding:0 32px`, mobile `72px / 68px`) must be findable in the served HTML.
8. **Build** — `npm run verify` and `npm run check-leak` pass.
9. **Push** — Only after 1–8 are all green; commit messages follow Conventional Commits; mention affected slugs.

## What "complete" means

The user treats a change as complete only when **all nine checks are green**. Reporting "PASS" with only 1–8 satisfied and visual review pending is treated as a defect. After any user-visible theme change, the docs regression sweep must be planned with `pkwork` (3 roles, ≤4 rounds, theme demo unchanged unless explicitly authorized).

## Failure modes to watch

| Symptom | Cause | Fix |
|---|---|---|
| White border at top/left/right | `html, body` default margin or fixed-width `.poster-shell` | Force `html,body{margin:0}` and `width:100%` |
| Numbers cluster on the right side | `card-num` nested inside `card-body` | Move `card-num` out as a direct sibling of `.skill-card` |
| Numbers and vertical line touch | Grid column too narrow / padding-right too small | Use the exact values in the active theme skill's references file |
| Number not vertically centered | `align-self: start` left over from earlier revisions | Set `align-self: center` |
| Mobile shows small chip-sized numbers | Earlier `font-size:10.5px` override still in CSS or inline style | Delete the override; trust the theme's `.card-num` rule |
| GitHub Pages still shows old version | Cache | Wait 25–60 s after push; re-check with curl |
| Theme looks like a plain long article, not an infocard | Hero / section / card / grid skeleton lost during content rewrite | Rebuild the theme skeleton first, then reflow content into section blocks and cards |
| Bulk rewrite gets trapped by approval or partial overwrite | Replacing a large HTML subtree in one shot | Split into small, reviewable patches; verify file integrity after each step |
| Template edits break structure | Patching paginated/partial reads or matching mid-block CSS | Re-read the full file before large replacements; patch only stable anchors |

## Cross-references

- `infocard-crayon-style` → `references/poster-visual-principles.md` (R6 visual + geometry rules)
- `web-visual-acceptance` (qa) — broader acceptance framework; this skill is the theme-specific enforcement
- `pkwork` (software-development) — required for any multi-doc theme regression sweep
- `references/20260728-theme-rebuild-pitfalls.md` — this session's darkblue skeleton-loss and safe patching notes