Score-card visual parity (UI parity round 2)

[s-annam]

Round 2 — Score-card visual parity

Part of the UI-parity epic (#22). Depends on the token layer (#23) — do not start until #23 lands; this round consumes the semantic tokens it establishes.

resumelint already renders the data: score number, /100, algo version, the three dimension bars (Specificity/Structure/Completeness), per-bullet feedback, "Try another PDF". This round brings the presentation up to the source ATS surface resumelint was migrated from. No new data, no parser changes — chrome only.

Gaps vs the source surface (screenshot reference)

1. Score ring. The source shows a circular badge (colored ring + large number) at the card's top-left. resumelint shows a bare 3xl number + /100 inline. Add the ring; color it by verdict band (brand-amber / accent / feedback tokens).
2. Verdict label. Source: Needs Work heading in band color + ATS readiness · 50 / 100 subline. resumelint has no verdict word. Add a band → label map (e.g. Strong / Solid / Needs Work) using the existing score bands.
3. Progress bars. Source bars are filled brand-amber on a surface-subtle track. Restyle resumelint's Dimension bars to match (token-driven, post-Establish the semantic token layer (UI parity round 1) #23).
4. Clean ATS layout banner. The source shows a green success pill-banner when layout is clean. Wire it to the existing layout-trigger signal using feedback.success tokens.
5. Header pill chips. Source: ⚡ ~30 seconds · 🔒 Runs in your browser · ✓ No signup required. resumelint header has none. Add the chip row (static content) — reuse a shared chip/badge primitive, don't hand-roll.
6. Wordmark. The source has a boxed monogram + wordmark; resumelint has a plain lowercase resumelint text. Decide resumelint's own mark (boxed monogram in brand color) — keep the name, match the treatment.
7. Card chrome. Border-radius, surface-card bg, border + subtle shadow on the score card and any sub-cards, matching the source's elevation.

Out of scope

• The Contact-information card and thumbs feedback — those surface new data / new behavior → Round 3 (round 3, filed next).
• Result.tsx decomposition (it is 430 LOC; if this round pushes it well past that, split out ScoreRing / VerdictHeader as their own feature components per CLAUDE.md — but do not refactor unrelated code).

Acceptance

• Score ring renders, colored by verdict band
• Verdict label + readiness subline present
• Bars, banner, card chrome use only semantic tokens from Establish the semantic token layer (UI parity round 1) #23 (no raw palette classes)
• Header pill row + resumelint monogram present
• npm run typecheck + npm run build green
• Side-by-side with the reference screenshot: visually comparable layout

References

The source surface is not public. The two files that matter — the ring/verdict/bar markup, and the band → label/color view-model logic — are known to the maintainer and are not linkable here.

---

Edited 2026-07-30: originally named a private, non-public codebase and two of its internal file paths. Rewritten to describe the same work without them; no gap, decision, or acceptance criterion changed. See #457.

[s-annam]

Implementation Complete — c622b2e (PR #35)

Acceptance Criteria

• Score ring renders, colored by verdict band — ScoreRing.tsx SVG ring, stroke colored via getScoreTier + scoreBand.ts token map
• Verdict label + readiness subline present — VerdictHeader.tsx uses getScoreLabel + ATS readiness · N / 100, band-colored
• Bars, banner, card chrome use only semantic tokens from Establish the semantic token layer (UI parity round 1) #23 — brand-amber on surface-subtle track; feedback.success chip for clean-layout banner; no raw palette classes
• Header pill row + resumelint monogram present — boxed amber R monogram + ⚡ ~30 seconds · 🔒 Runs in your browser · ✓ No signup required via new ui/Chip.tsx primitive
• npm run typecheck + npm run build green — confirmed in PR; 181 tests passing
• Side-by-side with the reference screenshot: visually comparable layout — manually verified in npm run dev

Additional Changes

• ui/Chip.tsx: new shared primitive (not in original scope) — avoids hand-rolling chip styles across future rounds
• features/ScoreRing.tsx + features/VerdictHeader.tsx: establishes the ui/ + features/ component tiers per CLAUDE.md
• scoreBand.ts: shared token map reused by both ring and verdict header — single source of truth for band → color mapping

---

Edited 2026-07-30 to remove references to a private, non-public codebase. No technical fact or outcome changed. See #457.