fix(harness): Puppeteer link rendering rules + Chrome QA mandate

- Rule #16: Puppeteer PDF <a> inside <p> fails — use set:html + enhance()
- Rule #17: enhance() = single source for inline links (metrics, terms, URLs)
- visual-qa-pdf Step 5.5: PDF link color must be verified via Chrome browser
  (Read tool image rendering inaccurately shows blue links as dark text)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kilhyeonjun

.claude/harness-log.md

@@ -316,3 +316,22 @@
 
 ### Principles Reinforced
 - Manual→Skill Automation: 사용자 지적 → resume-template.md Rule #15로 자동화
+
+### Harness Improve Round 4 (Puppeteer Link Rendering + enhance() Pattern)
+
+### Discoveries
+1. **Puppeteer PDF `<p>` 내 `<a>` 색상 미적용 (7회 시도)** — CSS class, inline style, set:html+!important, `<h3>` wrapper 등 시도. 근본 원인: Astro scoped CSS `a[data-astro-cid]{color:inherit}` cascade가 Puppeteer print에서 override 불가. 해결: `set:html` + `enhance()` 함수로 raw HTML 주입
+2. **Read 도구 PDF 색상 부정확** — Read 도구로 PDF 읽으면 파란 링크가 검은 텍스트로 보여 오판. Chrome 브라우저에서만 정확 확인 가능
+3. **enhance() 패턴 발견** — metrics bold + KEY_TERMS bold + inline links를 한 함수에서 관리. summary, coreCompetencies, highlights에 공통 적용
+
+### Applied Improvements
+
+| File | Change |
+|------|--------|
+| `resume-template.md` | Rule #16: Puppeteer PDF inline link rendering — `set:html` + `enhance()` 필수 |
+| `resume-template.md` | Rule #17: enhance() = single source for inline links |
+| `visual-qa-pdf.md` | Step 5.5: PDF 링크 색상 검증은 Chrome 브라우저 필수 |
+
+### Principles Reinforced
+- Manual→Skill Automation: 7회 시도 삽질 → Rule #16 (Puppeteer link rendering) 문서화
+- Measure, Don't Judge: Read 도구 이미지 색상 부정확 → Chrome 브라우저 검증 필수화

.claude/rules/resume-template.md

@@ -24,3 +24,5 @@ When editing Astro components or templates:
 13. **Portfolio template sync** — when adding new fields to portfolio.json schema: (1) render in BOTH PortfolioPrintTemplate (PDF) AND PortfolioDetailTemplate (web) simultaneously, (2) add data to ALL visible projects (featured + listed), not just featured. Hidden projects excluded. Never add data to one surface or subset of projects only.
 15. **Data with URL = title hyperlink** — when a JSON data item has both `title` and `url` fields (technicalWriting, openSource, etc.), the title text itself must be the hyperlink (not a separate [링크] badge). Apply to HR PDF + Web. ATS stays plain (parser safety). Check all sections that have url fields render title as `<a href={url}>{title}</a>`.
 14. **Metric auto-bold in HR PDF** — numbers with units (%, 배, 건, 초, 개) and KEY_TERMS (Deadlock, EDA, BigQuery, Lambda, NestJS, TDD, gRPC, MSA) are automatically bolded via `enhance()` in ResumePrintTemplate.astro. Applied to: summary, core competency items. ATS PDF stays plain (parser safety). KEY_TERMS is base resume focused — JD-specific resumes with additional tech terms will use the same list; extend KEY_TERMS in the template if JD-specific terms need bolding.
+16. **Puppeteer PDF inline link rendering** — Puppeteer's headless Chromium print renderer does NOT reliably apply CSS class-based link colors on `<a>` inside `<p>` elements. Inline styles on `<a>` also fail due to Astro scoped CSS `a[data-astro-cid]{color:inherit}` cascade. **Solution**: render text via `set:html` with the `enhance()` function, which injects `<a>` tags as raw HTML bypassing Astro scoping. Never use Astro component `<a>` inside `<p>` for PDF links — always use `set:html`.
+17. **enhance() = single source for inline links** — `enhance()` in ResumePrintTemplate.astro centralizes: (1) metric bolding, (2) KEY_TERMS bolding, (3) known inline link replacements (Games on AWS → YouTube, 기술 블로그 게재 → jnp.tech). When adding a new inline link, add ONE `.replace()` call in `enhance()` — it automatically applies to summary, coreCompetencies, and highlight results.

.claude/skills/resume-verify/references/visual-qa-pdf.md

@@ -131,6 +131,25 @@ FAIL conditions:
 - English PDF missing "Engineer" keyword → Text extraction broken
 - Any PDF file missing → FAIL (not SKIP per "Produce, Don't Skip" principle)
 
+## Step 5.5: PDF Link Color Verification (Chrome browser required)
+
+IMPORTANT: The `Read` tool's PDF image rendering does NOT accurately represent link colors — blue links (#1d4ed8) appear as dark gray text. **Always verify link colors via Chrome browser**:
+
+```bash
+# Serve PDF via HTTP and open in Chrome
+cd dist/pdf && python3 -m http.server 8888 &
+# Navigate Chrome to http://localhost:8888/resume-hr-ko.pdf
+# Zoom into link areas to verify blue + underline
+# Kill server after: lsof -ti:8888 | xargs kill -9
+```
+
+Check these link areas in the PDF:
+- Header links (GitHub, LinkedIn, 블로그, etc.)
+- technicalWriting section titles + descriptions
+- coreCompetencies inline links (Games on AWS 2025)
+- highlight results with inline links (기술 블로그 게재)
+- openSource PR links (#2664, #15136, etc.)
+
 ## Step 6: PDF UI/UX Visual Checks (Read each page as image)
 
 - Typography hierarchy: section title → subtitle → body clearly distinguished