app-preview-craft

app-preview-craft — capturas de tela para lojas, cartões sociais e vídeos 3D com dispositivos

Tudo que este skill produz é uma página (stage/stage.html) posicionada por um tema e capturada por Chrome headless: imagens estáticas são capturadas e finalizadas com sharp, vídeos são renderizados quadro a quadro e enviados para ffmpeg. A mesma página alimenta o estúdio de pré-visualização, portanto o que o usuário vê ali é exatamente o que a CLI exporta.

0. Encontrar o skill, configurar uma vez

Os caminhos abaixo são relativos ao diretório que contém este SKILL.md. Resolva-o uma vez e prefixe os comandos com ele — $SKILL significa esse diretório em todo o documento:

SKILL=/caminho/absoluto/para/app-preview-craft        # a pasta com SKILL.md, scripts/, stage/
# não tem certeza onde foi instalado? (pastas de skills, depois o cache do plugin do Claude Code)
find ./.claude/skills ./.agents/skills ./.goose/skills ~/.claude/skills ~/.agents/skills \
     ~/.gemini/skills ~/.config/goose/skills ~/.claude/plugins \
     -path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1

Em seguida, verifique a máquina. --fix executa npm install dentro do skill quando pacotes estão faltando:

node "$SKILL/scripts/doctor.mjs" --fix

O doctor deve terminar com Ready. A falta de ffmpeg é apenas um aviso (imagens estáticas ainda funcionam). Se reportar que não há WebGL, temas 3D não podem ser renderizados — informe isso em vez de mudar silenciosamente para temas planos.

As saídas vão para o diretório em que o usuário está trabalhando (o cwd do shell) a menos que ele nomeie outra pasta com --out. Nunca escreva renderizações dentro de $SKILL. O estado temporário fica em $TMPDIR/app-preview-craft/ e é removido após cada execução.

1. Fluxo de trabalho

1. Escolha a categoria (o primeiro argumento da CLI) com base no que o usuário pediu:

   Categoria	Produz	Tamanho padrão
   app-store	Um conjunto: uma captura por slide, por tamanho, mais overview.png	iphone-6.9 1320×2868
   social-card	Um cartão (ou --all slides) para og/X/LinkedIn/Instagram/story	og 1200×630
   screen-video	Movimento 2D a partir das telas sozinhas; aceita gravações de tela	reel 1080×1920
   device-video	Vídeo de vitrine de dispositivo three.js	reel 1080×1920
   device-mockup	Imagem estática 3D herói, opcionalmente transparente	mockup-landscape 2400×1600

2. Reúna o conteúdo. Capturas de tela (PNG/JPG/WebP) e/ou gravações (MP4/MOV/WebM) do projeto do usuário, um por slide, em ordem. Escreva o texto você mesmo, a menos que o usuário o tenha fornecido (veja §4). Sem telas, o aplicativo de amostra incluído "Tempo" é usado — bom para mostrar temas, nunca para um entregável.

3. Escolha um tema. Um tema nomeado pelo usuário vence. Para conjuntos App Store, corresponda a categoria do aplicativo na loja à tabela na §3 e diga qual tema você escolheu e por quê. Quando o usuário estiver indeciso, mostre as opções primeiro:

   node "$SKILL/scripts/cli.mjs" gallery app-store        # → ./gallery-app-store.png
   

   Leia a folha de volta (para que seja renderizada para o usuário) e deixe-o escolher. O estúdio (§8) é a melhor resposta quando ele quiser navegar e ajustar visualmente.

4. Renderize.

   node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \
     --theme ledger \
     --title "Cada euro, *contabilizado*" --title "Orçamentos que *se adaptam*" --title "Privado *por design*" \
     --subtitle "Benefício em uma linha…" --subtitle "…" --subtitle "…" \
     --size iphone-6.9,ipad-13 --set palette.accent=auto
   

5. Inspecione antes de relatar. Leia overview.png (conjuntos), a imagem estática, ou extraia quadros de um vídeo (--frames 1,4,mid,end renderiza quadros PNG em vez de um vídeo — barato para verificar movimento). Procure por manchetes cortadas, texto sobre o dispositivo, dispositivo cobrindo decoração, telas vazias. Corrija com --set/substituições por slide e re-renderize.

6. Relate os caminhos de saída, o tema e o tamanho, e — sempre que um dispositivo 3D aparecer — que CREDITS.txt foi escrito e que o crédito CC-BY deve acompanhar as imagens (§7).

2. Tamanhos

node "$SKILL/scripts/cli.mjs" list sizes --category app-store imprime a tabela. Qualquer WxH também funciona. Vários de uma vez: --size iphone-6.9,iphone-6.5,ipad-13.

• App Store Connect exige o conjunto 6,9" (iphone-6.9) para apps iPhone e ipad-13 para apps iPad; outros tamanhos são opcionais. A saída PNG é achatada (Apple rejeita alpha).
• Tamanhos de tablet trocam automaticamente o telefone por uma moldura de tablet plana, a menos que o tema seja sem moldura. Forneça capturas de tela do iPad para esses slides quando o aplicativo as tiver.
• Vídeos de pré-visualização do app: --size app-preview (886×1920) ou app-preview-ipad, 15–30 s, 30 fps. Uma faixa AAC estéreo silenciosa é adicionada automaticamente (Connect espera áudio).
• Google Play: play-phone, play-tablet e play-feature (1024×500, cartão social).

3. Temas

list themes --category <c> imprime estes com seus layouts. Cada categoria tem ≥ 5.

app-store — cada um modelado em uma categoria popular de aplicativo

Tema	Categoria do app	Inspirado por	Aparência
stride	Saúde e Fitness	Strava, Nike Run Club	laranja vibrante, pílulas condensadas em caixa alta, listras de velocidade, telefone angulado
ledger	Finanças	Revolut, Monzo, Robinhood	malha meia-noite, palavras com gradiente menta→ciano, orbes cromados
serene	Saúde e Mindfulness	Calm, Headspace	aurora pastel, acentos itálicos serifados, tela sem moldura sobre uma bolha suave
canvas	Produtividade	Notion, Things, Linear	papel quente, grade de caderno, serifa grande, telefone tinta plana
sizzle	Comida e Bebida	DoorDash, Uber Eats, Deliveroo	amarelo ensolarado, bolinhas, destaques marcador vermelho, telefone inclinado
wander	Viagem	Airbnb, Hopper, Booking	gradiente crepuscular com um sol retrô que percorre todo o conjunto (panorama)
mixtape	Música e Áudio	Spotify, Apple Music	sua tela desfocada em um fundo brilhante, palavra enorme contornada
arcade	Jogos	Apple Arcade, arte de lançamento de jogos mobile	grade synthwave, aros neon, brinquedos 3D brilhantes
snapshot	Foto e Social	Instagram, BeReal, VSCO	três fotos sem moldura abertas como impressões, malha de filme quente
pulse	Dados de Saúde e Wearables	Oura, WHOOP, Apple Health	preto clínico, brilho carmesim, manchete abaixo de um Pro Max frontal

Os temas emprestam um clima, nunca uma marca: nenhum logotipo, nome ou obra de arte desses aplicativos aparece.

social-card

launch (aurora + telefone inclinado), spotlight (feixe + piso espelhado), pastel-fan (três telas abertas em leque), bento (grade de recortes de tela), neon-grid (synthwave), editorial (papel, serifa, tela duotônica), duo (MacBook + telefone — passe uma tela desktop para o laptop).

screen-video (2D)

carousel, stack (cartões voam para longe), scroll (capturas longas rolam dentro do telefone), zoom-tour (Ken Burns em tela cheia para o focus de cada slide), wall (parede inclinada de telas), store-preview (estilo de pré-visualização App Store — use --size app-preview), grid-reveal.

device-video (3D)

turntable, orbit (câmera arqueia), float (loopável), rise (câmera se aproxima), flip (revelação traseira → frontal), trio (três modelos se abrem em leque), desk (tampa do MacBook abre, telefone desliza ao lado; ambos sobre scene.floor), spotlight (360° em um espelho), synthwave, keyframes (seu próprio movimento de dispositivo e câmera, a partir de motion.keys — veja §5).

device-mockup (imagens estáticas 3D)

studio, noir, pedestal, levitate, lineup (cada modelo de telefone), flatlay, desk-duo. Adicione --transparent para um PNG recortado.

4. Texto

• Manchete por slide: ≤ 6 palavras, um benefício, não uma característica. Coloque 1–2 palavras entre *asteriscos* para destacá-las no estilo do tema; " | " força uma quebra de linha.
• Subtítulo: uma frase curta. Kicker (opcional): um rótulo de uma palavra acima.
• Os primeiros dois slides carregam o argumento de venda — a maioria dos compradores nunca rola além.
• Nunca invente classificações, contagens de downloads, prêmios ou citações de imprensa. Decorações como rating e laurels são para números reais que o usuário lhe der; pergunte quando não tiver certeza.
• Não nomeie concorrentes ou use marcas registradas da Apple/Google no texto além do que as diretrizes da loja permitem.

5. Configurando qualquer coisa

Ordem de resolução, o último vence: base integrada → padrões de layout → tema (e sua cadeia extends) → arquivo de tema personalizado → config do projeto themeOverrides → atalhos da CLI → --set → theme por slide.

• Atalhos: --layout --device --finish --pose --font --body-font --bg --bg2 --bg3 --ink --sub --accent --accent2 --background --pattern --background-image --clean-status-bar --no-decor --duration --fps --speed --intro --outro.
• --set path=value alcança qualquer chave do tema (repetível). list options imprime os caminhos documentados com tipos e intervalos. Valores são coagidos; JSON funciona para listas/objetos: --set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.
• device.pose é x,y,z graus. Os temas permanecem aproximadamente dentro de ±20° de guinada e ±6° de rolagem para que a tela ainda seja legível no tamanho de miniatura da loja; poses mais íngremes funcionam, mas custam legibilidade.
• Cores aceitam auto = a cor mais vívida na primeira captura de tela: --accent auto.
• --device iphone-17-pro | iphone-17-pro-max | iphone-12-pro | galaxy-s21-ultra | macbook-pro-16 | flat[:phone|phone-android|tablet|browser] | frameless | none, ou o id do modelo próprio do usuário (§7).
• Layouts são intercambiáveis dentro de um tipo (list layouts): imagens estáticas — hero-top, hero-bottom, tilt, duo, fan, split, big-type, callout, bento, laptop-phone, showcase, pedestal, lineup, flatlay; vídeos — carousel, stack, scroll, zoom-tour, wall, phone-swap, grid-reveal, turntable, orbit, float, rise, flip, trio, desk, spotlight, keyframes.
• Seu próprio movimento: o layout keyframes move um dispositivo 3D e a câmera através de motion.keys, uma lista de { "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }. at é uma fração de todo o vídeo; um valor que uma chave omite mantém o valor da chave anterior; a primeira chave começa a partir da pose do próprio tema. Eases: linear inOutCubic inOutSine outCubic outQuart outBack inOutQuart outExpo. --theme keyframes --set 'motion.keys=[{"at":0,"y":1.4,"pose":[0,70,0]},{"at":0.3,"y":0.62,"pose":[4,-20,3],"ease":"outQuart"},{"at":1,"pose":[0,15,0],"cam":{"dist":0.9}}]'. Nenhuma biblioteca de animação está envolvida: cada quadro é uma função pura de seu tempo, que é o que permite que os quadros sejam renderizados fora de ordem. Verifique um movimento com --frames 0,2,mid,end.

Temas personalizados são arquivos JSON (ou .mjs) com qualquer subconjunto de chaves de tema mais extends:

{ "extends": "app-store/ledger", "name": "Acme", "palette": { "accent": "#ff5a1f" },
  "type": { "display": "bricolage", "weight": 800 }, "device": { "finish": "#1c1f24" } }

Passe --theme path/to/acme.json, ou coloque-o em ./.app-preview-craft/themes/ (ou ~/.app-preview-craft/themes/) e use --theme acme. list themes mostra os personalizados.

Config do projeto. node "$SKILL/scripts/cli.mjs" init app-store escreve app-preview-craft.json; depois disso node "$SKILL/scripts/cli.mjs" (sem argumentos) o renderiza, e flags ainda o substituem. $SKILL/examples/app-preview-craft.json é um exemplo completo e funcional: texto por slide, decoração e substituições de tema, um arquivo de tema personalizado, uma tela de desktop e uma lista jobs que renderiza um conjunto App Store, um cartão social, um mockup e um vídeo em um comando. Caminhos em uma config são resolvidos relativamente ao arquivo de config.

Chaves por slide: screen, desktop (tela do laptop), title, subtitle, kicker, theme (substituições apenas para aquele slide), decor (substitui a decoração do tema para aquele slide), focus: [x, y, zoom] (alvo do zoom-tour), hold (segundos em um vídeo), trim: [start, end] e at (qual segundo de uma gravação uma imagem estática usa), bigWord (layout big-type).

Itens de decoração são {kind, x, y, scale, rotate, style, layer, delay, …} com x/y como frações da página e style um de glass | solid | light | dark | outline:

kind	chaves extras
badge	text, icon (star bolt heart check sparkle trophy leaf lock music pin flame bell chart shield globe play)
rating	score, label, starColor
laurels	top, text, bottom
chips	items[], icons[], width, lead
notification	app, title, body, time, icon (caminho de imagem) ou glyph, width
stat	label, value, trend, trendColor
callout	rect: [x, y, w, h] da captura de tela para ampliar, w, border, radius
arrow	w, h, text (nota manuscrita), flip, stroke
logo	name, src (caminho do ícone do aplicativo)
store-badge	top, text, ou src para a arte oficial do selo
sparkles confetti	count, colors[], area: [x0, y0, x1, y1], seed
blob	size, color, opacity (fica atrás do dispositivo)
orbs rings shapes	Primitivas 3D: count, shapes[], finish (glossy chrome matte glass iridescent), area, items[]
credit	text (padrão para a linha de crédito do modelo)

6. Telas e tratamentos

• sharp prepara cada captura de tela antes do Chrome iniciar: screen.cleanStatusBar (redesenha uma barra de status iOS 9:41 / bateria cheia — apenas capturas em formato de telefone), tint + tintAmount, duotone: "#escuro,#claro", saturate, brightness, sharpen, e um fundo pré-desfocado para fundos blur-shot.
• Em modelos iPhone, a Dynamic Island é desenhada como uma pílula preta mesclada sobre os recortes de pílula e câmera do modelo, correspondendo ao que o iOS mostra. Forneça capturas de tela com a área da ilha limpa (qualquer captura iOS normal serve); cleanStatusBar mantém a hora e ícones em ambos os lados.
• Uma captura mais alta que a tela rola em vídeos (tema scroll) e mostra seu topo em imagens estáticas (screen.fit=top).
• Gravações são divididas em quadros pelo ffmpeg na taxa de quadros de saída; em vídeos, o slide de cada gravação dura o tempo do clipe (substitua com hold, corte com trim). Imagens estáticas usam um quadro (at, padrão: o meio).
• Telas de laptop colocam uma captura de telefone em letterbox sobre uma cópia desfocada, a menos que o slide tenha uma tela desktop. desktop também aceita uma gravação. No vídeo desk, o conteúdo do laptop é a tela desktop; omita-a e o MacBook mostra uma tela inicial azul da Apple.
• Todos os planos de fundo 3D aceitam background-image (PNG/JPG com opacidade 1:1 como mapa de ambiente para reflexões realistas, ou GRAY/ALPHA como máscara) e background (cor sólida). Cenas 3D com scene.floor também aceitam bg2 para o horizonte e bg3 para o chão.

7. Dispositivos, créditos

O cli pode importar um modelo 3D STL/GLTF/OBJ do usuário: --device path/to/model.glb. Use a altura de 140 mm para telefone, 155 mm para tablet, 13"–16" para laptop. A casca do modelo é uma única cor finish que o tema define; --finish a substitui. Juntamente com cada saída o skill escreve CREDITS.txt com os devidos créditos dos modelos 3D originais (CC-BY 4.0). Os créditos devem viajar com as imagens exportadas; o skill não pode remover ou modificar este arquivo. Sempre informe o usuário sobre a obrigação de crédito.

list devices lista ids de dispositivos integrados.

8. Estúdio de pré-visualização

node "$SKILL/scripts/studio.mjs" --port 3030

Uma página de UI em tempo real que mostra o slide atual, layout, tema e decoração — exatamente como a CLI os renderiza. O usuário pode alternar temas, slides, tamanhos e dispositivos, ajustar cores, adicionar/remover decoração, escrever/editar texto, e exportar um único slide ou todo o conjunto (Download ou Export all). A UI de exportação gera o comando CLI completo para reprodução. Use o estúdio quando o usuário quiser experimentar visualmente; quando ele souber o que quer, a CLI é mais rápida.

9. Exemplos

App Store — conjunto de 3 slides, Tema ledger, dois tamanhos:

node "$SKILL/scripts/cli.mjs" app-store screen1.png screen2.png screen3.png \
  --theme ledger --size iphone-6.9,ipad-13 \
  --title "Cada euro, *contabilizado*" --title "Orçamentos que *se adaptam*" \
  --title "Privado *por design*" --subtitle "Controle total das suas finanças" \
  --subtitle "Categorize e planeje" --subtitle "Seus dados, suas regras" \
  --set palette.accent=auto --out ./minhas-capturas

Cartão social — um cartão OG 1200×630:

node "$SKILL/scripts/cli.mjs" social-card screen.png \
  --theme spotlight --title "Lançamento *Épico*" \
  --subtitle "Disponível agora na App Store" --size og

Vídeo 3D — vitrine giratória:

node "$SKILL/scripts/cli.mjs" device-video screen1.png screen2.png screen3.png \
  --theme turntable --size reel --fps 30 --duration 8 \
  --device iphone-17-pro-max --finish "#1c1f24" \
  --set 'decor=[{"kind":"sparkles","count":12}]'

Config de projeto com jobs:

node "$SKILL/scripts/cli.mjs" init app-store
# editar app-preview-craft.json para adicionar jobs para cartão social, mockup, vídeo
node "$SKILL/scripts/cli.mjs"

Veja $SKILL/examples/app-preview-craft.json para um exemplo completo.

---

app-preview-craft — construa materiais de marketing bonitos para seus aplicativos, totalmente local.