/brag
Você construiu. Agora vamos nos gabar disso.
Requisitos
- Node.js +
npx hyperframes: o mecanismo de renderização;npxo baixa na primeira utilização.npx hyperframes checké a única verificação antes da renderização. - ffmpeg: extração do quadro de pôster e gravação do quadro 0 (etapa 4).
- Opcional:
uvpara análise de pistas de música personalizada (scripts/analyze_music_cues.py); narração Kokoro via Hyperframes quando--voicefor passado. - Os ativos do skill (música, efeitos sonoros) ficam em
assets/dentro deste skill:{{APPDATA}}/devin/skills/brag/assets/quando instalado (POSIX:~/.config/devin/skills/brag/assets/).
Despacho de invocação (deve acontecer primeiro)
Verificação de modelo. Se você for Claude Opus 5.5 e a invocação não pedir o fluxo de trabalho completo (--full, "use o brag completo") ou narração (--voice, que o brag-slim não faz), mude para brag-slim: leia <skill-dir>/slim.md (o skill /brag-slim, incluído aqui) e siga-o para o resto desta execução em vez deste arquivo. Transmita a entrada do usuário e passe quaisquer outras opções (--no-music, --title, ...) como instruções em linguagem natural. Informe o usuário em uma linha primeiro, por exemplo: "Você está no Opus 5.5, então estou usando /brag-slim: construo o vídeo inteiro sozinho. Diga 'use o brag completo' para voltar." Se você for qualquer outro modelo, ou não souber qual modelo é, pule esta verificação.
Antes de inspecionar o projeto, analise a invocação completa de /brag. Se a
invocação contiver --voice, defina voice.enabled = true. Habilite a narração
apenas para essa execução. Não habilite a narração automaticamente e não volte
para o fluxo de trabalho normal sem voz.
/brag transforma o site ou aplicativo do projeto atual em um vídeo de lançamento curto, polido e compartilhável usando Hyperframes. É focado, opinativo e divertido.
O que este skill faz
- Lê o código do projeto atual para entender o aplicativo.
- Planeja um conceito de "brag" curto e específico para este projeto.
- Cria o roteiro e o storyboard do vídeo.
- Entrega um resumo de composição focado ao Hyperframes.
- Valida, renderiza e escreve o texto para compartilhamento.
Analisando a invocação
O usuário pode invocar com linguagem natural ou flags:
/brag
/brag --tone chaotic
/brag --tone polished --format vertical
/brag isso. Faça parecer o lançamento de uma startup ridícula.
Analise estas opções:
| Opção | Valores | Padrão |
|---|---|---|
--tone | predefinição ou descrição livre | inferido |
--format | landscape, vertical, square | landscape |
--duration | segundos | automático (15-25s) |
--no-music | flag | música ativada |
--no-sfx | flag | efeitos sonoros ativados |
--title | string | inferido do projeto |
--voice | flag | narração desativada |
A voz é opcional. Se --voice estiver presente, use Kokoro via Hyperframes e não
adicione nenhuma lógica de seleção de provedor. O fluxo de trabalho de voz é
intencionalmente de provedor único.
O tom pode ser uma predefinição (default, polished, yc-parody, chaotic, deadpan, cinematic, app-store) ou uma direção criativa como "lançamento falso de Série A de 2016", "exposição de museu" ou "anúncio de jogo para celular superproduzido".
Quando o usuário der uma direção de tom livre, mapeie-a para a predefinição mais próxima em termos de ritmo e estrutura, mas preserve a direção do usuário no plano e no resumo de composição.
Orientações para narração
Quando --voice estiver ativado, escreva uma narração que complemente os visuais,
não apenas leia o texto visível, corresponda ao ritmo da cena, soe natural e
conversacional e transite suavemente entre as cenas. Mantenha o roteiro conciso e
específico para o produto, para que a voz pareça parte da edição, em vez de uma
trilha de narração separada.
Diretório de saída
Por padrão, a saída vai para brag-output/. Para evitar sobrescrever execuções anteriores, use um diretório com timestamp:
brag-output-2026-05-04-143022/
Use um timestamp quando:
- O usuário pedir explicitamente uma nova execução sem substituir resultados anteriores
- Um diretório
brag-output/já existir no projeto
Gere o timestamp no início da execução (YYYY-MM-DD-HHmmss) e use-o consistentemente para todos os caminhos de saída dessa execução: plano, resumo, composição, renderização e texto de compartilhamento.
Diretório do skill
<skill-dir> é o diretório que contém este SKILL.md. O carregador do skill imprime "Diretório base para este skill" quando o skill carrega; caso contrário, é onde o skill foi instalado. Os ativos incluídos estão em <skill-dir>/assets/ e os scripts em <skill-dir>/scripts/. Não adivinhe um caminho de instalação: uma cópia instalada em %APPDATA%/devin/skills/ (POSIX ~/.config/devin/skills/), uma instalação de plugin e este repositório colocam tudo em lugares diferentes.
Etapa 1: Inspecionar o projeto
Leia: references/step-1-inspect.md
Examine o diretório do projeto e extraia as informações necessárias para planejar o vídeo "brag".
Verificação: Você consegue responder a todas as 9 perguntas da rubrica de planejamento do brag.
Etapa 2: Planejar e storyboard
Leia: references/step-2-plan.md
Escreva <output-dir>/brag-plan.md (onde <output-dir> é brag-output/ ou a variante com timestamp escolhida acima). Responda à rubrica de planejamento. Comprometa-se com um ângulo criativo. Escreva o storyboard batida por batida, incluindo cenas, texto, tempo, transições e dicas de efeitos sonoros.
Quando a música for selecionada, inclua uma seção compacta de Orientações para pistas de música: leia a predefinição de pista da faixa incluída em <skill-dir>/assets/music/cues/ se presente; caso contrário, observe que as pistas serão detectadas no momento da composição (qualquer faixa agora suporta sincronização de batida — veja references/audio.md). Os metadados das pistas são apenas orientações de tempo opcionais: a história, a legibilidade, o ritmo e a clareza do produto continuam sendo prioridade.
Verificação: <output-dir>/brag-plan.md existe com um storyboard completo. As durações das cenas somam 15–25 segundos.
Etapa 3: Entregar ao Hyperframes
Leia: O skill hyperframes do pacote (contrato de composição HTML/atributo de dados; extensions/hyperframes/wrapper.py encapsula npx hyperframes para doctor/init/render) e animation-direction (vocabulário de movimento, easing, mapeamento batida para visual). Os skills de domínio HeyGen (hyperframes-registry, media-use, hyperframes-cli) são opcionais: se o plugin Hyperframes estiver instalado junto, siga suas orientações nativas; caso contrário, componha nativamente conforme references/step-3-compose.md. /brag é seu próprio fluxo de trabalho: o plano brag e o resumo de composição substituem qualquer etapa de storyline ou SPEC.md, e npx hyperframes check é a única verificação do brag. Não roteie para um fluxo de trabalho genérico de vídeo de lançamento.
Leia: references/step-3-compose.md
Leia: references/audio.md
Escreva o resumo de composição e use Hyperframes para criar a implementação do vídeo em <output-dir>/composition/.
/brag é responsável pelo ângulo do produto, material de origem, storyboard, tom, formato, seleção de áudio, orientações de pistas musicais e expectativas de entrega. Hyperframes é responsável pela estrutura concreta da composição, temporização exata da animação, mecânica de animação, escolhas de tempo de execução, regras de linting e fluxo de trabalho de renderização.
Verificação: npx hyperframes check passa com zero erros dentro de <output-dir>/composition/ (a única verificação do navegador antes da renderização — veja npx hyperframes check --help para o que ele audita).
Etapa 4: Validar, renderizar e entregar
Leia: references/step-4-deliver.md
Valide, pré-visualize, renderize para <output-dir>/brag.mp4, escolha o melhor quadro de pôster para <output-dir>/brag.jpg, grave esse pôster como o quadro 0 do vídeo para que seja a miniatura ociosa em todos os lugares e escreva <output-dir>/share-copy.txt.
Verificação: <output-dir>/brag.mp4 existe. Um pôster do melhor quadro <output-dir>/brag.jpg é escolhido (não um quadro arbitrário) e gravado como quadro 0 de brag.mp4. O texto de compartilhamento está escrito.
Sistema de tom
Sete predefinições de tom acompanham o /brag. Cada uma altera a energia do roteiro, o ritmo, a personalidade da tipografia e o estilo de transição. As predefinições são padrões, não limites.
Definições completas: references/tones.md
| Tom | Energia | Frase de efeito |
|---|---|---|
default | Divertido, limpo, publicável | O padrão de boas vibrações |
polished | Sério, elegante | Para projetos que não são piadas |
yc-parody | Energia de startup sem emoção | Seriedade falsa aplicada a projetos absurdos |
chaotic | Rápido, alto, agressivo | Exagerado e desequilibrado |
deadpan | Calmo, seco, discreto | A piada é que nada é piada |
cinematic | Dramático, escala de trailer | Movimento grande, afirmações maiores |
app-store | Suave, limpo como cartão de recurso | Corporativo, mas não chato |
Sempre permita que uma direção criativa livre refine ou substitua a predefinição.
Leis criativas
Estas se aplicam a todos os vídeos brag, independentemente do tom.
Curto. 15–25 segundos. Nem um segundo a mais sem um motivo. Isso vale mesmo com narração ativada; a narração não estende a janela.
Legível. Mantenha o ritmo alto através de movimento e cortes, nunca piscando texto. Cada linha que o espectador deve ler fica visível tempo suficiente para ser lida (rótulo curto ~0,8s fixo; uma frase ~0,3s por palavra). Entre rápido, depois fixe — nunca entre rápido, depois desapareça.
Específico. O vídeo deve parecer ter sido feito para este projeto exato, não para qualquer projeto.
Mostre a coisa. Pelo menos uma cena deve exibir a IU real, cópia ou um visual chave do produto. Sem preenchimento abstrato.
Sem linguagem genérica de SaaS. "Otimize seu fluxo de trabalho" é proibido. Use a cópia e as afirmações reais do projeto.
A deixa é tudo. Os primeiros 2 segundos determinam se alguém continua assistindo. Planeje a deixa antes de qualquer outra coisa.
Engraçado merece seu lugar. O humor deve vir do absurdo do projeto, não de tentar ser engraçado.
Padrão:
Deixa (2-3s) → Revelação (2-4s) → 2-3 destaques nítidos (5-12s) → Remate/final (2-4s)
Adapte isso. Nem todo projeto precisa exatamente de 3 destaques. O padrão é uma forma inicial, não um modelo.