amirlehmam/amir-motion

O que amir-motion faz?

Regras da casa do Amir para filmes de produto. O filme explica um produto a um tomador de decisão não técnico em 30 a 60 segundos: uma frase por etapa, o produto falando por si, som travado na imagem, um corte limpo em cada formato e idioma, e nada que não seja nosso.

<skill-dir> abaixo é a pasta deste arquivo: ~/.claude/skills/amir-motion para Claude Code, ~/.agents/skills/amir-motion para Pi e outros agentes.

"Invocar um skill" abaixo significa: a ferramenta Skill no Claude Code, /skill:<nome> no Pi, ou então ler <pasta de skills>/<nome>/SKILL.md e segui-lo.

Três skills, um filme. amir-motion possui as regras, o template, o som e o portão. Ele chama dois skills em etapas fixas:

Skill	Possui	Chamado em
stageshow	a aparência da UI do produto: contenção, enquadramento, recorte, objeto focal, história do cursor, frame de pôster	etapas 1, 4
remotion-best-practices	como o Remotion é usado: projeto, marcação, Studio, render, legendas, atualização (roteia para remotion-*)	etapas 2, 5, 8

Quando um deles contradizer uma regra abaixo, a regra vence (por exemplo, a API Act baseada em tempo do stageshow nunca entra em um filme: regra 6).

As 10 regras (vinculantes)

#	Regra	Limite rígido
1	Menos conversa	Uma frase por etapa, no máximo 10 palavras, palavras simples para um tomador de decisão. Uma coisa se move de cada vez. Total de 30 a 60 s.
2	Tempo para ler	Cada frase fica na tela ≥ 1,5 s + 0,3 s por palavra, ≤ 17 caracteres por segundo, em segundos reais após o ritmo. O texto nunca se move enquanto é lido.
3	Mostre, não escreva	O produto explica; a legenda apenas nomeia a etapa. Reconstrua a UI do produto em React (nunca uma captura de tela). Integrações = logotipos. Números = contadores ou gráficos, apenas os reais.
4	Tipo se adequa ao tema	No máximo 3 famílias (serifa de exibição, sem serifa de UI, mono). 3 tamanhos de texto (exibição, legenda, rótulo) de theme.ts. Legenda ≥ 48 px, qualquer palavra da UI que a história aponta ≥ 30 px ou aproximada pela câmera.
5	Sem vermelho, um acento	Vermelho apenas para um erro ou uma ação destrutiva, a menos que esteja na paleta da marca. Uma cor de acento, e ela significa algo (o resultado, a mudança). As cores vivem apenas em theme.ts.
6	Um relógio	Cada batida é um número no próprio relógio da sua cena. Imagem, legendas e som leem os mesmos números. Tudo deriva do quadro: sem animação CSS, timer, Math.random, Date, sem tempo de execução Act do stageshow.
7	Viaje, não dissolva	As cenas se movem como uma câmera (subir, afundar, empurrar para dentro, puxar para trás), nunca um cross-fade cinza. Inícios e paradas suavizados (apenas tokens), saídas ≈ metade de uma entrada, um momento herói por filme.
8	Som é metade do filme	Trilha sonora original sintetizada em um tom, construída na linha do tempo; uma deixa para cada chegada, clique e recompensa, nenhuma para movimento ocioso. Master em -14 LUFS integrado, pico ≤ -1 dBFS.
9	Cada formato é outro corte	Master 16:9 mais um 9:16 recombinado (não um recorte), FR e EN a partir de um único arquivo de cópia. Quadro 0 é uma miniatura real. Legível sem som. Texto dentro de 80 % do quadro.
10	Nada que não seja nosso	Nenhum ex-cliente, ferramenta interna ou marca de terceiros em lugar algum (código, cópia, nomes de arquivo, imagens, metadados). Cada ativo tem uma fonte em ASSETS.md. Nenhum número, logotipo ou depoimento inventado.

Detalhes completos e números: references/rules.md. De onde eles vêm: references/source.md.

Fluxo de trabalho

0. Médico. node <skill-dir>/scripts/doctor.mjs. Ele verifica o Node (22.18+) e instala stageshow e os skills do Remotion de suas fontes oficiais se estiverem faltando. Ele instala para Claude Code e Pi; --agent <id> para outro agente. Se instalou algo, diga: os novos skills carregam na próxima sessão; enquanto isso, leia seus arquivos SKILL.md diretamente.
1. Briefing. Preencha BRIEF.md com o usuário: objetivo, público, promessa (≤ 8 palavras), formatos, duração, marca e suas fontes, prova. Em seguida, a folha de batidas: uma linha por etapa (legenda, o que o produto mostra, som). Arco da história e exemplos: references/brief.md. Para cada cena do produto, planeje-a do jeito stageshow: invoke stageshow e escreva, por cena, o objeto focal, a ação, a recompensa, o que é deixado de fora, e o exemplo dourado mais próximo (hero-demo, payout-flow, choreography, table-edit, loading…). Mostre a folha de batidas e obtenha um sim antes de qualquer cena (Amir decide a substância).
2. Estrutura. Invoke remotion-best-practices e mantenha seu roteador aberto durante toda a construção. Em seguida:

   node <skill-dir>/scripts/new.mjs <pasta> --name "Produto" --forbid "Ex-Cliente,host.interno" --install
   cd <pasta> && npm run score && npm run dev
   

   O template substitui a etapa "criar um novo projeto" do roteador; siga sua etapa "abrir a prévia" (remotion-studio) para que o usuário assista à construção. Use um caminho curto no Windows (C:/Users/<eu>/<nome>-motion): o Chrome headless falha após 260 caracteres. Mapa do template: references/architecture.md.
3. Marca. Coloque a paleta, a fonte de exibição e o logotipo do produto em theme.ts e public/, cada um com sua linha de origem em ASSETS.md. Mapeie os próprios tokens do produto da mesma forma que references/looks.md do stageshow faz. Sem fonte da marca? Pergunte. Nunca invente uma.
4. Cenas do produto (stageshow). Para cada cena que mostra o produto: abra o exemplo dourado que você nomeou na etapa 1 (<stageshow>/examples/<dourado>/) e leia references/craft.md do stageshow (contenção, tipo, espaçamento, ícones), references/framing.md (recorte, calhas, layouts) e references/motion.md (história, cursor, valores que mudam). Construa-a no Remotion com theme.ts, AppWindow, cursorAt e toStage, traduzindo cada movimento do stageshow com a tabela em references/faux-ui.md. Copie a estrutura e as proporções do dourado, nunca sua identidade de produto.
5. Marcação Remotion. Antes de escrever o código da cena, carregue remotion-markup através do roteador; use remotion-captions para legendas no nível da palavra, remotion-multimedia para filmagens reais, remotion-maps para mapas, remotion-interactivity para expor props no Studio. Sob estas regras.
6. Som. Escreva as deixas em cues.ts nos mesmos números de batida, defina o arranjo em scripts/score.mts, execute npm run score. Detalhe: references/sound.md.
7. Diários. npm run stills renderiza uma folha de contato por corte (cada cena após seu início, seu meio, antes de sair, mais o quadro 0). Abra os PNGs e olhe para eles, com o olhar de revisão do stageshow (references/review.md lá): onde o olho pousa primeiro, é o resultado, algo está emoldurado, plano ou vazio? Corrija e repita. Nunca julgue movimento em um navegador em uma máquina com movimento reduzido ativado.
8. Portão e render. npm run lint, depois npm run audit. Corrija cada FALHA, avalie cada AVISO. Depois npm run finish (opções de render: remotion-render através do roteador) e npm run audit novamente: ele mede loudness, tamanho e fps de cada MP4. As regras 1, 3, 4 e 7 precisam de um olho humano: references/checklist.md.
9. Revisão e entrega. Entregue as folhas e o briefing a um revisor de contexto limpo antes que qualquer coisa saia. Entregue os MP4s, as folhas, os AVISOS restantes e o que não foi verificado. Formatos e nomenclatura: references/delivery.md.

Bandeiras vermelhas, pare e corrija

• Uma legenda com mais de 10 palavras, ou duas legendas na tela que o espectador deve ler ao mesmo tempo.
• Uma frase que explica o que o produto poderia mostrar ao fazê-lo.
• Uma captura de tela do produto, um nome real de cliente, um número real de ticket, um logotipo que não seja nosso.
• Um Act do stageshow, a.click() ou setTimeout colado em uma cena em vez de traduzido para batidas.
• Uma cena de produto construída sem um exemplo dourado nomeado do stageshow.
• Um valor hexadecimal ou um tamanho de fonte digitado dentro de uma cena.
• interpolate() sem easing em algo que começa ou para; tudo desaparecendo junto.
• Um número de quadro digitado em Soundtrack.tsx, ou um som que cai entre duas batidas.
• Um cross-fade entre duas janelas escuras (névoa cinza).
• O corte 9:16 feito recortando o 16:9.
• Um quadro 0 em branco ou meio desenhado.
• "Parece bom no Studio": nada é feito antes da folha de contato e da auditoria.