◆ Nookpick (v1.0.2)

Selecione um elemento no navegador → veja CSS, HTML, primitive do design system e arquivo:linha num painel estilo Cursor → escreva a instrução no painel ou no Claude Code CLI → o Claude pega tudo já extraído e edita. Sem copiar print.

Novo na v1.0.2 — fluxo zero-comando pra leigo:

• Mini-terminal no card — escreve a instrução, aperta Enter, e o pedido cai direto no Claude Code CLI rodando (sem ir pro terminal digitar de novo).
• Multi-seleção — clique em vários elementos em sequência, edite tudo num lote com uma única instrução.
• Auto-detect dos Claudes — o bridge varre /proc e identifica os Claude Codes rodando sozinho. O popup mostra "🟢 ProjetoX · detectado" pra cada um. Sem precisar rodar register.mjs manual.

Diferente do Claude Studio:

• Stack-agnóstico: funciona em Vite (NookTrack, Tecnopano, FIPS) e Next (Black Ice).
• Usa a sessão do Claude Code CLI (seu plano), não uma API key separada.
• Screenshot recortado do elemento vai junto, automático.

⚠️ Plataforma suportada

| Sistema | Status | |---|---| | Linux X11 (Ubuntu, Fedora, Arch · GNOME/KDE/etc) | ✅ totalmente suportado | | Linux Wayland | ❌ não suportado nesta versão (precisa de ydotool + permissão de input) | | macOS | ❌ não suportado (exigiria AppleScript no bridge) | | Windows | ❌ não suportado (exigiria WinAPI no bridge) |

A extensão Chrome em si funciona em qualquer SO. O que é Linux-X11-only é o auto-envio pro terminal (xdotool, tmux send-keys, wezterm cli, kitty @). Sem auto-envio o fluxo cai pro modo manual: o latest.json do inbox local fica disponível e você digita pega no Claude Code pra a skill ler.

O bridge é um Node server local (npx claude-nookpick). Você pode rodar manualmente a cada sessão OU registrar como serviço de boot (no Linux: systemd user unit em ~/.config/systemd/user/nookpick-bridge.service, já incluído).

📖 Tutorial de uso passo a passo pros sócios: TUTORIAL.md. Instalação: INSTALL.md.

Modos (escolha no popup, DEPOIS seleciona)

Clicar no ícone (ou Ctrl+Shift+E) abre um popup com 3 modos. Você escolhe o modo antes de selecionar — só então o cursor é liberado (ou a página é copiada). Sem ambiguidade.

• ✎ Editar elemento — arma o cursor; você clica o elemento → card com arquivo:linha + CSS + HTML + miniatura do elemento + sua instrução → Claude edita o código (dev).
• ⧉ Replicar elemento — arma o cursor; reconstrói SÓ aquele elemento em HTML/CSS (base pra adaptar; qualquer site). É réplica visual, não o código-fonte deles.
• ◆ Copiar página inteira (cópia exata) — abre um card com preview rolável do clone; confere e envia. HTML + CSS reais (same-origin inlinado, <base> pros assets), preserva dark mode e destrava scroll interno → clona a página inteira. Funciona até com login.

Dentro do card (modos de elemento): 📷 Print da tela (vira miniatura clicável), Copiar contexto (JSON), Ver como ficou (compara via chrome-devtools). Toggles que persistem: auto-enviar (cai direto no input do Claude) · abrir preview na aba.

Site público inteiro e self-contained: node bridge/snapshot.mjs <url> (ver TUTORIAL §7).

Animações: detectar + trazer viva

O card sempre identifica animação no campo animações (ex.: 6 CSS · 99 transições · 1 vídeo · 2 canvas). Como cada tipo replica:

• CSS keyframes/transitions → transferem na Cópia Exata e rodam mesmo estático. ✓
• vídeo / Lottie → copia src/JSON. ✓
• canvas 2D / framer / GSAP / scroll-trigger → precisam do JS → mirror vivo.
• WebGL / Three / Spline / 3D → mirror vivo (roda o JS deles) ou recriar o efeito (não é byte-clone de shader proprietário).

Mirror vivo (bridge/mirror.mjs <url> [porta] [manifesto.json]): baixa os assets same-origin e serve por HTTP local — o bundle carrega same-origin (sem CORS) e a animação roda. Provado em Vite (nookweb), WordPress/Elementor (tecnopano) e Next.js (fips, v0-agentic).

Estático vs vivo: a cópia exata é um snapshot ESTÁTICO (JS não roda → palavras animadas, marquees e hover ficam congelados/ausentes). Cópia "viva" de SPA de módulos NÃO funciona em file:// (o navegador bloqueia o bundle por CORS); exigiria servir por HTTP local com os assets espelhados.

O POST pro bridge é roteado pelo service worker da extensão, então funciona em páginas HTTPS (fetch direto de https→http://localhost é bloqueado por mixed content).

Como o arquivo:linha funciona (testado em React 19.2)

React 19 removeu o _debugSource. O Nookpick lê o _debugStack da fibra, que no dev server (Vite/Next) já vem mapeado pro arquivo-fonte original. Estratégias, em ordem:

1. data-nookpick-source (se você usar o plugin de build opcional) — determinístico.
2. _debugStack (React 19, dev) — arquivo:linha real, sem plugin.
3. _debugSource (React ≤18, fallback).
4. Sempre: cadeia de componentes (Button › Card › …), selector e HTML.

Só funciona em dev (em produção a pilha some). É exatamente quando você edita, então ok. O caminho vem relativo à root do dev server (no NookTrack a root é client/, então src/... no disco é client/src/...). A skill resolve isso buscando o arquivo.

Instalação

Via plugin (recomendado)

1. Instale a extensão Nookpick na Chrome Web Store.
2. No Claude Code:

   /plugin marketplace add Nookweb-SDE/nookpick
   /plugin install nookpick@nookweb

   A skill liga e a bridge sobe sozinha (via npx nookpick-bridge) ao abrir a sessão — grava as seleções em ~/.claude-nookpick/inbox/. Sem install.sh, sem systemd, sem npm install à mão.
3. Clique num elemento no navegador e diga "pega" (ou /nookpick).

Manual (dev local do próprio repo)

• Extensão: Chrome → chrome://extensions → Modo do desenvolvedor → Carregar sem compactação → pasta extension/.
• Bridge: cd claude-nookpick && npm start (HTTP-only em http://127.0.0.1:4517).
• Skill: symlink/cópia de skill/SKILL.md em ~/.claude/skills/nookpick.

Uso

1. Rode seu app em dev (localhost).
2. Clique no ícone (ou Ctrl+Shift+E) → escolha o modo (Editar / Replicar / Copiar página).
3. Passe o mouse (destaca), clique no elemento — ou, no modo página, confira o preview.
4. No card: veja CSS/HTML/primitive/arquivo + miniatura. Escreva o que mudar e Enviar pro Claude — ou deixe vazio e descreva aqui no Claude Code CLI.
5. No Claude Code: /nookpick (ou "pega"). Eu leio a seleção e edito o arquivo certo.

Passo a passo detalhado pros sócios: TUTORIAL.md.

Config

| Variável | Default | O quê | |---|---|---| | NOOKPICK_PORT | 4517 | porta do bridge | | NOOKPICK_INBOX | ~/.claude-nookpick/inbox | onde grava as seleções |

Bridge URL é configurável também no popup da extensão.

Auto-envio (cair direto no input do Claude)

Por padrão: clica → toast "✓ 200" → você digita "pega". Com auto-envio, o bridge digita o gatilho no painel do Claude por você:

1. No painel do Claude Code rode uma vez: node bridge/register.mjs (registra o painel).
2. Na extensão, marque "auto-enviar (cai direto no input do Claude)".
3. Clicar → o bridge injeta "pega"/"replica"/"cópia exata" no input e eu ajo na hora.

Suporta tmux (send-keys), WezTerm (cli send-text), Kitty (@ send-text) e, no X11, xdotool universal (cobre Alacritty, que não tem API). register.mjs detecta.

Linha EXATA em todos os frameworks

Três caminhos, na ordem de prioridade que a extensão/bridge usam: data-attr (stamp de build) > sourcemap (bridge resolve) > _debugStack (linha grosseira).

npm install agora é obrigatório no bridge (dep @jridgewell/trace-mapping pro resolver).

Vite (NookTrack, Tecnopano, FIPS) — plugin de stamp

No vite.config.ts (só dev):

import { nookpick } from "../claude-nookpick/vite-plugin-nookpick.mjs";
export default defineConfig({ plugins: [react(), nookpick()] });

Cada elemento host ganha data-nookpick-source="arquivo:linha:col" com a posição original. Testado: submit do NookTrack = client/...:191:12, exato.

Next.js webpack (Black Ice) — loader via wrapper

No next.config.js:

const { withNookpick } = require("../../../claude-nookpick/next/with-nookpick.cjs");
module.exports = withNookpick(nextConfig); // injeta o loader só em dev

Reusa o mesmo stamp Babel antes do SWC. Testado: estampa os módulos compilados (src/components/Button.tsx:135:2). O loader é dev-only, não afeta next build.

Next.js Turbopack (Wifinity) + qualquer outro — resolver de sourcemap (automático)

Turbopack ignora loaders webpack, então NÃO precisa editar o config. A extensão manda o rawFrame (URL+linha:col transformados) e o bridge resolve via sourcemap pra linha original exata. Funciona como fallback universal em qualquer projeto sem o stamp. Testado no Vite: linha transformada 476 → original 188 (<button), exato.

Distribuição pros sócios

A extensão sozinha não basta: cada pessoa precisa de extensão + bridge + skill. Opções:

1. Repo Git (recomendado p/ time pequeno) — clonam o repo, npm start pro bridge, "Carregar sem compactação" → pasta extension/, symlink da skill/ em ~/.claude/skills/. Grátis e imediato; atualizam com git pull. Convive com o aviso de modo desenvolvedor.
2. Chrome Web Store (não listada) — taxa única de US$5 de dev, sobe a extensão como "unlisted" e compartilha o link. Auto-atualiza, sem modo desenvolvedor. Melhor p/ sócios não-técnicos. Review leva alguns dias. (Bridge + skill continuam manuais.)
3. Política de empresa (Workspace) — força-instala via policy num domínio gerenciado. Mais setup; só vale com Google Workspace corporativo.

A .crx solta não instala fora da loja (Chrome bloqueia). Use repo ou loja.

Estrutura

extension/                 extensão MV3 (picker + painel + screenshot + mundo principal)
bridge/                    servidor Node zero-dependência (inbox)
skill/                     skill /nookpick (ler seleção, trava de verificação, review)
vite-plugin-nookpick.mjs   plugin Vite dev p/ linha exata (data-nookpick-source)