gentle-production

byMadhuri

Build a production-ready Resume & CV Builder SPA in **one React JSX file** (<1000 lines), default export. Act as a top-tier product designer + senior React engineer. Use React hooks, no Tailwind/external UI libraries; one `<style>` tag/inline CSS. Dark obsidian UI: #080C15 base, #0D1220 panels, #111827 cards, #1C2740 borders, #C9A227 accent, #E8EAF0 text, #8892A6 muted; Inter + Instrument Serif via Google Fonts. No gradients, decorative shadows, emojis, or radii >10px. Fixed 3-zone layout: sticky 48px topbar, 420px scrollable form panel, flexible scrollable preview with centered US-Letter paper. Add 4 live-switching SVG-preview templates: Classic, Modern, Minimal, Executive; font selector, 5 accent swatches, Export PDF, Copy plain text. Include live ATS scanner scoring 9 checks: complete contact, 15–60-word summary, ≥50% quantified bullets, no weak openers, 5–18 skills, single column, ATS font, 250–900 words, no date gaps. Accordion form: Contact, Summary, repeatable Experience/Education/Projects/Certifications, Skills, Languages. Live preview; weak bullets appear gray/italic/struck through. Claude API actions: rewrite summary, rewrite bullets, suggest 10 skills; POST `/v1/messages`, model `claude-sonnet-4-6`, max_tokens 1000, no invented facts, inline errors. Persist `{data,template,font,accent}` via `window.storage` key `resume-engine-v1`, debounced 600ms. `window.print()` PDF stylesheet; clipboard plain text + single replacing toast. Fully functional first render, no console errors.