Skill: deck do Mira em modo offline (à prova de firewall)
Torna um deck já montado 100% self-contained: nenhuma lib que ele puxa de CDN
é buscada em runtime. Passa a abrir por file:// mesmo numa rede corporativa que
bloqueia unpkg.com, cdn.tailwindcss.com ou fonts.googleapis.com.
Copia, não baixa. As libs já vieram no pacote npm (mira-templates/vendor/,
que a empresa costuma liberar) e são apenas copiadas. É de propósito: o aluno pode
estar atrás do firewall enquanto constrói o deck, e baixar das CDNs falharia
justamente quando é mais necessário.
O que é localizado
Copiado de mira-templates/vendor/ para <deck>/assets/vendor/ e religado nos HTMLs:
| De (CDN, bloqueável) |
Para (local, relativo) |
cdn.tailwindcss.com |
assets/vendor/tailwind.js |
unpkg.com/aos@2.3.1/... |
assets/vendor/aos.css · aos.js |
unpkg.com/lucide@... |
assets/vendor/lucide.js |
d3js.org/d3.v7.min.js |
assets/vendor/d3.v7.min.js |
fonts.googleapis.com/...Inter... |
assets/vendor/inter.css (+ fonts/*.woff2) |
unpkg.com/three@.../build/... + examples/jsm/ |
assets/vendor/three/ (só em decks 3D) |
Os <link rel="preconnect"> para fonts.googleapis.com/fonts.gstatic.com são
removidos (externos e inúteis offline). Todos os HTMLs do deck são reescritos,
não só o index.html.
Three.js (mira-3d): o importmap é reescrito para caminhos locais e a pasta
three/ (core + OrbitControls + GLTFLoader + dep transitiva) é copiada para
assets/vendor/three/, só quando o deck usa 3D (são ~1,4 MB; decks sem 3D não
levam esse peso). Os import 'three' / import 'three/addons/...' seguem como bare
specifiers, resolvidos pelo importmap local. Se um deck 3D usar um addon além de
OrbitControls/GLTFLoader, ele não estará no bundle: a skill avisa.
O que NÃO é localizado (e por quê)
- GSAP (skills de morph): já é vendorado por-deck em
assets/gsap/. A skill só
confere e avisa se achar GSAP por CDN.
Como rodar
O trabalho é determinístico. Rode na raiz do projeto apontando para a pasta do deck:
node mira-templates/vendor/apply-offline.mjs decks/<nome-do-deck>
É idempotente: rodar de novo não duplica nem estraga (URLs já locais não casam
com os padrões de CDN). Se o deck reintroduzir uma CDN após edição, rode de novo.
Passos
- Identificar o deck. Confirme a pasta em
decks/<nome>/. Se o usuário não disse
qual, liste os decks e pergunte. Deck novo: monte pelo pipeline primeiro e rode esta
skill por último.
- Conferir o bundle. Garanta que
mira-templates/vendor/ existe (veio na
instalação). Se faltar, o projeto foi instalado por versão antiga do Mira — peça
npx mira-animator update antes.
- Rodar o script
node mira-templates/vendor/apply-offline.mjs decks/<nome>.
- Ler o relatório. Diz, por HTML, quantos recursos foram localizados e lista
avisos (Three.js, GSAP ou URL externa remanescente).
- Tratar os avisos. Se avisar Three.js, explique que o 3D não fica offline por
aqui (opções acima). Se sobrar outra URL externa, mostre-a.
- Reportar. Caminhos reescritos, que o deck agora abre por
file:// sem rede, e
o tamanho aproximado adicionado (~1,3 MB de libs em assets/vendor/).
Verificação (faça, não presuma)
- Abra o
index.html e confirme no <head> que nenhuma src/href começa com
http:// ou https:// (exceto Three.js avisado, se houver).
- Ideal: abrir por
file:// com a rede desligada (ou DevTools > Network > Offline)
e ver tudo carregar — fonte Inter aplicada, ícones Lucide renderizados, animações
AOS/D3 rodando.
Checklist
1---2name: mira-offline3description: Converte um deck do Mira já criado para modo OFFLINE (self-contained, sem CDN em runtime), para abrir por file:// mesmo atrás do firewall corporativo que bloqueia as CDNs (Tailwind, AOS, Lucide, D3, fonte Inter e Three.js dos slides 3D). Use SEMPRE que o usuário disser /mira-offline, deixa o deck offline, deixa o slide self-contained, o firewall da empresa está bloqueando o slide, funciona sem internet, tira as CDN, baixa as bibliotecas pro deck, ou o aluno não consegue abrir o slide na empresa. Rode por último, depois do deck pronto.4---56# Skill: deck do Mira em modo offline (à prova de firewall)78Torna um deck já montado **100% self-contained**: nenhuma lib que ele puxa de CDN9é buscada em runtime. Passa a abrir por `file://` mesmo numa rede corporativa que10bloqueia `unpkg.com`, `cdn.tailwindcss.com` ou `fonts.googleapis.com`.1112> **Copia, não baixa.** As libs já vieram no pacote npm (`mira-templates/vendor/`,13> que a empresa costuma liberar) e são apenas copiadas. É de propósito: o aluno pode14> estar atrás do firewall *enquanto* constrói o deck, e baixar das CDNs falharia15> justamente quando é mais necessário.1617## O que é localizado1819Copiado de `mira-templates/vendor/` para `<deck>/assets/vendor/` e religado nos HTMLs:2021| De (CDN, bloqueável) | Para (local, relativo) |22|---|---|23| `cdn.tailwindcss.com` | `assets/vendor/tailwind.js` |24| `unpkg.com/aos@2.3.1/...` | `assets/vendor/aos.css` · `aos.js` |25| `unpkg.com/lucide@...` | `assets/vendor/lucide.js` |26| `d3js.org/d3.v7.min.js` | `assets/vendor/d3.v7.min.js` |27| `fonts.googleapis.com/...Inter...` | `assets/vendor/inter.css` (+ `fonts/*.woff2`) |28| `unpkg.com/three@.../build/...` + `examples/jsm/` | `assets/vendor/three/` (só em decks 3D) |2930Os `<link rel="preconnect">` para `fonts.googleapis.com`/`fonts.gstatic.com` são31removidos (externos e inúteis offline). **Todos** os HTMLs do deck são reescritos,32não só o `index.html`.3334**Three.js (mira-3d):** o importmap é reescrito para caminhos locais e a pasta35`three/` (core + `OrbitControls` + `GLTFLoader` + dep transitiva) é copiada para36`assets/vendor/three/`, **só quando** o deck usa 3D (são ~1,4 MB; decks sem 3D não37levam esse peso). Os `import 'three'` / `import 'three/addons/...'` seguem como bare38specifiers, resolvidos pelo importmap local. Se um deck 3D usar um addon **além** de39OrbitControls/GLTFLoader, ele não estará no bundle: a skill avisa.4041## O que NÃO é localizado (e por quê)4243- **GSAP** (skills de morph): já é vendorado por-deck em `assets/gsap/`. A skill só44 confere e avisa se achar GSAP por CDN.4546## Como rodar4748O trabalho é determinístico. Rode na raiz do projeto apontando para a pasta do deck:4950```bash51node mira-templates/vendor/apply-offline.mjs decks/<nome-do-deck>52```5354É **idempotente**: rodar de novo não duplica nem estraga (URLs já locais não casam55com os padrões de CDN). Se o deck reintroduzir uma CDN após edição, rode de novo.5657## Passos58591. **Identificar o deck.** Confirme a pasta em `decks/<nome>/`. Se o usuário não disse60 qual, liste os decks e pergunte. Deck novo: monte pelo pipeline primeiro e rode esta61 skill **por último**.622. **Conferir o bundle.** Garanta que `mira-templates/vendor/` existe (veio na63 instalação). Se faltar, o projeto foi instalado por versão antiga do Mira — peça64 `npx mira-animator update` antes.653. **Rodar o script** `node mira-templates/vendor/apply-offline.mjs decks/<nome>`.664. **Ler o relatório.** Diz, por HTML, quantos recursos foram localizados e lista67 avisos (Three.js, GSAP ou URL externa remanescente).685. **Tratar os avisos.** Se avisar Three.js, explique que o 3D não fica offline por69 aqui (opções acima). Se sobrar outra URL externa, mostre-a.706. **Reportar.** Caminhos reescritos, que o deck agora abre por `file://` sem rede, e71 o tamanho aproximado adicionado (~1,3 MB de libs em `assets/vendor/`).7273## Verificação (faça, não presuma)7475- Abra o `index.html` e confirme no `<head>` que **nenhuma** `src`/`href` começa com76 `http://` ou `https://` (exceto Three.js avisado, se houver).77- Ideal: abrir por `file://` **com a rede desligada** (ou DevTools > Network > Offline)78 e ver tudo carregar — fonte Inter aplicada, ícones Lucide renderizados, animações79 AOS/D3 rodando.8081## Checklist8283- [ ] Rodou o script; não editou HTML na mão (a reescrita é determinística).84- [ ] `assets/vendor/` populado (tailwind, aos css+js, lucide, d3, inter.css, fonts/).85- [ ] **Todos** os HTMLs do deck reescritos (index + variantes 1x1/9x16/thirds/dissolve).86- [ ] Nenhuma `src`/`href` http(s) remanescente nos HTMLs conhecidos.87- [ ] `preconnect` de fonts removidos.88- [ ] Three.js (se deck 3D): importmap reescrito e `assets/vendor/three/` copiado; addon fora do par OrbitControls/GLTFLoader é avisado, não dado como offline.89- [ ] GSAP de morph: confirmado já local em `assets/gsap/` (não duplicado).90- [ ] Nada foi baixado da internet durante a operação (à prova de firewall).91- [ ] Nenhum travessão (—); acentuação UTF-8 correta (segue `agents/_shared/idioma.md`).
sandeco