Communitygithub.com

pardonned - Verificar Alterações no Navegador

Constrói, serve e testa o site estático do Pardonned em um navegador real para verificar alterações na interface.

O que é pardonned - Verificar Alterações no Navegador?

Esta skill automatiza a verificação de mudanças de UI no site estático do Pardonned (um site Astro) em um navegador real. Ela primeiro constrói o projeto com `pnpm build` e serve o diretório `dist/` usando um servidor HTTP simples. Em seguida, utiliza Playwright (já disponível como devDependency) para scripts descartáveis que navegam e interagem com páginas renderizadas, como a página de busca com paginação e filtros client-side. A skill também documenta pontos críticos, como o stubbing do PostHog — que não pode ser feito com `addInitScript` pois o snippet real sobrescreve o stub — sendo necessário aplicar o patch após o carregamento da página. É útil para desenvolvedores que precisam garantir que mudanças funcionem corretamente no build de produção, especialmente em funcionalidades que dependem de scripts inline.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidluther/pardonned/tree/HEAD/.claude/skills/verify

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Verificando alterações no Pardonned

Site Astro estático — não há servidor em tempo de execução. Verifique no diretório dist/ em um navegador real.

Build & serve

pnpm build                                  # precisa de data/pardonned.db (veja CLAUDE.md)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # execute em segundo plano

Driver

O playwright já é uma devDependency (usado pelo scraper) com Chromium instalado — escreva um .mjs descartável na raiz do repositório (para que o node resolva playwright a partir de node_modules), execute com node e delete após o uso.

Os fluxos principais estão em scripts inline nas páginas (ex.: filtro/ordenação/paginação em /search/ são totalmente client-side, sincronizados com parâmetros da URL via history.replaceState).

Armadilhas

  • Stubbing do PostHog: as páginas construídas incorporam o snippet real do PostHog, que faz window.posthog = e e substitui qualquer stub instalado via addInitScript. Para observar chamadas de posthog.capture, aplique o patch após o carregamento: page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } }).
  • Paginação com janela em /search: apenas as páginas 1, 2, …, última são clicáveis a partir da página 1. Para alcançar uma página mais profunda, carregue-a via ?page=N na URL ou clique em "Próximo" repetidamente.
  • Astro dev vs build: pnpm dev também funciona, mas o comportamento do estado da URL deve ser verificado no build de produção, pois os scripts inline são o que é realmente enviado.

Habilidades Relacionadas