---
name: transcricaoemateriaiscomplementares
description: >
  Pipeline completo e testado: recebe videos/links YouTube, transcreve com timestamps via Gemini,
  gera materiais complementares POR BLOCO (workbook interativo, checklist, resumo executivo — em JSON, HTML interativo e PDF),
  cria plataforma visual estilo Netflix (React + Tailwind) com thumbnails IA, video embed YouTube,
  navegacao prev/next, links/recursos, download PDF por bloco, e publica automaticamente.
  Detecta aula unica ou imersao multi-dia. Triggers on:
  "transcrever video", "material complementar", "transcrever aula",
  "transcrever imersao", "material da aula", "publicar aula",
  "transcrever e publicar", "material extra", "complementar",
  "transcrever youtube", "criar plataforma de aula", "extra mentoria".
argument-hint: "transcrever | material | publicar | completo | imersao"
allowed-tools:
  - Read
  - Write
  - Edit
  - Grep
  - Glob
  - Bash
  - Agent
  - WebFetch
  - Skill
  - mcp__nanobanana__generate_image
  - mcp__nanobanana__upload_file
---

# Transcricao e Materiais Complementares v2.0

Pipeline battle-tested: video/YouTube → transcricao → materiais POR BLOCO → plataforma Netflix → deploy.

Reference implementation: https://extra.mentoriaimperioia.com (9 aulas, 2 dias, ~10h)

## Quick Reference

| Comando | O que faz |
|---------|-----------|
| `transcrever` | Baixa + transcreve videos com timestamps |
| `material` | Gera workbook + checklist + resumo por bloco (JSON + PDF) |
| `publicar` | Cria plataforma Netflix e deploya na VPS |
| `completo` | Pipeline inteiro: transcrever → material → publicar |
| `imersao` | Modo multi-dia (2+ dias, blocos agrupados) |

## Deploy Target

- **Dominio:** `extra.mentoriaimperioia.com`
- **VPS:** root@76.13.175.161
- **Deploy dir:** `/var/www/apps/extra-mentoria/`
- **Nginx:** already configured with SSL (Let's Encrypt)
- **yt-dlp path:** `/Library/Frameworks/Python.framework/Versions/3.13/bin/yt-dlp`

## Project Structure (PROVEN)

```
~/extra-mentoria/
├── input/                        → Downloaded MP3s
├── temp/                         → Audio chunks + raw transcripts
├── transcricoes/                 → PERMANENT organized transcripts (NOT published)
│   ├── index.json
│   ├── dia1/bloco-01-slug.md
│   └── dia2/bloco-01-slug.md
├── content/                      → Material JSONs per block
│   ├── dia1-bloco01.json
│   └── dia2-bloco01.json
├── materiais/pdf/                → Generated PDFs per block
│   ├── dia1-bloco01.pdf
│   └── dia2-bloco01.pdf
├── plataforma/                   → React app
│   ├── src/
│   │   ├── App.jsx               → Netflix-style hub + block pages
│   │   ├── resources.js          → Aula titles, YouTube IDs, steps, links
│   │   ├── content/*.json        → Block material JSONs (dynamic import)
│   │   └── index.css             → Tailwind + animations
│   ├── public/thumbs/            → AI-generated thumbnails
│   └── dist/                     → Build output
├── scripts/
│   ├── transcribe-chunk.mjs      → Gemini transcription per chunk
│   ├── merge-transcripts.mjs     → Merge chunks into final transcript
│   ├── json-to-pdf.mjs           → JSON materials → styled PDF (Puppeteer)
│   └── generate-data.mjs         → Generate React data files
└── .env                          → GEMINI_API_KEY
```

---

## PHASE 1: Input Collection

### What to collect from user:
1. **Video links** (YouTube) or local files
2. **Type:** Aula unica or Imersao (multi-day)?
3. **Day/block grouping** (which videos belong to which day)
4. **Links/resources** per block (Drive links, Google Docs, ChatGPT GPTs, etc.)
5. **Tutorial URL** (optional — shown as "FACA ANTES DE COMECAR" banner before Day 1)
6. **Reference photos** for thumbnail generation (check ~/criativos-agent/assets/expert/)

### Download:
```bash
export PATH="/Library/Frameworks/Python.framework/Versions/3.13/bin:$PATH"
yt-dlp -x --audio-format mp3 --audio-quality 2 -o 'input/dia1-bloco-01.%(ext)s' 'YOUTUBE_URL'
```
- Run downloads in parallel (up to 4)
- Private videos need `--cookies-from-browser chrome` or must be changed to "unlisted"

---

## PHASE 2: Transcription

### Split + Transcribe (PARALLEL)
```bash
# Split into 20min chunks
ffmpeg -i input/file.mp3 -f segment -segment_time 1200 -c copy temp/prefix_chunk_%03d.mp3 -y

# Transcribe each chunk with Gemini 2.5 Flash
node scripts/transcribe-chunk.mjs temp/chunk.mp3 OFFSET_SECONDS temp/output.md
```
- Run ALL chunks in parallel (up to 13 tested successfully)
- Offset: 0, 1200, 2400, 3600... (20min increments)
- Script uses `@google/genai` with GEMINI_API_KEY from .env

### Merge + Save
- Concatenate chunk transcripts into final markdown per block
- Save to `transcricoes/diaX/bloco-XX-slug.md` (PERMANENT, not published)
- Update `transcricoes/index.json`

---

## PHASE 3: Material Generation PER BLOCK

### CRITICAL: Materials are PER BLOCK, not generic

For EACH block, launch an Agent to read that block's transcript and generate a JSON:

```json
{
  "workbook": {
    "title": "Workbook — [Promise-based title]",
    "modules": [{ "title": "", "concept": "", "exercises": [{"type":"fill","prompt":"","answer":""}], "reflection": "", "action": "" }]
  },
  "checklist": {
    "title": "Checklist — [Title]",
    "categories": [{ "name": "", "type": "quick|setup|create|strategy", "items": [{"text":"","result":""}] }]
  },
  "resumo": {
    "title": "Resumo — [Title]",
    "tldr": "", "insights": [{"title":"","text":""}], "quotes": [{"text":"","context":""}],
    "tools": [{"name":"","description":"","when":""}], "nextSteps": [""]
  }
}
```

- Save to `content/dia1-bloco01.json` AND copy to `plataforma/src/content/`
- Run 8+ agents in parallel (one per block)
- Generate PDF per block: `node scripts/json-to-pdf.mjs content/file.json materiais/pdf/file.pdf "Title"`
- PDFs use Puppeteer with Tata design system (Inter, violet, light theme)
- Run PDF generation sequentially (max 2-3 at a time, Puppeteer times out with 8 parallel)

---

## PHASE 4: Thumbnail Generation

Use `mcp__nanobanana__generate_image` with Gemini Pro for each block + hero:

- **Aspect ratio:** 16:9
- **Reference photo:** `~/criativos-agent/assets/expert/foto1.png` (or foto2, foto3 — rotate)
- **Model:** `pro` for best quality
- **Output:** `plataforma/public/thumbs/aula-XX.png` and `hero-imersao.png`
- Each thumb should reflect the TOPIC of that block (not generic)
- Negative prompt: "text, watermark, logo, low quality, blurry"

### IMPORTANT: Match thumb to content
- AI/coding lesson → woman at computer with code on screen
- Persona/strategy → holographic displays, analytical setting
- Creative/social → studio with Instagram posts floating
- Sales page → laptop showing page being built
- Deploy/tech → server room, publish button
- Pitch/selling → stage with audience
- Ads/traffic → dashboard with metrics going up

---

## PHASE 5: Platform (React — Netflix Style)

### Architecture: Static React app (NO backend)
- React 19 + Vite 6 + Tailwind 4
- Dynamic JSON import per block (code-splitting)
- localStorage for progress persistence

### resources.js — Central data file
Contains for each block: title (PROMISE-BASED), subtitle, duration, youtubeId, dataFile, steps[], resources[]

### NAMING RULES — NEVER use technical names
BAD: "CLAUDE.md Builder", "Persona Profunda", "Sexy Canvas + Remotion"
GOOD: "Ensine a IA Quem Voce E", "Descubra Seu Cliente Ideal Com 30 Camadas", "30 Copies + Videos Prontos em Minutos"

### Hub Page:
- Hero with AI-generated background image + gradient overlay
- Stats bar (aulas, horas, PDFs, dias)
- Day selector tabs with description
- Tutorial banner (amber, "FACA ANTES DE COMECAR") before Day 1 aulas — links to tutorialUrl
- Netflix-style lesson cards with: thumbnail, hover zoom+play, aula badge, duration badge, promise title, subtitle

### Block Page (opened lesson):
- **Sticky top nav:** Anterior / Todas as Aulas / Proximo + PDF download button + counter (1/9)
- **Title** (promise-based) + subtitle + duration
- **YouTube embed** (16:9 responsive)
- **Pill tabs:** Passo a Passo | Workbook | Checklist | Resumo
- **Tab content:** interactive (checkboxes save to localStorage, inputs save, accordions)
- **Bottom nav:** Large prev/next cards with title + day + duration
- Transcription is NOT shown (saved locally only)

### Interactive Material Components (rendered from JSON):
- **WorkbookSection:** Accordion modules, fill-in inputs, reflection textarea, action textarea — all save to localStorage
- **ChecklistSection:** Categories with items, checkboxes, progress bar, "RAPIDO" badge for quick type
- **ResumoSection:** TL;DR card (violet gradient), expandable insights, blockquote quotes, tool cards grid, next steps

### Per-block resources:
- Steps with checkboxes (localStorage progress)
- Resource badges (Drive, Google Doc, ChatGPT GPT, external links)

---

## PHASE 6: Build & Deploy

```bash
cd ~/extra-mentoria/plataforma
npm run build
mkdir -p dist/materiais dist/thumbs
cp ~/extra-mentoria/materiais/pdf/*.pdf dist/materiais/
cp public/thumbs/*.png dist/thumbs/
scp -r dist/* root@76.13.175.161:/var/www/apps/extra-mentoria/
```

Nginx + SSL already configured for extra.mentoriaimperioia.com.

---

## Decision Tree

```
User envia videos/links
├── Detectar: aula unica ou imersao?
├── Baixar audios em paralelo
├── Splittar em chunks de 20min
├── Transcrever TODOS os chunks em paralelo (Gemini Flash)
├── Merge transcricoes por bloco → salvar em transcricoes/
├── Para CADA bloco (paralelo):
│   ├── Gerar JSON de materiais (workbook + checklist + resumo)
│   ├── Gerar PDF do bloco
│   └── Gerar thumbnail com NanoBanana
├── Montar resources.js com:
│   ├── Titulos com PROMESSA (nao tecnicos)
│   ├── YouTube IDs para embed
│   ├── Steps + links/recursos por bloco
│   └── Tutorial URL (se fornecido)
├── Build React app
├── Deploy na VPS
└── Mostrar URL final
```

## Content Validation Checklist

Before deploying, verify each block:
- [ ] Titulo reflete a PROMESSA da aula (nao termos tecnicos)
- [ ] YouTube ID correto
- [ ] Materiais JSON refletem o conteudo REAL (ler transcricao)
- [ ] Thumb gerada com cenario que combina com o tema
- [ ] Steps/links estao corretos
- [ ] PDF gerado e acessivel em /materiais/filename.pdf

## Skills Orchestrated

| Skill | When |
|-------|------|
| `youtube-downloader` | Download YouTube videos (yt-dlp) |
| `editordevideos` | Audio extraction (ffmpeg) |
| `copy-estrategica` | Analyze content for copy insights |
| `pdf` | Generate styled PDFs (Puppeteer) |
| `skill-deploy-vps` | Deploy to VPS |
| `frontend-design` | React platform design |
| `ui-ux-pro-max` | Design decisions, palettes, typography |
| `mcp__nanobanana__generate_image` | AI thumbnails (Gemini Pro, 16:9, reference photo) |
