Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CristianParadaLopez/cv-builder/llms.txt

Use this file to discover all available pages before exploring further.

The Builder page (/builder) is a four-step wizard that collects every piece of information your CV needs before handing it off to the AI. Each step focuses on a different section of your CV, and you can move freely between steps — your progress is automatically saved to localStorage after every keystroke so nothing is lost if you refresh or accidentally navigate away.
1

Step 1 — Design: Choose your template and mode

The first step is handled by the TemplateSelector component. You choose two things here:
  • CVStyle — the visual layout for your CV. The four available styles are moderno, clasico, minimalista, and creativo. Each is described in detail in the Templates guide.
  • CVMode — how the AI renders the output. Choose designed for a visually styled CV with colors, sidebars, and photos, or ats for a plain single-column layout optimized for automated parsers. See the ATS Mode guide for a full breakdown.
After selecting a style and mode, click Continuar to proceed to Step 2. Your selection is stored and carried through to the generation request.
2

Step 2 — Personal Data: Your contact information and summary

This step collects your core identity fields. The following fields are available:
FieldRequiredNotes
name✅ YesFull name, max 100 characters
email✅ YesMust be a valid email address
phone✅ YesFormat: +503 7000-0000, must match /^[+]?[\d\s\-()]{8,20}$/
location✅ YesCity and country, e.g. San Salvador, El Salvador
title✅ YesYour professional job title or role
summary✅ YesA 3–4 line professional profile, max 500 characters
photoNoOptional profile photo, uploaded as a base64-encoded string
The photo upload field uses the PhotoUpload component. In ats mode the photo field is hidden automatically — photos are never included in ATS output even if one was previously uploaded.
The summary field has an ✨ AI suggestion button powered by the AISuggestField component. Type a few informal sentences about yourself and click the button to have the AI rewrite them in professional language. See the AI Suggestions guide for full details.
3

Step 3 — Experience & Education: Your professional history

Step 3 collects two required sections and three optional ones.Work Experience — add up to 5 entries. Each entry contains:
  • company — employer name (required)
  • position — job title or role (required)
  • startDate — formatted as YYYY-MM, e.g. 2022-03 (required)
  • endDate — YYYY-MM format or "Presente" if currently employed (required)
  • description — responsibilities and achievements, max 1,000 characters (required)
Education — add up to 5 entries. Each entry contains:
  • institution — name of the school or university (required)
  • degree — title or program name (required)
  • startDate — four-digit year (required)
  • endDate — four-digit year (required)
Optional sections — expand the Secciones opcionales panel to reveal:
  • Certifications (up to 5): name, institution, date (month input), url (optional link), expires (optional), description (optional)
  • Volunteer Work (up to 5): organization, role, startDate, endDate, description
  • Projects (up to 5): title, description, url (optional), tech[] (comma-separated technologies)
The experience description field and the volunteer description field each have an ✨ AI suggestion button. Click it to transform informal notes like “helped my uncle in construction” into polished, action-verb bullet points.
4

Step 4 — Skills: Technical and language proficiencies

The final step collects three arrays of plain strings:
  • skills[] — soft and professional skills (e.g. “Liderazgo”, “Comunicación”), up to 10 entries, each max 50 characters
  • tools[] — software tools and technologies (e.g. “React”, “Figma”, “Microsoft Excel”), up to 10 entries
  • languages[] — spoken languages with proficiency level (e.g. “Inglés B2”, “Español nativo”), up to 5 entries
A page-count estimator runs live as you fill the form. If your content is estimated to span more than one A4 page, a warning badge appears suggesting you trim your descriptions.When you are satisfied, click Generar CV con IA to submit. The form calls handleGenerateWithSuccess in the Builder, which triggers POST /api/cv/generate with your full form data, style, and mode. While the AI processes your request a full-screen loading overlay is shown. On success, the Builder transitions to the result view and displays your rendered CV in the CVPreview component.

​
How form data persists

Skillara AI uses two hooks to ensure you never lose your work:
  • useCV — manages the generated HTML, loading state, error state, and the selected CVStyle. It exposes handleGenerate (calls POST /api/cv/generate) and handleEdit (calls POST /api/cv/edit).
  • usePersistCV — writes your form data to localStorage under the key skillara_cv_form_data on every change. The generated HTML is stored under skillara_cv_html. Both entries expire after 30 days. If localStorage is full (e.g. the HTML is very large), the hook automatically falls back to sessionStorage for the HTML.
When you return to /builder, usePersistCV rehydrates the form so your previous answers are pre-filled.

​
Input validation and sanitization

Before the form submits, CVForm runs two layers of protection from utils/validation.ts:
  1. sanitizeInput — strips <, >, javascript: prefixes, and on*= event handler attributes from every text field to prevent XSS injection. It also normalizes all quote characters to a single quote.
  2. validateFormData — checks required fields, email format (/^[^\s@]+@[^\s@]+\.[^\s@]+$/), phone format (/^[+]?[\d\s\-()]{8,20}$/), field length limits, and character allowlists. Errors are displayed in a summary banner at the top of the form with links to the offending fields.
After both checks pass, sanitizeFormData runs a final .trim() across all string fields before the data is sent to the API.

​
Submitting and viewing results

Clicking Generar CV con IA on Step 4 calls POST /api/cv/generate with the following JSON body: 
{
  "formData": { ... },
  "style": "moderno",
  "mode": "designed"
}
The backend returns { "html": "<string>" }. The Builder stores this HTML in state and in localStorage, then transitions to the result view. From there you can:
  • Edit the CV using the PromptBar with natural language instructions
  • Download a PDF by clicking Descargar PDF
  • Save the CV to your account by clicking Guardar CV (requires login)
  • Go back to any step to adjust your data and regenerate

Build docs developers (and LLMs) love

Get started for freeTalk to us