eyaprak/skills

HyperFrames Studio

Você produz um entre três tipos de saída do HyperFrames: um hook horizontal (intro), um shorts vertical ou um slidedeck 16:9. Os três compartilham o mesmo motor, fontes, fórmula de derivação de marca e predefinição de render — apenas a proporção, a presença de legendas e o enquadramento mudam. Primeiro defina o modo, depois copie e edite o starter pronto no pacote. Nada de escrever composição do zero.

O motor completo está em references/engine.md; as diferenças de modo estão em references/{hook,shorts,slidedeck}.md; transcrição e re-encode em references/transcription.md. Os templates starter estão em assets/templates/<mode>/ — já vêm funcionais com uma paleta placeholder índigo neutra (--brand:#6366f1); são recoloridos com a cor do usuário.

Passo 0 — Defina o modo (Q0, primeiro match vence)

1. Modo explícito nos argumentos — mod:hook|shorts|slidedeck ou expressão clara (intro/hook → hook; shorts/vertical/reels → shorts; slidedeck/apresentação/slide → slidedeck). Trave.
2. Nome da pasta — se a pasta de trabalho/destino termina com -hook / -shorts / -slidedeck, use esse modo.
3. Intenção de proporção — "entrada horizontal" → hook; "vertical" → shorts; "apresentação/deck" → slidedeck.
4. Se nada se aplicar, pergunte com AskUserQuestion: "O que vamos produzir? Hook (horizontal 16:9 intro) / Shorts (vertical 9:16) / Slidedeck (apresentação 16:9)".

Com o modo definido, leia o arquivo references/<mode>.md correspondente e siga suas instruções.

Regras fixas — baked-in em toda execução, não pergunte, não pule

1. Fontes auto-hospedadas — Manrope + JetBrains Mono, 4 fonts/*.woff2 locais, unicode-range turco. Nunca use CDN/fontes embutidas (glyphs turcos quebram). Cada starter já as inclui + OFL.txt; copie fonts/ junto com a composição.
2. Apenas assets/ local — nunca use ../assets ou caminhos de diretório pai (preview/render não acessam diretórios superiores, mídia fica vazia).
3. Tema escuro + cor de marca única — fundo near-black, texto near-white; cada acento deriva de --brand (engine.md §4).
4. Transcrição vem do usuário — em hook/shorts, a transcrição é entrada do usuário. Se não foi colada junto com a solicitação e não existe um transcript.txt na própria pasta do projeto, pare e peça ao usuário — antes de montar a composição, antes de ir para AskUserQuestion. Não assuma que uma transcrição encontrada em outra pasta/projeto pertence a este clipe (mesmo que tenha o mesmo nome) e não execute transcribe por conta própria. Se o usuário disser explicitamente "você extrai", siga transcription.md. Detalhes: transcription.md §Pegar a transcrição.
5. Re-encodeie clipes RAW primeiro — node scripts/reencode.mjs <clip>.mp4 (keyframes densos); referencie o arquivo -src.mp4 re-encodado, não o arquivo bruto (transcription.md).
6. Timeline determinística — gsap.timeline({paused:true}), window.__timelines["main"]=tl, posições em segundos literais; sem Math.random/Date.now/repeat:-1/setTimeout (engine.md §8, §11).
7. Sem exibição de patrocinador — sem logotipo fixo no canto; a marca é uma animação temporal (ou opcionalmente um topmark central).
8. Render apenas para hook + shorts — a entrega desses dois modos é um MP4; predefinição (padrão, pode ser sobrescrita): 1080p · 60fps · 16 Mbps · quality high, fixo em [email protected]. Slidedeck NÃO é renderizado e não se pergunta sobre render — a entrega do deck é presentation/presentation.html (exceção se o usuário pedir vídeo explicitamente; regra: slidedeck.md).
9. Cubra a duração total — data-duration = duração real do clipe/conteúdo; em hook/shorts, verifique após render com ffprobe, no deck, confirme a duração com N × slide.

Passo 1 — Pergunte as escolhas reais uma vez (AskUserQuestion, em português)

Elimine todas as perguntas que foram resolvidas pelos argumentos ou pela detecção do Passo 0. Depois, em uma única chamada AskUserQuestion, combine as perguntas comuns com 2–3 perguntas específicas do modo (para reduzir round-trip). Option 1 é sempre o valor recomendado/detectado. Se não restar nenhuma pergunta, pule a chamada e indique os valores resolvidos em um preâmbulo de uma linha em português.

Perguntas comuns (todos os modos):

• Cor (header "Cor") — Option 1 = hex detectado "(recomendado)" se houver; senão, padrão neutro. 2–3 paletas de exemplo neutras + Other = hex personalizado. O tema permanece Dark.
• Fonte do template (header "Template") — "Usar o starter {mode} pronto no pacote (recomendado)" · se detectado no workspace: "Clonar meu projeto -{mode} anterior".

Perguntas específicas do modo são adicionadas do respectivo references/<mode>.md (hook: Demo/Logos/Encerramento · shorts: Marca/Encerramento/Thumbnail · slidedeck: Slides/Tempo).

Nunca pergunte: no modo slidedeck, "devo renderizar / produzir MP4 / quais saídas devo gerar". Deck é uma apresentação HTML; presentation/presentation.html é sempre gerado e render não é considerado.

Pergunte sempre: se a transcrição não estiver disponível em hook/shorts (regra fixa 4). Este é um pedido direto que vem antes do AskUserQuestion — "Compartilha a transcrição deste clipe no formato [MM.SS - MM.SS]?" — porque sem transcrição, os tempos {in,out} das legendas, HOOK_END/CLOSE e os limites das cenas seriam inventados.

Passo 2 — Monte (handoff)

1. Copie a pasta assets/templates/<mode>/ para o projeto de destino (index.html, fonts/, hyperframes.json, meta.json, package.json, assets/; no deck, também presentation/ — sempre, sem perguntar). Atualize o nome em meta.json/package.json.
2. Siga os passos de build de references/<mode>.md para processar index.html: conecte a mídia, ajuste data-duration para a duração real, aplique a paleta, preencha as cenas/legendas/slides com conteúdo.
3. Valide: npx --yes [email protected] lint → inspect (no deck, também validate) → preview. Extraia frames nos beats principais e faça QA visual (atenção às armadilhas do engine.md §11: posição literal, sem tag de mídia em comentário, WCAG false-positive, composição raiz única).
4. Entregue — de acordo com o modo:
   • hook / shorts → render --quality high --fps 60 --video-bitrate 16M --output "renders/<nome>.mp4", depois confirme a duração com ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 renders/<nome>.mp4; verifique um frame intermediário + stream de áudio. Informe o caminho e a duração claramente.
   • slidedeck → SEM render. Entregue presentation/presentation.html, apresente a tabela de saída de duas linhas do slidedeck.md e explique por que index.html não é aberto com duplo clique. Não faça nem sugira render.

Notas de primeiro uso

• Node.js + npx e ffmpeg no PATH são necessários. A ferramenta HyperFrames é baixada on-demand via npx.
• hyperframes transcribe baixa o modelo whisper no primeiro uso (grande, leva minutos); para turco, use medium/large-v3, não .en (transcription.md).
• As fontes são SIL OFL 1.1 (fonts/OFL.txt); o código do skill é MIT.
• Para detalhes internos do motor CLI/GSAP, delegue ao skill base hyperframes — não repita aqui.