Gerar quadros de projeto
Tira screenshots das melhores páginas do projeto atual e as emoldura. Esta skill é responsável pela descoberta, preparação do aplicativo e qualidade bruta da captura; SUB-SKILL OBRIGATÓRIA: generate-frame é responsável pela emolduração e pela capa. Execute seu passo 1 primeiro (localize e verifique o frame-kit) e pare se falhar. <frame-kit> é o caminho que ela resolve.
Saídas, nunca misturadas: raw → ~/Pictures/<projeto>-portfolio/raw/, emolduradas → ~/Pictures/<projeto>-portfolio/framed/.
1. Escaneamento
Encontre páginas voltadas ao usuário: rotas, componentes de página/visualização, recursos de admin (Filament, Nova…), menus de navegação. Leia o código para saber como executar o aplicativo, quais perfis existem e qual perfil vê qual página. Não adivinhe portas, URLs ou logins; verifique-os executando o aplicativo ou perguntando.
2. Propor até 5
Decida que tipo de produto é este e classifique as páginas por quão bem elas mostram o que ele realmente faz. A pergunta é: o que faria um estranho entender este produto a partir de uma imagem?
| Produto | Páginas mais fortes |
|---|---|
| Aplicativo de negócios/admin (PDV, CRM, estoque) | o fluxo de trabalho principal com linhas reais, depois dashboard, depois listas com muitos dados |
| Dashboard/analíticos | dashboard principal, um drill-down, um relatório |
| Site de conteúdo/marketing/e-commerce | landing/hero, listagem, página de detalhes, carrinho ou checkout |
| Editor/construtor/ferramenta criativa | a tela com conteúdo, depois uma galeria ou lista de projetos |
| Ferramenta de desenvolvedor/documentação | interface principal em uso, uma visualização de resultado/saída |
Pule login, formulários simples, configurações, páginas de erro e quase duplicatas. Menos de 5 está ok. Liste cada uma com nome, caminho, perfil e uma linha de motivo.
3. Perguntar
AskUserQuestion, multiSelect (máximo 4 opções por pergunta; divida em duas perguntas se necessário). A captura não deve começar antes do usuário escolher. Pergunte também: claro ou escuro (apenas se o aplicativo tiver ambos) e qual perfil/conta usar. As credenciais vêm do ambiente do usuário ou de uma sessão existente; nunca as escreva em scripts, arquivos ou saída, e nunca burle controles de acesso (uma página que o perfil escolhido não pode ver é pulada, não forçada).
4. Preparar o aplicativo
- Inicie o aplicativo se ele não estiver rodando, em uma porta livre; lembre-se de parar o que você iniciou.
- Abra as páginas escolhidas. Dados vazios ou placeholders → avise e ofereça dados de demonstração realistas. A semeadura precisa de um sim explícito, vai para um banco de dados separado ou descartável, e o banco de desenvolvimento nunca é tocado sem um. Prefira estados que a interface possa criar (adicionar itens ao carrinho) em vez de escritas no banco.
- Não adicione dependências ou arquivos ao projeto do usuário. Scripts ficam no scratchpad.
5. Capturar
Escreva um script no scratchpad que importe capturePages de <esta skill>/scripts/capture.mjs:
import { capturePages } from '<esta skill>/scripts/capture.mjs';
const results = await capturePages({
frameKit: '<frame-kit>', outDir: '<diretório raw>', colorScheme: 'light', // um esquema para o lote
storageState: process.env.APP_STORAGE_STATE, // sessão salva; ou login: async (page) => {...} lendo process.env
setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')), // o próprio seletor de tema do aplicativo, se houver
pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* abrir o carrinho, dispensar o tour… */ } }],
});
console.log(JSON.stringify(results, null, 2));
Ele usa um contexto 1440×900 @2x para todo o lote (PNGs têm 2880×1800), aguarda rede ociosa, fontes e conteúdo lazy, e reporta issues por página: erros de console/página, HTTP ≥ 400, redirecionamentos (geralmente login faltando), imagens quebradas, spinners/skeletons visíveis, overlays/banners de cookie, containers de gráfico vazios. Nomeie os arquivos NN-<slug>.png na ordem da proposta. Passe os seletores próprios do aplicativo via loadingSelectors/overlaySelectors/hideCss (toasts, barras de debug).
Telas interativas (carrinho, editor, quadro) precisam de conteúdo de exemplo adicionado em prepare primeiro.
Para cada página com problemas: corrija (dispense o overlay, aguarde o elemento, faça login) e refaça apenas aquela página; ou informe ao usuário que é impossível corrigir e descarte-a. Um aviso que você considere inofensivo (ex.: um 404 de favicon) está ok; mencione-o. Em seguida, leia cada PNG: conteúdo real, nada meio carregado, nenhum dado privado (emails, tokens, nomes reais de clientes) que não deva ser publicado; verifique com o usuário se não tiver certeza.
6. Emoldurar
Execute os passos 2–4 do generate-frame com a pasta raw como entrada: --out <diretório emoldurado>, --url "<host do app>/{nome}", um --resolution (padrão máximo). Uma falha parcial é reportada, não escondida: refaça a captura ou a moldura apenas dos arquivos com falha. Reporte a pasta raw, a pasta emoldurada, o par de capa, as páginas descartadas e o motivo, e qualquer limitação (ex.: imagens não inspecionadas).