pswex-design-system 7.0.0

package/LICENSE.md

@@ -0,0 +1,16 @@
+# Licença
+
+PSWEX Tecnologia, CNPJ 28.477.119/0001-79.
+
+**Os tokens, o CSS, os componentes e a documentação** deste pacote podem ser usados
+livremente por quem constrói para a PSWEX ou para a UPro: agência, fornecedor,
+freelancer ou agente de IA contratado para isso.
+
+**A marca, o nome, os ícones e a arte de fundo** continuam sendo propriedade da PSWEX
+Tecnologia e não podem ser usados para identificar outra empresa nem em peça que não
+seja da PSWEX ou da UPro.
+
+**A fonte Gilroy não acompanha este pacote.** O CSS declara a família, o arquivo da
+fonte é licenciado e precisa ser obtido de quem licencia.
+
+Atualizado em 22/09/2026.

package/README.md

@@ -0,0 +1,67 @@
+# Design system da PSWEX, como skill
+
+Uma pasta só que serve Claude, Codex e ChatGPT. Versão 7.0.0, gerada
+do contrato em 22/09/2026.
+
+## O que tem dentro
+
+```
+SKILL.md              as regras que valem sempre, leia primeiro
+references/
+  cor.md              as quatro famílias, 47 tokens, escala tipográfica
+  componentes.md      os 36 componentes com props e exemplo
+  icones.md           os 72 ícones e para que serve cada um
+  fundos.md           a arte de fundo, a regra de escala e os 6 temas
+  classes.md          o vocabulário de classe do CSS
+  voz.md              como escrever o texto que vai dentro da peça
+assets/
+  pswex.tokens.json   padrão DTCG do W3C
+  figma-variables.json coleções, modos, escopos e code syntax
+  tokens.css          as mesmas variáveis em CSS
+  manifesto.json      os componentes em JSON, para a máquina ler
+  catalogo-icones.json
+  styles.css          o CSS de produção inteiro
+  PROMPT-FIGMA.md     pedido pronto para o agente do Figma
+```
+
+## Instalar
+
+```
+npx pswex-design-system
+```
+
+Detecta Claude Code, Codex e Copilot CLI nesta máquina e instala em cada um.
+`--local` instala dentro do projeto em vez do seu diretório de usuário,
+`--onde` só mostra onde instalaria sem escrever nada.
+
+## Instalar à mão
+
+**Claude Code e claude.ai**
+
+```
+~/.claude/skills/pswex-design-system
+```
+
+**Codex**
+
+```
+~/.codex/skills/pswex-design-system
+```
+
+Nos dois, um link simbólico para esta pasta faz a skill acompanhar o `git pull`.
+
+**ChatGPT**
+
+Não existe formato de skill. Num GPT personalizado, cole o conteúdo de `SKILL.md`
+em Instructions e suba `references/` e `assets/` em Knowledge. Num projeto, o mesmo:
+`SKILL.md` nas instruções do projeto e o resto como arquivo.
+
+## Regerar
+
+A skill é derivada do contrato, nunca editada à mão. De dentro de `design-system/`:
+
+```
+python3 gerar-contrato.py && python3 gerar-docs-contrato.py && python3 gerar-skill.py
+```
+
+Rode depois de qualquer mudança em `site/assets/pswex.css` ou em `design-system/src/`.

package/bin/instalar.mjs

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+/**
+ * Instala a skill do design system da PSWEX nos agentes desta máquina.
+ *
+ *   npx pswex-design-system            instala em ~/.claude, ~/.codex, ~/.copilot
+ *   npx pswex-design-system --local    instala em ./.claude/skills, no projeto
+ *   npx pswex-design-system --onde     só mostra onde instalaria, não escreve
+ *
+ * Sem dependência: só o que vem no Node.
+ */
+import { cp, mkdir, readdir, rm, stat } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const NOME = 'pswex-design-system';
+const ORIGEM = join(dirname(fileURLToPath(import.meta.url)), '..', 'skill');
+const args = new Set(process.argv.slice(2));
+const local = args.has('--local');
+const seco = args.has('--onde') || args.has('--dry-run');
+
+const AGENTES = [
+  ['Claude Code', '.claude'],
+  ['Codex', '.codex'],
+  ['Copilot CLI', '.copilot'],
+];
+
+const base = local ? process.cwd() : homedir();
+const alvos = AGENTES
+  .map(([rotulo, dir]) => ({ rotulo, dir, destino: join(base, dir, 'skills', NOME) }))
+  .filter(a => local || existsSync(join(homedir(), a.dir)));
+
+console.log(`\n  Design system da PSWEX, skill ${process.env.npm_package_version || ''}`.trimEnd());
+console.log(`  origem: ${ORIGEM}\n`);
+
+if (!alvos.length) {
+  console.log('  Nenhum agente encontrado nesta máquina.');
+  console.log('  Procurei por ~/.claude, ~/.codex e ~/.copilot.\n');
+  console.log('  Para instalar dentro de um projeto:  npx pswex-design-system --local\n');
+  process.exit(0);
+}
+
+let contados = 0;
+for (const { rotulo, destino } of alvos) {
+  if (seco) { console.log(`  [mostrar] ${rotulo.padEnd(12)} ${destino}`); continue; }
+  try {
+    await rm(destino, { recursive: true, force: true });
+    await mkdir(dirname(destino), { recursive: true });
+    await cp(ORIGEM, destino, { recursive: true });
+    const n = (await readdir(destino, { recursive: true })).length;
+    console.log(`  ok        ${rotulo.padEnd(12)} ${destino}  (${n} itens)`);
+    contados++;
+  } catch (e) {
+    console.log(`  falhou    ${rotulo.padEnd(12)} ${e.message}`);
+  }
+}
+
+if (!seco) {
+  console.log(`\n  ${contados} de ${alvos.length} instalados.`);
+  console.log('  Abra o agente e peça alguma coisa da PSWEX: ele carrega a skill sozinho.\n');
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "pswex-design-system",
+  "version": "7.0.0",
+  "description": "Design system da PSWEX Tecnologia como skill de agente. Instala em Claude Code, Codex e Copilot CLI com um comando.",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "skill",
+    "agent-skills",
+    "claude-code",
+    "codex",
+    "pswex",
+    "dtcg"
+  ],
+  "type": "module",
+  "bin": {
+    "pswex-design-system": "bin/instalar.mjs"
+  },
+  "files": [
+    "bin",
+    "skill",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "PSWEX Tecnologia",
+  "homepage": "https://pswex.com.br"
+}

package/skill/README.md

@@ -0,0 +1,57 @@
+# Design system da PSWEX, como skill
+
+Uma pasta só que serve Claude, Codex e ChatGPT. Versão 7.0.0, gerada
+do contrato em 22/09/2026.
+
+## O que tem dentro
+
+```
+SKILL.md              as regras que valem sempre, leia primeiro
+references/
+  cor.md              as quatro famílias, 47 tokens, escala tipográfica
+  componentes.md      os 36 componentes com props e exemplo
+  icones.md           os 72 ícones e para que serve cada um
+  fundos.md           a arte de fundo, a regra de escala e os 6 temas
+  classes.md          o vocabulário de classe do CSS
+  voz.md              como escrever o texto que vai dentro da peça
+assets/
+  pswex.tokens.json   padrão DTCG do W3C
+  figma-variables.json coleções, modos, escopos e code syntax
+  tokens.css          as mesmas variáveis em CSS
+  manifesto.json      os componentes em JSON, para a máquina ler
+  catalogo-icones.json
+  styles.css          o CSS de produção inteiro
+  PROMPT-FIGMA.md     pedido pronto para o agente do Figma
+```
+
+## Instalar
+
+**Claude Code e claude.ai**
+
+```
+~/.claude/skills/pswex-design-system
+```
+
+**Codex**
+
+```
+~/.codex/skills/pswex-design-system
+```
+
+Nos dois, um link simbólico para esta pasta faz a skill acompanhar o `git pull`.
+
+**ChatGPT**
+
+Não existe formato de skill. Num GPT personalizado, cole o conteúdo de `SKILL.md`
+em Instructions e suba `references/` e `assets/` em Knowledge. Num projeto, o mesmo:
+`SKILL.md` nas instruções do projeto e o resto como arquivo.
+
+## Regerar
+
+A skill é derivada do contrato, nunca editada à mão. De dentro de `design-system/`:
+
+```
+python3 gerar-contrato.py && python3 gerar-docs-contrato.py && python3 gerar-skill.py
+```
+
+Rode depois de qualquer mudança em `site/assets/pswex.css` ou em `design-system/src/`.

package/skill/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: pswex-design-system
+description: >-
+  Design system da PSWEX Tecnologia. Use sempre que for criar, alterar ou revisar
+  qualquer peça da PSWEX ou da UPro: página, tela, componente, e-mail, post, anúncio,
+  apresentação, proposta ou arte de rede social. Traz 47 tokens de cor e medida,
+  36 componentes React, 72 ícones e 6 temas de fundo, mais as regras de
+  cor e de escrita da casa. Dispara em pswex, upro, design system, token, paleta,
+  identidade visual, componente, ícone, fundo, gradiente.
+license: proprietário, uso interno PSWEX Tecnologia
+---
+
+# Design system da PSWEX
+
+Versão 7.0.0, extraído do CSS que está em produção em 22/09/2026.
+Se este documento e o CSS discordarem, o CSS ganha.
+
+## O que carregar, e quando
+
+Este arquivo tem as regras que valem sempre. O detalhe está em `references/`,
+carregue só o que a tarefa pedir:
+
+| Precisa de | Leia |
+|---|---|
+| cor, tema claro e escuro | `references/cor.md` |
+| montar tela com componente pronto | `references/componentes.md` |
+| escolher ícone | `references/icones.md` |
+| fundo, gradiente, arte de rede social | `references/fundos.md` |
+| classe CSS sem componente React | `references/classes.md` |
+| escrever o texto da peça | `references/voz.md` |
+
+Os arquivos que a máquina lê estão em `assets/`: `pswex.tokens.json` no padrão DTCG
+do W3C, `figma-variables.json` para importar no Figma, `manifesto.json` com as props
+de cada componente, `catalogo-icones.json` e o `styles.css` de produção inteiro.
+
+## As quatro famílias de cor, e a regra que não se quebra
+
+A divisão não é estética, é funcional.
+
+- **Marca**: igual nos dois temas. Navy, vermelho, teal, mint, sky, leaf, lime e as
+  variações. Nunca vai direto em texto de corpo.
+- **Tema**: inverte inteira no escuro. Todo fundo de tela e todo texto de tela sai daqui.
+- **Sobre-cor**: texto e borda que ficam em cima de cor de marca. Não inverte, porque
+  o fundo também não inverte.
+- **Layout**: medida, raio e sombra.
+
+**A regra:** texto sobre cor da família marca usa a família sobre-cor. Texto sobre fundo
+de tela usa a família tema. Cor de marca nunca vai direto em texto.
+
+Ignorar isso é o que produz navy escrito em cima de navy, que é invisível. Já aconteceu aqui.
+
+Dois casos que custaram caro e não se reabrem:
+
+- Botão lime leva `--lime-ink`, que é navy. Branco no lime dá **1,90:1** e reprova.
+  Navy no lime dá **7,13:1**. Se alguém pedir branco, o certo é escurecer o fundo para
+  `--leaf-800`, que dá 5,85:1, e aí o botão perde força de chamada. Diga isso antes de fazer.
+- Vermelho em cima de navy leva `--red-ondark`. O `--red` puro some no escuro.
+
+## O resto das regras duras
+
+1. **Um `btn--cta` por tela.** O lime é a ação que converte. Dois na mesma tela e nenhum funciona.
+2. **Ícone nunca leva hex.** Todos são `stroke="currentColor"`, a cor vem do texto ao redor
+   e troca sozinha no tema escuro.
+3. **Nunca hex direto em componente.** Sempre `var(--token)`. Hex quebra o tema escuro.
+4. **Escreva em classe do sistema, não em CSS novo.** Quase tudo já existe.
+5. **Gradiente só anda entre cores vizinhas.** Navy para teal, teal para sky, sky para mint,
+   e navy para verde passando pelo teal. Navy para vermelho não: a passagem vira roxo sujo,
+   então os dois nunca se encostam, tem um trecho escuro separando.
+6. **Nunca use travessão** em texto de tela. Vírgula, ponto ou dois pontos.
+7. **Nunca invente número.** Sem "+45%", sem "3x mais vendas". Sem fonte, não escreve.
+
+## Como carregar em código
+
+Não existe provider e não existe wrapper de tema. Os componentes emitem as classes do
+CSS de produção.
+
+```html
+<link rel="stylesheet" href="assets/styles.css">
+<script>const { Hero, Btn, Cards, Card, Servicos } = window.PSWEX;</script>
+```
+
+Tema, três estados, nessa ordem de precedência:
+
+```css
+:root                                               /* claro, sempre definido */
+@media(prefers-color-scheme:dark){:root:not([data-theme=light]){...}}
+[data-theme=dark] / [data-theme=light]              /* escolha explícita ganha */
+```
+
+Para uma prévia no escuro, carimbe `data-theme="dark"` no elemento e defina
+`color: var(--fg)` nele: `data-theme` troca token, não troca cor herdada.
+
+## Tipografia
+
+Gilroy, cinco pesos, pilha `Gilroy, 'Segoe UI', system-ui, sans-serif`.
+Corpo 17px com `line-height:1.62`. Gilroy é licenciada e não está no catálogo do Google,
+nem no do Figma: num arquivo do Figma ela precisa estar instalada na máquina de quem abre.
+A escala completa está em `references/cor.md`.
+
+## Três quebras de layout que escondem componente
+
+Errar a largura do quadro esconde metade da peça: `nav` some abaixo de 960px,
+`split` vira uma coluna abaixo de 900px, e os `step` do celular saem da posição
+absoluta e empilham abaixo de 1100px.
+
+## O que não fazer
+
+| Não | Porque |
+|---|---|
+| hex direto em componente | quebra o tema escuro e sai do sistema |
+| texto branco no lime | 1,90:1, reprova em qualquer nível |
+| `--red` em cima de navy | some, use `--red-ondark` |
+| dois `btn--cta` na mesma tela | a tela deixa de ter uma ação principal |
+| pintar ícone com hex | ele deixa de acompanhar o tema |
+| escalar um fundo de outra proporção | a fita de luz achata, gere o formato certo |
+| CSS novo para layout | quase tudo já existe no vocabulário de classe acima |
+| travessão em texto de tela | a casa não usa, é vírgula, ponto ou dois pontos |

package/skill/assets/PROMPT-FIGMA.md

@@ -0,0 +1,138 @@
+# Prompt para o agente do Figma
+
+Copie daqui para baixo e mande para o agente.
+
+---
+
+Você vai reorganizar as variáveis de cor de um arquivo do Figma que já existe.
+
+**Arquivo:** `qNVr6EBodmZYfsJlgUZNlw`
+https://www.figma.com/design/qNVr6EBodmZYfsJlgUZNlw/
+
+**Antes de tocar em qualquer coisa**, carregue as skills `figma-use` e
+`figma-generate-library`, e leia o arquivo para saber o que já está lá. Não crie
+nada antes de ter a lista do que existe. Trabalhe em passos pequenos e me mostre
+o resultado de cada passo, nunca tudo de uma vez.
+
+## O que eu quero
+
+Hoje as variáveis estão numa lista rasa, com nomes tipo `cor/navy`. Isso não diz
+para que serve cada cor, e é por isso que já aconteceu de alguém pintar texto navy
+em cima de fundo navy.
+
+Eu quero quatro coleções, com o caminho do nome dizendo a função da cor. São
+47 variáveis no total, e os valores abaixo são a verdade: eles vieram do CSS
+que está no ar, não de um resumo.
+
+### PSWEX Marca
+
+Modo: Unico. 20 variáveis.
+
+| Variável | Valor | Escopo | Code syntax |
+|---|---|---|---|
+| `principal/navy` | `#232F3E` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--navy)` |
+| `principal/red` | `#C7273E` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--red)` |
+| `principal/teal` | `#1F4768` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--teal)` |
+| `secundaria/mint` | `#C1EDCC` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--mint)` |
+| `secundaria/sky` | `#7CCFDB` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--sky)` |
+| `secundaria/leaf` | `#669933` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--leaf)` |
+| `secundaria/lime` | `#99CC33` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--lime)` |
+| `variacao/navy-700` | `#35485F` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--navy-700)` |
+| `variacao/navy-800` | `#2B3A4D` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--navy-800)` |
+| `variacao/navy-900` | `#1B2531` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--navy-900)` |
+| `variacao/navy-950` | `#19212C` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--navy-950)` |
+| `variacao/red-600` | `#A92135` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--red-600)` |
+| `variacao/red-700` | `#941D2E` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--red-700)` |
+| `variacao/sky-800` | `#267F8C` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--sky-800)` |
+| `variacao/leaf-800` | `#4A6F25` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--leaf-800)` |
+| `neutro/charcoal` | `#353437` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--charcoal)` |
+| `neutro/gray-dark` | `#4D4D4C` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--gray-dark)` |
+| `neutro/gray-mid` | `#656565` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--gray-mid)` |
+| `neutro/ice` | `#FFFCF1` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--ice)` |
+| `neutro/offwhite` | `#F4F4EE` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--offwhite)` |
+
+### PSWEX Tema
+
+Modo: Claro e Escuro. 16 variáveis.
+
+| Variável | Claro | Escuro | Escopo | Code syntax |
+|---|---|---|---|---|
+| `fundo/bg` | `#FFFAFA` | `#12181F` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--bg)` |
+| `fundo/surface` | `#FFFFFF` | `#1B242F` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--surface)` |
+| `fundo/paper` | `#FFFFFF` | `#1B242F` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--paper)` |
+| `fundo/snow` | `#FFFAFA` | `#151D26` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--snow)` |
+| `fundo/beige` | `#F8F4E3` | `#1E2732` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--beige)` |
+| `fundo/light` | `#F2F3F4` | `#1A222C` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--light)` |
+| `fundo/teal-50` | `#E9F0F7` | `#17222E` | FRAME_FILL, SHAPE_FILL, STROKE_COLOR | `var(--teal-50)` |
+| `texto/fg` | `#232F3E` | `#EEF3F8` | TEXT_FILL | `var(--fg)` |
+| `texto/ink` | `#232F3E` | `#EEF3F8` | TEXT_FILL | `var(--ink)` |
+| `texto/ink-2` | `#4D4D4C` | `#C3CFDC` | TEXT_FILL | `var(--ink-2)` |
+| `texto/ink-3` | `#656565` | `#A3B2C2` | TEXT_FILL | `var(--ink-3)` |
+| `texto/muted` | `#656565` | `#9FB0C2` | TEXT_FILL | `var(--muted)` |
+| `acento/accent-txt` | `#C7273E` | `#F4808F` | TEXT_FILL | `var(--accent-txt)` |
+| `acento/accent-2-txt` | `#1F4768` | `#8FC5DE` | TEXT_FILL | `var(--accent-2-txt)` |
+| `linha/line` | `#D5DBE2` | `#2C3947` | STROKE_COLOR | `var(--line)` |
+| `linha/line-300` | `#9CA7B4` | `#44566A` | STROKE_COLOR | `var(--line-300)` |
+
+### PSWEX Sobre cor
+
+Modo: Unico. 6 variáveis.
+
+| Variável | Valor | Escopo | Code syntax |
+|---|---|---|---|
+| `texto/lime-ink` | `#232F3E` | TEXT_FILL | `var(--lime-ink)` |
+| `texto/on-bright` | `#232F3E` | TEXT_FILL | `var(--on-bright)` |
+| `texto/ondark-200` | `#AFBCCC` | TEXT_FILL | `var(--ondark-200)` |
+| `texto/ondark-400` | `#94A6BC` | TEXT_FILL | `var(--ondark-400)` |
+| `texto/red-ondark` | `#F4808F` | TEXT_FILL | `var(--red-ondark)` |
+| `linha/line-inv` | `rgba(196,219,241,.24)` | STROKE_COLOR | `var(--line-inv)` |
+
+### PSWEX Layout
+
+Modo: Unico. 5 variáveis.
+
+| Variável | Valor | Escopo | Code syntax |
+|---|---|---|---|
+| `medida/shell` | `1200.0` | WIDTH_HEIGHT, GAP | `var(--shell)` |
+| `raio/r` | `14.0` | CORNER_RADIUS | `var(--r)` |
+| `raio/r-lg` | `22.0` | CORNER_RADIUS | `var(--r-lg)` |
+| `sombra/shadow` | `0 1px 3px rgba(35,47,62,.08),0 6px 14px -8px rgba(35,47,62,.12)` | nenhum | `var(--shadow)` |
+| `sombra/shadow-lg` | `0 2px 6px rgba(35,47,62,.10),0 14px 28px -14px rgba(35,47,62,.18)` | nenhum | `var(--shadow-lg)` |
+
+## As regras que não podem ser quebradas
+
+**1. Cor da coleção Marca nunca recebe `TEXT_FILL`.** Repare que nenhuma variável
+de `PSWEX Marca` tem `TEXT_FILL` na lista de escopo. Isso é de propósito: é o que
+faz o Figma não oferecer essas cores no seletor de cor de texto, e é o que impede
+navy escrito em cima de navy. Se você achar que faltou, não é falta, é a regra.
+
+**2. Texto em cima de cor de marca sai de `PSWEX Sobre cor`.** Botão lime leva
+`texto/lime-ink`, que é navy. Branco em cima do lime dá 1,90:1 de contraste e
+reprova. Texto em cima de navy leva `texto/ondark-200` ou `texto/ondark-400`.
+Vermelho em cima de navy leva `texto/red-ondark`, porque o vermelho puro some lá.
+
+**3. Só a coleção Tema tem dois modos.** As outras três têm modo único, porque
+cor de marca, texto sobre cor e medida não mudam com o tema.
+
+**4. Code syntax WEB sempre com `var()` em volta.** É `var(--navy)`, não `--navy`.
+Sem isso o Dev Mode devolve um nome que não funciona colado no CSS.
+
+## Como migrar sem quebrar o arquivo
+
+O arquivo já tem componentes montados que apontam para as variáveis antigas. A
+ordem importa:
+
+1. Crie as coleções e as variáveis novas. Não apague nada ainda.
+2. Reaponte todo nó que usa variável antiga para a nova equivalente. Percorra
+   página por página e me devolva a contagem de nós reapontados em cada uma.
+3. Só depois de a contagem de uso das antigas chegar a zero, apague as antigas.
+4. Se sobrar alguma antiga com uso, me diga qual e onde, não apague por cima.
+
+Nunca apague uma variável antes do passo 3. Se você não tiver certeza de que um
+nó foi reapontado, pare e me pergunte.
+
+## Onde me mostrar o resultado
+
+Depois de cada passo, me mande um screenshot da página e a lista de IDs do que
+você criou ou alterou. No fim, me mande a lista das quatro coleções com a
+contagem de variáveis de cada uma, para eu conferir contra os números daqui.