# Prompt for Claude Code

Copy-paste the prompt below (adjust the two bracketed bits for your repo):

---

Implement the redesigned auction listing card from the design handoff in `design_handoff_auction_card/`.

Read `design_handoff_auction_card/README.md` first — it is the full spec — then use the reference files alongside it (`hifi-card.jsx` for component structure and the gauge's tight-mode logic, `hifi-data.js` for the data contract, `Card Hi-Fi.html` for the exact stylesheet, `screenshots/cards.png` for the expected result).

Context:
- This replaces the existing auction card in [point at your current card component, e.g. `src/components/AuctionCard.tsx`].
- Build it with [your stack, e.g. React + Tailwind / CSS modules] following this codebase's existing conventions.

Hard requirements:
1. The HTML/JSX in the handoff folder is a design reference, NOT code to copy — recreate it idiomatically in this codebase. Ignore `design-canvas.jsx`, `tweaks-panel.jsx`, and `image-slot.js` (prototype scaffolding), and ignore `HfRow` / the `.hf-row` CSS (a discarded layout).
2. One vertical card layout everywhere: full-width in the mobile feed, and the same card in a responsive grid on desktop (`repeat(auto-fill, minmax(360px, 1fr))`, 20px gap, `align-items: start`).
3. Match the design tokens exactly (colours, Figtree type scale, 16px card radius, spacing, shadow) — they're tabled in the README. Wire them into the app's token system if one exists rather than hard-coding.
4. Implement the price gauge exactly as specified, including tight mode: when `(maxBid − reserve) / (retail − reserve) < 0.26`, the reserve label and room pill move below the track, the room copy becomes "£X over reserve", and the reserve dot is hidden.
5. All money renders with tabular numerals. Insight rows must stay single-line — truncate/shorten copy rather than wrap; detail belongs in the listing view, not the card.
6. Badges, insights, valuations, and verdict are all optional in the data — the card must degrade gracefully when any are missing (see the Peugeot example).
7. Valuation detail is collapsed by default; the toggle expands the four valuation chips.
8. The card itself is not a link: the CTA opens the source listing, the star toggles watch state.

Verify against `screenshots/cards.png` (left: typical card; middle: everything-on card with tight-mode gauge; right: valuation detail expanded) before considering it done.

---