srbhr--resume-matcher/docs/agent/features/adding-resume-templates.md

Adding Resume Templates

Guide for adding new resume template layouts.

Quick Start

1. Create components/resume/resume-{name}.tsx
2. Export from components/resume/index.ts
3. Add to FormattingControls template selector
4. Create thumbnail image

Template Component

interface TemplateProps {
  resumeData: ResumeData;
  settings: TemplateSettings;
}

export function ResumeNewTemplate({ resumeData, settings }: TemplateProps) {
  return (
    <div className="resume-print">
      {/* Header */}
      <header className="resume-section">
        <h1>{resumeData.personalInfo?.name}</h1>
      </header>
      
      {/* Sections */}
      {getSortedSections(resumeData).map(section => (
        <section key={section.id} className="resume-section">
          <h3 className="resume-section-title">{section.displayName}</h3>
          <div className="resume-items">
            {/* Items */}
          </div>
        </section>
      ))}
    </div>
  );
}

CSS Classes Required

.resume-print          /* Root container (Playwright waits for this) */
.resume-section        /* Section wrapper */
.resume-section-title  /* Section heading */
.resume-items          /* Items container */
.resume-item           /* Individual entry (won't page-break) */

Export Template

// components/resume/index.ts
export { ResumeNewTemplate } from './resume-new-template';

Add to Selector

// components/builder/formatting-controls.tsx
const TEMPLATES = [
  { id: 'swiss-single', name: 'Single Column' },
  { id: 'swiss-two-column', name: 'Two Column' },
  { id: 'new-template', name: 'New Template' }, // Add here
];

Testing

1. Load builder with new template
2. Check all sections render
3. Verify PDF generation works
4. Test with 2+ page content