taufiquebuilds/readmereel

O que readmereel faz?

Você transforma o repositório em que está em um pequeno vídeo de lançamento. Você escreve as palavras; um script renderiza o vídeo. Nunca escreva código de animação: as cenas são modelos fixos.

1. Leia o repositório

Leia primeiro o README, depois o manifesto do pacote (package.json, pyproject.toml, Cargo.toml, go.mod), a pasta docs e os arquivos de imagem do repositório. Procure por:

• o nome do projeto e o que ele faz em uma linha
• a dor que ele elimina, nas palavras do usuário
• três coisas que ele faz pelo usuário
• o comando que o usuário executa primeiro (instalação ou início rápido)
• capturas de tela ou diagramas reais (docs/, assets/, .github/, images/, screenshots/, links de imagem no README que apontam para arquivos no repositório)
• um logotipo (PNG ou SVG) e uma cor da marca (do logotipo, dos badges do README ou do CSS)
• a URL do GitHub (de git remote get-url origin) e, se gh funcionar, a contagem de estrelas: gh repo view --json stargazerCount -q .stargazerCount

2. Escreva launch-video/story.json

Crie a pasta launch-video/ na raiz do repositório e escreva launch-video/story.json. Os caminhos são relativos à raiz do repositório. Campos, com limites rígidos que o script impõe:

Campo	Limite	Escreva como
name	24 caracteres	O nome do produto exatamente como está no README
problem	70 caracteres	A dor do usuário, não o produto: "Todo deck de IA parece igual". Mire em cerca de 6-9 palavras para que os espectadores possam ler
promise	60 caracteres	O resultado que o usuário obtém: "Slides que parecem projetados por uma pessoa". Cerca de 6-9 palavras
features	exatamente 3	Cada um com { "title", "detail", "image" }
feature title	40 caracteres	Um resultado, não um nome de componente: "Nunca envia duas vezes no mesmo mês"
feature detail	80 caracteres	Uma frase simples sobre como ou porquê, cerca de 12 palavras
feature image	opcional	Caminho para uma captura de tela real no repositório que mostre este recurso: PNG, JPG, WebP ou SVG. Um GIF animado aparece como um quadro único, e arquivos de vídeo não são aceitos. Prefira imagens cujo texto seja grande o suficiente para ler em tamanho pequeno; pule aquelas que são principalmente vazias ou ilegíveis. Deixe de fora se não houver nenhuma. Nunca crie ou baixe uma.
install	48 caracteres	Um comando, uma linha, exatamente como o README fornece; se for mais longo, use o primeiro comando real mais curto. Nunca use um placeholder como <seu-usuario>: use um valor de exemplo real que o próprio README usa, por exemplo, repoheat dashboard --user ratatui
url	60 caracteres	github.com/dono/repo: sem https://, sem .git. Transforme a saída de git remote como [email protected]:o/r.git ou https://github.com/o/r.git em github.com/o/r
stars		A contagem de estrelas, ou null. Mostrado apenas quando 10 ou mais
logo	opcional	Caminho para um logotipo PNG ou SVG
accent		Cor hexadecimal como #0f766e; a cor da marca, caso contrário, deixe de fora
music	opcional	Apenas se o usuário fornecer um arquivo de áudio (mp3, m4a, wav ou ogg)
endCard		Deixe de fora (true). Defina false apenas se o usuário pedir para não ter a linha "feito com readmereel"

Exemplo:

{
  "name": "agencyrecap",
  "problem": "Relatórios mensais de clientes, feitos e enviados à mão",
  "promise": "Relatórios mensais de clientes que se enviam sozinhos",
  "features": [
    { "title": "PDF personalizado todo mês", "detail": "Seu logotipo e cor, enviados por e-mail a cada cliente no dia que você escolher", "image": "docs/images/report-page-2.png" },
    { "title": "Um painel único", "detail": "Veja quais relatórios foram enviados e reenvie com um clique", "image": "docs/images/dashboard.png" },
    { "title": "Nunca envia duas vezes", "detail": "Segura e tenta novamente quando o Google ou o e-mail falha, e depois avisa" }
  ],
  "install": "docker compose up -d",
  "url": "github.com/taufiquebuilds/agencyrecap",
  "stars": null,
  "accent": "#0f766e"
}

Qualquer campo que não esteja nesta tabela será rejeitado, portanto, um erro de digitação é detectado. Regras de cópia: palavras curtas, sem hype ("revolucionário", "supercarregue", "perfeito", "desbloqueie"), sem emoji, sem pontos de exclamação, letra inicial maiúscula apenas na primeira palavra (exceto nomes próprios), números como dígitos. Cada afirmação deve ser algo que o repositório mostre.

3. Mostre as cenas ao usuário e aguarde

Antes de renderizar, mostre as seis cenas como uma lista numerada e peça "ok" ou alterações:

1. Gancho (3 s): problem
2. Título (3 s): name, promise
3. Recurso 1 (4 s): título, detalhe, arquivo de imagem ou "cartão de texto"
4. Recurso 2 (4 s): igual
5. Recurso 3 (4 s): igual
6. Instalação + estrela (7 s): install, "Estrela no GitHub", url

4. Renderize

scripts/render.mjs está na pasta que contém este SKILL.md. Descubra seu caminho absoluto e execute a partir da raiz do repositório:

node <caminho-absoluto-para-esta-pasta-da-skill>/scripts/render.mjs launch-video/story.json

Ele precisa do Node 22+ e do ffmpeg e informa como instalar qualquer um deles se estiver faltando. Ele precisa de acesso à internet em cada execução: npm (HyperFrames), um download único do Chrome, Google Fonts e o CDN do GSAP. A renderização leva de 3 a 10 minutos, portanto, execute o comando com um tempo limite de pelo menos 15 minutos, ou em segundo plano e aguarde a conclusão. Se o sandbox bloquear a rede, peça ao usuário para permiti-la, ou forneça a eles o comando exato acima e peça para executá-lo eles mesmos.

Adicione --draft para uma renderização mais rápida e de qualidade inferior quando o usuário quiser apenas uma prévia rápida.

Se ele imprimir problemas de história ou problemas de layout, corrija story.json (encurte o texto nomeado) e execute novamente. Se uma renderização falhar, leia o final de launch-video/render.log.

5. Entregue

Informe ao usuário o que foi criado:

• launch-video/video-16x9.mp4: README, Product Hunt, Show HN, YouTube
• launch-video/video-9x16.mp4: X, LinkedIn, Instagram Reels, TikTok
• launch-video/video.gif: cole no topo do README com ![<nome> launch video](launch-video/video.gif)
• launch-video/wide/ e launch-video/tall/: projetos HyperFrames editáveis. Eles são reconstruídos a cada execução, portanto, copie um para outro local antes de editá-lo no HyperFrames Studio (cd launch-video/wide && npx --yes [email protected] preview)

Forneça ao usuário o comando absoluto exato que você executou (com o caminho launch-video/story.json) para que ele possa renderizar novamente sem um agente. Para alterar palavras posteriormente, eles editam story.json e executam o mesmo comando novamente. Sugira adicionar launch-video/wide/, launch-video/tall/ e launch-video/render.log ao .gitignore. Se nenhum recurso tiver uma imagem real, diga que adicionar uma captura de tela ao repositório torna o vídeo mais forte.