--- name: lume-pdf-export description: > Use esta skill quando precisar exportar uma aula Lume (o index.html da unidade SCORM, montado em React) para um PDF A4 pronto para impressão ou salvamento. O desafio central é que a versão web esconde conteúdo dentro de componentes interativos — sliders, flashcards, accordions, quiz, glossário, referências — e embute vídeos/áudios que não rodam em PDF. Esta skill ensina a IA a gerar um "modo PDF" que revela TODO o conteúdo oculto, adapta o layout fluido ao formato A4 e substitui mídias embutidas por um quadro estático com o link do recurso logo abaixo. Vale para Claude, GPT, Gemini ou qualquer agente que produza o artefato Lume. lang: pt-BR --- # Lume — Skill de Exportação para PDF A4 > **O que esta skill resolve** > A aula Lume na web é *interativa*: o aluno clica, vira cards, abre seções, dá > play em vídeos. No papel nada disso acontece. Se você simplesmente mandar > imprimir o `index.html`, **perde conteúdo** — só o primeiro flashcard aparece, > os accordions ficam fechados, o slider mostra um passo só, o gabarito do quiz > some e os vídeos viram retângulos pretos. Esta skill descreve o **Modo PDF** > do Lume: um caminho de renderização que expande tudo, achata a interação em > leitura linear e formata o resultado em páginas A4. > **Princípio único** > No PDF, **nenhum conteúdo pode ficar escondido atrás de um clique.** Tudo o > que a interação revelaria — todas as faces, todos os slides, todas as > respostas, todas as definições — precisa estar visível e impresso. Mídia que > não toca no papel vira um quadro estático **com o link do recurso logo abaixo**. --- ## 1. Como acionar o Modo PDF O Modo PDF é uma **variação de renderização do mesmo `index.html`** — não um arquivo paralelo que pode ficar desatualizado. Acione-o por *query param* na URL: ``` index.html → versão web interativa (padrão) index.html?pdf=1 → versão expandida para impressão A4 ``` No script de montagem do `index.html`, leia o flag e propague-o: ```jsx const isPDF = new URLSearchParams(location.search).has("pdf"); if (isPDF) document.documentElement.setAttribute("data-pdf", ""); const root = ReactDOM.createRoot(document.getElementById("app")); root.render(); ``` Distribua o flag por um **contexto** (assim nenhum componente precisa receber prop manualmente): ```jsx const PDFContext = React.createContext(false); const usePDF = () => React.useContext(PDFContext); function LessonContent({ pdf = false }) { return ( {/* … toda a aula … */} ); } // exponha: Object.assign(window, { PDFContext, usePDF }); ``` Cada componente interativo passa a ter dois ramos: `if (usePDF()) return `. As seções 4 e 5 dão a receita de papel de cada um. > **Atributo no ``:** o `data-pdf` no elemento raiz liga a folha de estilo > de impressão (seção 3) sem depender de `@media print` — útil para conferir o > resultado na tela antes de gerar o PDF. --- ## 2. Fluxo de geração do PDF (passo a passo para o agente) 1. **Garanta o Modo PDF nos componentes.** Se o kit ainda não tem os ramos `usePDF()`, adicione-os seguindo as seções 4–5. Sem isso, flashcards e slider continuam mostrando um item só. 2. **Inclua a folha `lume-pdf.css`** (seção 3) no `` do `index.html`, depois de `colors_and_type.css`. 3. **Abra `index.html?pdf=1`** e confira na tela: tudo expandido, sem barra de topo, sem botões, vídeos/áudios como quadro + link. 4. **Gere o PDF** com a ação *Salvar como PDF* / imprimir, em **tamanho A4, margens padrão e "Gráficos de plano de fundo" ATIVADO** (senão as faixas coloridas e marca-textos somem). 5. **Confira o resultado:** nada cortado no meio de um bloco, nenhum link de recurso faltando, gabarito do quiz presente, glossário legível. > Para o agente: a versão para imprimir é sempre `index.html?pdf=1`. Ao usar a > ação de salvar/imprimir PDF, aponte para esse endereço, não para o > `index.html` cru. --- ## 3. Folha de estilo A4 — `lume-pdf.css` Cria a página A4, esconde a navegação, controla quebras e neutraliza efeitos que não imprimem bem. Aplica-se tanto via `html[data-pdf]` (preview na tela) quanto via `@media print` (no momento de gerar o PDF). ```css /* ───────── Página A4 ───────── */ @page { size: A4; /* 210 × 297 mm */ margin: 16mm 15mm 18mm; /* topo/laterais/base — respiro editorial */ } html[data-pdf], html[data-pdf] body { background: #fff; } /* O bloco de regras vale na tela (data-pdf) E na impressão (print). */ html[data-pdf] { /* 1 ─ Esconder o chrome que não pertence ao papel */ --pdf-hide: none; } html[data-pdf] .lume-topbar, html[data-pdf] .lume-progressbar, html[data-pdf] [data-pdf-hide], @media print { .lume-topbar, .lume-progressbar, [data-pdf-hide] { display: none !important; } } @media print { /* 2 ─ Largura: solta a medida de leitura de 68ch para ocupar o A4 */ :root { --measure: 100%; --page-pad: 0; } /* 3 ─ Tipografia de papel: corpo em 10.5–11pt, títulos proporcionais */ html, body { font-size: 11pt; line-height: 1.5; } /* 4 ─ Imprimir as cores de fundo e os marca-textos */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* 5 ─ Faixas full-bleed: tirar o sangramento e dar respiro vertical menor */ .lume-fullbleed { padding: 18px 0 !important; } /* 6 ─ Controle de quebra de página Nunca partir um bloco didático, uma figura, um card, uma citação. */ figure, aside, blockquote, table, .lume-card, .lume-destaque, .lume-atencao, .lume-reflexao, .lume-citacao, .lume-flashcard-print, .lume-step-print, .lume-quiz-q, .lume-video-print, .lume-audio-print { break-inside: avoid; page-break-inside: avoid; } /* Título nunca fica órfão no fim da página */ h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; } /* Não deixar viúvas/órfãs em prosa */ p, li { orphans: 3; widows: 3; } /* 7 ─ Sombras e blur não imprimem — remover para não virar cinza sujo */ * { box-shadow: none !important; backdrop-filter: none !important; } /* devolve uma hairline a quem dependia só da sombra para separar */ .lume-card, .lume-destaque, .lume-reflexao, .lume-video-print, .lume-audio-print, .lume-flashcard-print { border: 1px solid var(--rule) !important; } /* 8 ─ Quebra de seção opcional: comece o fechamento em página nova */ .lume-pagebreak-before { break-before: page; page-break-before: always; } /* 9 ─ Links: o href já aparece como legenda (ver RecursoLink); não usar o truque content:" (url)" para não duplicar. */ a { color: var(--ink); text-decoration-color: var(--rule-strong); } } ``` > **Marque o chrome.** Para a regra 1 funcionar, dê à `TopBar` a classe > `lume-topbar` e à `ProgressBar` a classe `lume-progressbar`. Qualquer outro > elemento de tela que não deva imprimir recebe `data-pdf-hide`. > **Faixas coloridas.** Dê a classe `lume-fullbleed` ao `
` do > `FullBleedSection`. As faixas **suaves** (sage, lavender, coral…) imprimem bem > e devem ser mantidas — elas são a assinatura do Lume. As faixas **escuras** > (ink, petrol, terracotta) gastam muito toner; é aceitável mantê-las (com > *background graphics* ligado) ou, se o usuário pedir economia, convertê-las > para fundo claro com texto escuro. --- ## 4. Receita de papel — componentes que ESCONDEM conteúdo Para cada componente interativo, o Modo PDF troca a interação por uma forma estática que mostra **tudo de uma vez**. Tabela-resumo: | Componente | Na web esconde… | No PDF deve mostrar… | |---|---|---| | `Slider` | todos os slides menos o atual | **todos os slides empilhados**, com marcador ou ícone preservado | | `FlashCardDeck` / `FlashCard` | só a frente do card atual | **todos os cards**, frente **e** verso lado a lado | | `Accordion` | corpo de cada item (fechado) | **todos os itens abertos**, pergunta + resposta | | `Quiz` | gabarito e explicações | enunciado, alternativas, **resposta correta marcada + explicação** | | `Termo` (glossário) | a definição (no popover) | termo + **definição visível** (nota ou glossário final) | | `ReferenciasABNT` | a lista (recolhida) | **lista aberta**, completa | ### 4.1 `Slider` → slides empilhados A web mostra um slide por vez num carrossel. No papel, renderize a lista inteira como blocos verticais. Preserve o título livre do componente e o marcador textual ou ícone Font Awesome de cada slide. ```jsx function Slider({ steps = [], label = "Passo a passo" }) { if (usePDF()) { return (
{label &&
{label}
}
    {steps.map((s, idx) => (
  1. {s.icon ? : (s.marker || String(idx + 1).padStart(2, "0"))}

    {s.title}

    {s.body}

    2. ))}
); } /* … render web interativo original … */ } ``` ### 4.2 `FlashCardDeck` → grade de cartões com frente e verso **Por que CSS sozinho não basta:** o `FlashCardDeck` só monta o card atual (``). Os outros nem existem no DOM — então é preciso renderizar a partir dos dados, não tentar "desvirar" com CSS. No PDF, percorra `cards` e mostre cada um como uma linha **Pergunta → Resposta**: ```jsx function FlashCardDeck({ cards = [], tones = [] }) { if (usePDF()) { return (
Flashcards
{cards.map((c, i) => (
Pergunta
{c.front}
Resposta
{c.back}
))}
); } /* … render web interativo original … */ } ``` ### 4.3 `Accordion` → tudo aberto Todos os itens já estão no DOM; basta renderizar o corpo aberto e sem o mecanismo de clique. ```jsx function Accordion({ items = [] }) { if (usePDF()) { return (
{items.map((it, idx) => (
{String(idx + 1).padStart(2, "0")}
{it.q}
{it.a}
))}
); } /* … render web interativo original … */ } ``` ### 4.4 `Quiz` → enunciado + gabarito + explicação No papel mostre cada questão com a alternativa correta destacada (✓) e a explicação sempre visível. **Decisão do usuário:** se o PDF for um material de estudo, mostre o gabarito (padrão). Se for uma prova em branco para aplicar, passe `pdfGabarito={false}` e apenas liste as alternativas sem marcar a correta. ```jsx function Quiz({ title = "Quiz", intro, questions = [], pdfGabarito = true }) { if (usePDF()) { return (
{title}
{intro &&

{intro}

}
    {questions.map((q, qi) => (
  1. {qi + 1} {q.q}
      {q.options.map((opt, oi) => { const correct = pdfGabarito && oi === q.answer; return (
    • {correct ? "✓" : String.fromCharCode(97 + oi) + ")"} {opt}
      • ); })}
    {pdfGabarito && q.explanation && (

    {q.explanation}

    )}
    2. ))}
); } /* … render web interativo original … */ } ``` ### 4.5 `Termo` (glossário) → definição visível O popover não existe no papel. Mantenha o termo com o sublinhado pontilhado para o leitor saber que é um termo-chave, e **revele a definição**. Duas estratégias — escolha uma e seja consistente na aula inteira: - **(a) Nota inline** (recomendada — preserva o contexto): logo após o termo, em texto pequeno e discreto. - **(b) Glossário no fim** da aula: o termo recebe um número e a definição vai para uma lista "Glossário" antes das Referências. Receita da nota inline: ```jsx function Termo({ children, def, termo }) { if (usePDF()) { return ( {children} — {def} ); } /* … render web interativo (popover) original … */ } ``` ### 4.6 `ReferenciasABNT` → lista aberta Force `defaultOpen` no Modo PDF (ou renderize a `
    ` sem o mecanismo de recolher). Comece em página nova se quiser separar o fechamento: ```jsx function ReferenciasABNT({ title = "Referências", items = [] }) { if (usePDF()) { return (

    {title}

      {items.map((r, i) => (
    1. ))}
    ); } /* … render recolhível original … */ } ``` --- ## 5. Receita de papel — MÍDIA que não roda no PDF Vídeos e áudios embutidos viram um retângulo morto no papel. A regra do Lume: **mostre um quadro estático identificável e, logo abaixo, o link do recurso de forma sutil** — assim quem está lendo no papel (ou num PDF sem internet) consegue digitar/escanear o endereço e acessar. ### 5.1 Componente auxiliar — `RecursoLink` Uma legenda discreta, abaixo do elemento, com rótulo, ícone de link e a URL completa em fonte monoespaçada (fácil de transcrever). Use em **todo** vídeo e áudio externo. ```jsx function RecursoLink({ rotulo = "Assista em", href }) { if (!href) return null; return (
    {rotulo}: {href}
    ); } ``` ### 5.2 `VideoYouTube` → pôster + link Monte a URL pública a partir do `id` (e do `start`, se houver). Mostre a miniatura do YouTube como quadro estático, com o ícone de play "morto" só para sinalizar que é vídeo. ```jsx function VideoYouTube({ id, title = "Vídeo", caption, credit, start }) { if (usePDF()) { const url = `https://youtu.be/${id}${start ? `?t=${start}` : ""}`; const thumb = `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`; return (
    {title} ▶
    {caption &&
    {caption}{credit && — {credit}}
    }
    ); } /* … render web interativo (iframe) original … */ } ``` ### 5.3 `AudioPodcast` → capa/card + link Cubra os dois modos do componente: - **Spotify** (`spotify` é URL ou URI): se vier URI `spotify:episode:ID`, converta para `https://open.spotify.com/episode/ID`; se já for URL, use direto. Mostre o cabeçalho (show + título + descrição) e o link. - **Arquivo nativo** (`src`): mostre o card do podcast e, abaixo, o caminho do arquivo. Se for um arquivo local (relativo), o "link" é informativo — rotule como `Áudio` em vez de `Ouça em`; se for uma URL absoluta, vira link real. ```jsx function AudioPodcast({ src, spotify, title, show, description }) { if (usePDF()) { let href = null, rotulo = "Ouça em"; if (spotify) { const m = spotify.match(/spotify:(episode|show|track|playlist):([A-Za-z0-9]+)/); href = m ? `https://open.spotify.com/${m[1]}/${m[2]}` : spotify; } else if (src) { href = src; if (!/^https?:\/\//.test(src)) rotulo = "Arquivo de áudio"; // caminho local } return (
    ♪
    {show || "Podcast"}
    {title &&
    {title}
    } {description &&

    {description}

    }
    ); } /* … render web interativo (iframe/player) original … */ } ``` > **Generalize a regra.** Qualquer `