CrziDev/claude-skills

Gerar moldura

Transforma capturas de tela existentes em PNGs emoldurados com o frame-kit, que faz toda a renderização. Esta habilidade localiza a ferramenta, a executa, verifica os resultados e escolhe uma capa. Para capturar telas de um projeto primeiro, use gerar-molduras-de-projeto.

1. Localizar e verificar frame-kit

Chame a pasta de <frame-kit>. Use a primeira que tiver cli.mjs e um package.json chamado frame-kit:

1. $FRAME_KIT_DIR
2. a pasta por trás de um comando frame-kit no PATH (readlink -f "$(command -v frame-kit)", sua pasta)
3. uma busca em ~/projects ~/code ~/dev ~, profundidade ≤ 4, ignorando node_modules (várias correspondências → perguntar qual)
4. pergunte ao usuário; se ele não tiver nenhuma, sugira git clone https://github.com/CrziDev/frame-kit

Depois:

• node_modules ausente → npm install em <frame-kit>.
• Execute node <frame-kit>/cli.mjs --help e construa comandos apenas a partir das opções listadas. Se --resolution ou --fit estiver ausente, a instalação é antiga: omita-os e informe ao usuário para git pull.
• "Chromium não encontrado" → npx playwright install chromium em <frame-kit>, ou defina CHROME_PATH.

Não escreva o caminho em nenhum arquivo de habilidade.

2. Emoldurar

node <frame-kit>/cli.mjs single <imagem|pasta> --out <diretório emoldurado> [opções]

• --out: sempre passe-o. O padrão é <diretório de entrada>/framed/, que aninha dentro de uma pasta bruta. Mantenha imagens emolduradas separadas das fontes.
• --url "<host>/{name}": texto da barra de endereços; {name} = nome do arquivo sem o prefixo NN-. Use o host e caminhos reais do aplicativo quando conhecidos, caso contrário omita.
• --style paper: recibos, faturas, impressões. Uma execução de pasta usa um estilo, então reexecute apenas aqueles arquivos individualmente com --style paper e o mesmo --out.
• --resolution standard|high|max: padrão max (3840×2400). Use standard (1920×1200) para READMEs e prévias rápidas, high (2560×1600) para web e slides. Saída maior é moldura e texto mais nítidos, não mais detalhes na captura de tela. Use uma resolução por lote.
• --fit auto|contain|cover: padrão auto (captura inteira; páginas muito altas cortadas do topo). Altere apenas para corrigir um corte ruim.

Código de saída 1 significa que alguns arquivos falharam; os outros ainda são gravados e as falhas são listadas em stderr. Corrija a causa (imagem ilegível ou corrompida, tipo não suportado, acima de 50 MB) e reexecute apenas esses arquivos. Se todo arquivo falhar, suspeite do Chromium.

3. Capa (apenas entrada de pasta)

Observe as imagens, depois escolha duas que se complementam:

• verso: visão geral do produto (dashboard, análises, página inicial), paisagem, legível em tamanho de miniatura.
• frente: a tela que mostra o que o aplicativo faz, com conteúdo real, um layout diferente do verso.
• nunca: login, estados vazios, páginas de erro, capturas de página inteira muito altas, recibos ou a mesma tela duas vezes.

node <frame-kit>/cli.mjs cover <verso> <frente> --back-url "…" --front-url "…" --out <diretório emoldurado>/00-cover.png (mesmo --resolution). Passe as capturas de tela originais, não as emolduradas. Apenas uma imagem que vale a pena mostrar, ou o usuário quer um título? Use headline (veja --help).

4. Verificar e relatar

1. node <esta habilidade>/scripts/verify-frames.mjs <entrada> <diretório emoldurado> --resolution <predefinição> verifica se cada entrada tem um PNG válido do tamanho correto, mais a capa. Não julga a aparência.
2. Leia cada PNG de saída (e a capa). Procure por captura de tela em branco ou parcialmente carregada, conteúdo cortado, texto ilegívelmente pequeno, estilo errado (recibo em janela de navegador), barra de endereços errada. Reexecute apenas os arquivos afetados com opções ajustadas, depois reverifique. Se não puder visualizar imagens, diga isso.
3. Relate: pasta emoldurada, arquivos que falharam ou foram refeitos, o par da capa e, em uma frase, por que os dois se complementam.