# resumecarousel

A Claude Code skill that turns your resume and a job description into a polished LinkedIn carousel — PDF, PNG, PPTX (Canva), and SVG (Figma) exports included.

## Install from npm

```bash
npm install resumecarousel
```

After installation, Claude Code automatically detects the skill and makes `/job-carousel` available.

## Get Started (from source)

Clone the repo — the cloned folder becomes your working project directory:

```bash
git clone https://github.com/SankaiAI/ResumetoCarousel-agent-skill.git my-carousel-project
cd my-carousel-project
npm install
```

> `npm install` is required to generate PNG/PDF/PPTX output files. If you only want to use `/job-carousel` in Claude Code without file exports, you can skip it.

Then invoke the skill in Claude Code:

```
/job-carousel
```

---

## Skills Available

### `/job-carousel` — LinkedIn Career Carousel Generator

Transform a resume + job description into a polished, recruiter-facing LinkedIn carousel package.

## How It Works

```mermaid
flowchart TD
    %% INPUTS
    subgraph INPUT["📥 User Input"]
        A1("Resume\n.txt / .md / pasted text")
        A2("Job Description\n.txt / pasted / title + requirements")
        A3("Options\n--mode  --theme  --slides  --export")
    end

    %% ACTIVATION
    subgraph ACTIVATE["⚡ Skill Activation"]
        B1["Invoke via Claude Code\n/job-carousel"]
        B2["or run CLI directly\nnpx ts-node src/job-carousel/index.ts"]
    end

    %% PARSE
    subgraph PARSE["🔍 Parse and Structure"]
        C1["resumeParser.ts\nroles, bullets, tools,\nmetrics, ownership signals"]
        C2["jobParser.ts\ntitle, seniority, required skills,\ndomain clues, recruiter priorities"]
    end

    %% ANALYSE
    subgraph ANALYSE["🧠 Analysis Engine"]
        D1["fitAnalysis.ts\nstrong / moderate alignments\nnotable gaps, fit score"]
        D2["rankHighlights.ts\nscore each bullet on 9 dimensions\nrelevance, impact, ownership..."]
        D3["chooseNarrative.ts\ngenerate 3 positioning angles\nscore and pick the strongest"]
    end

    %% GENERATE
    subgraph GENERATE["✍️ Content Generation"]
        E1["buildOutline.ts\n7-slide structure\nHook, Fit, Proof x2, Style, Value, CTA"]
        E2["writeSlides.ts\npolished copy per slide\ntitle max 9w, body max 30w, bullets max 3"]
    end

    %% RENDER
    subgraph RENDER["🎨 Render"]
        F1["renderSlides.tsx\nReact + inline CSS\nper-slide HTML at 1080x1080"]
    end

    %% EXPORT
    subgraph EXPORT["📦 Export"]
        G1["exportPng.ts\nPuppeteer\nslide_0N.png"]
        G2["exportPdf.ts\npdf-lib\nlinkedin_carousel.pdf"]
        G3["exportPptx.ts\npptxgenjs\nlinkedin_carousel.pptx\n-- export canva"]
        G4["exportSvg.ts\nSVG builder\nfigma_export/slide_0N.svg\n-- export figma"]
        G5["packageOutputs.ts\ncarousel.json\nlinkedin_caption.txt\ncarousel_manifest.json"]
    end

    %% OUTPUTS
    subgraph OUT_LINKEDIN["📱 LinkedIn"]
        H1["linkedin_carousel.pdf\nUpload as Document post"]
        H2["slide_0N.png\n1080x1080 per slide"]
        H3["linkedin_caption.txt\n3 caption variants + hashtags"]
    end

    subgraph OUT_CANVA["🎨 Canva"]
        H4["linkedin_carousel.pptx\nImport into Canva\nAll text and shapes editable"]
    end

    subgraph OUT_FIGMA["🖌️ Figma"]
        H5["figma_export/slide_0N.svg\nDrag onto Figma canvas\nLive text, vector shapes"]
    end

    subgraph OUT_DATA["🗂️ Data"]
        H6["carousel.json\nFull structured document"]
        H7["carousel_manifest.json\nScores, gaps, highlights"]
    end

    %% EDGES
    A1 & A2 & A3 --> B1 & B2
    B1 & B2       --> C1 & C2
    C1 & C2       --> D1
    D1            --> D2 --> D3
    D3            --> E1 --> E2
    E2            --> F1
    F1            --> G1 & G2
    E2            --> G3 & G4 & G5
    G1            --> H2
    G2            --> H1
    G3            --> H4
    G4            --> H5
    G5            --> H3 & H6 & H7

    %% STYLES
    classDef inputNode    fill:#EEF2FF,stroke:#6366F1,color:#1e1b4b
    classDef activateNode fill:#F5F3FF,stroke:#7C3AED,color:#2e1065
    classDef coreNode     fill:#F0F9FF,stroke:#0EA5E9,color:#0c4a6e
    classDef exportNode   fill:#F0FDF4,stroke:#22C55E,color:#14532d
    classDef outNode      fill:#FFF7ED,stroke:#F97316,color:#7c2d12

    class A1,A2,A3 inputNode
    class B1,B2 activateNode
    class C1,C2,D1,D2,D3,E1,E2,F1 coreNode
    class G1,G2,G3,G4,G5 exportNode
    class H1,H2,H3,H4,H5,H6,H7 outNode
```

**Quick start:**

```bash
npm install

npx ts-node src/job-carousel/index.ts \
  --resume ./inputs/my_resume.txt \
  --jd ./inputs/target_jd.txt
```

**What it generates:**
- `linkedin_carousel.pdf` — upload-ready multi-page PDF
- `linkedin_carousel.pptx` — Canva-ready PPTX (`--export canva`)
- `slides_preview/slide_0N.png` — individual 1080×1080 PNGs
- `figma_export/slide_0N.svg` — Figma-ready SVGs (`--export figma`)
- `linkedin_caption.txt` — 3 caption variants with hashtags
- `carousel.json` — full structured output
- `carousel_manifest.json` — metadata and scores

**Options:**
```
--mode           recruiter | hiring-manager | personal-brand  (default: auto)
--theme          clean | dark | bold                          (default: clean)
--slides         6 | 7 | 8 | 9 | 10                         (default: 7)
--output         <path>                                       (default: output/job-carousel)
--export         canva,figma                                  (optional additional exports)
--no-render                                                   (skip PNG/PDF, JSON only)
--timeline                                                    (add visual career trajectory slide)
--show-education auto | always | never                        (default: auto)
```

**Export to Canva or Figma:**

```bash
# Generate PPTX for Canva import
npx ts-node src/job-carousel/index.ts \
  --resume ./inputs/my_resume.txt \
  --jd ./inputs/target_jd.txt \
  --export canva

# Generate SVGs for Figma import
npx ts-node src/job-carousel/index.ts \
  --resume ./inputs/my_resume.txt \
  --jd ./inputs/target_jd.txt \
  --export figma

# Generate both at once
npx ts-node src/job-carousel/index.ts \
  --resume ./inputs/my_resume.txt \
  --jd ./inputs/target_jd.txt \
  --export canva,figma
```

- **Canva** — imports `linkedin_carousel.pptx` as a fully editable presentation
- **Figma** — drag `figma_export/slide_*.svg` onto any Figma canvas; each slide becomes a 1080×1080 editable frame

See `docs/job-carousel.md` for the full usage guide.

## Requirements

- Node.js 18+
- `npm install` to install dependencies
- Puppeteer downloads Chromium automatically (required for PNG/PDF export)

## Project Structure

```
.claude/skills/job-carousel/   Claude skill entrypoint (SKILL.md)
src/job-carousel/              TypeScript pipeline
  schema/                      Zod types
  parse/                       Resume + JD parsers
  analysis/                    Fit analysis, ranking, narrative
  generation/                  Outline builder + slide writer
  render/                      React templates + HTML renderer
  export/                      PNG, PDF, PPTX, SVG + package writer
  utils/                       Text, scoring, validation utilities
docs/                          Usage guides
output/job-carousel/           Generated output (gitignored)
```