| name | proposal-gen |
| description | Generate professional client proposal PDFs for Product Siddha. Use when asked to create a proposal, client brief, quote, or engagement document from meeting notes or a client MoM. Produces a styled HTML file and a PDF using headless Chrome. Covers pricing, milestones, deliverables, timeline, scope of work, and next steps. Trigger phrases include: "create a proposal", "generate a proposal", "make a client brief", "write a proposal for", "proposal from this MoM". |
Proposal Generator
Produces a print-ready A4 PDF proposal from a client brief or MoM. Design: navy + gold, Playfair Display + Inter.
Workflow
- Parse the brief — extract: client name, project title, scope, deliverables, pricing, timeline, milestones, out-of-scope items.
- Generate HTML — copy
assets/template.html as a starting point. Fill in content. Use component snippets from references/components.md.
- Check page heights — every
.page div must be ≤ 1119px (A4 at 96 dpi). Measure with chrome-devtools evaluate.js.
- Fix overflows — add
.compact class, split content across pages, or trim text until all pages fit.
- Generate PDF — run
node scripts/generate_pdf.js <html_path> <pdf_path>.
Page Structure
Standard proposal layout (adjust count to content):
| Page | Class | Content |
|---|
| 1 | cover-page | Dark gradient cover — title, subtitle, client/date meta |
| 2 | content-page | Executive Summary + Core Objectives (2-column) |
| 3 | content-page compact | Scope of Work (phases) + Deliverables table |
| 4 | content-page compact | Domain-specific page (reports, architecture, etc.) |
| 5 | content-page | Investment & Payment Terms (milestone cards + fee table) |
| 6 | content-page | Project Timeline + Next Steps |
Add or remove pages as needed. Every content-page must end with a .footer div.
Page Fitting Rules
- A4 limit: 1119px at 96 dpi (= 296mm).
- Cover page: always
height: 296mm (explicit, fills full page).
- Content pages: no
min-height — let content size naturally.
- Measure all pages after writing HTML:
node evaluate.js --url "file:///path/to/proposal.html" --wait-until networkidle2 \
--script "Array.from(document.querySelectorAll('.page')).map((p,i)=>({page:i+1,height:p.scrollHeight,fits:p.scrollHeight<=1119}))"
- If a page overflows by ≤ 150px: add
compact class (padding: 11mm 17mm 10mm, tighter h3/li margins).
- If overflow is > 150px: split the page — move bottom sections to a new page.
PDF Generation
cd <project-directory>
npm install
node scripts/generate_pdf.js .tmp/proposal.html output/Proposal.pdf
The script waits for networkidle0 (ensures Google Fonts load) then prints with printBackground: true and zero margins.
Critical PDF Pitfalls
| Issue | Symptom | Fix |
|---|
| Gray body background | Gray bleed at bottom of pages | body { background: #ffffff } |
Box-shadow on .page | Shadow stripe mid-PDF | Remove box-shadow from .page |
min-height: 296mm on content pages | Blank pages after short pages | Remove min-height; use height only on cover |
| Fonts not loading | Fallback sans-serif in PDF | Use waitUntil: 'networkidle0' in Puppeteer |
File Locations
- Save HTML to:
.tmp/<project-name>_proposal.html
- Save PDF to:
<ProjectName>_Proposal.pdf (project root or output/)
Component Reference
See references/components.md for ready-to-paste HTML for: cover meta, page header, highlight box, OOS box, two-column layout, milestone cards, fee table, timeline table, deliverables table, report-tag badge, and footer.
