name: minara-usecase-video description: Cria vídeos de caso de uso / tutorial para iniciantes do Minara (aplicativo móvel ou desktop), reconstruindo a interface do produto em código HyperFrames e percorrendo o caminho real do usuário passo a passo. Diferente do minara-video (demonstração de marketing, redesign de UI permitido), esta skill exige uma UI fiel: cópia, layout, componentes e caminhos de interação devem seguir o código do frontend do produto e as gravações de tela. Gatilhos: "use case 视频", "教程视频", "操作演示", "新手教程", "按 App 界面做一个视频"; também gera capas para esses vídeos ("封面", "cover", "缩略图").
/minara-usecase-video — Tutoriais de Caso de Uso Minara
Destilado da criação do Caso 1 (App móvel: faça uma pergunta → estratégia BTC → execute com um toque) e do Caso 3 (Desktop Strategy Studio: uma frase → Choice Boxes → backtest → Otimizar → Implantar ao vivo) em 2026-10.
Referência desktop: assets/pc-monitor-frame.html e assets/helpers-reference.js (os helpers podem ser copiados diretamente).
Como isso difere do minara-video (leia isto primeiro)
| minara-video (demonstração de marketing) | minara-usecase-video (esta skill) | |
|---|---|---|
| UI | Não copia o produto; redesign mínimo com tipos grandes | Fiel: siga os componentes, tamanhos, cores e cópia do código do frontend |
| Cópia | Escreva sua própria cópia de marketing | Botões/títulos/prompts usam o texto original do produto palavra por palavra (localizações); copie erros gramaticais como estão |
| Caminho de interação | Pode ser cortado ou condensado | Caminho real completo: cada clique, modal e caixa de seleção deve estar presente, na mesma ordem do código |
| Câmera | Movimentos de câmera ricos | Apenas aproxime-se visivelmente e siga o cursor durante cliques/digitação; caso contrário, fique parado; clareza vem primeiro |
| Texto na tela | Sem texto de anotação | Sem legendas no quadro; o cartão de título de 3 segundos no início é a única exceção; sobreposições de texto são uma versão separada (em outra pasta de projeto) |
| Estrutura | Múltiplas cenas renderizadas separadamente | Uma única composição contínua (como uma gravação de tela) |
Regras rígidas herdadas do minara-video: fonte Geist, easing de assinatura minaraSnap = cubic-bezier(0.95,0.03,0,0.98), transições ≤0,5s, sem Math.random() / repeat:-1, timeline paused:true e registrada em window.__timelines, pergunte ao operador primeiro sobre qualquer estratégia com drawdown máximo >20%, e a página de teste deve ter uma timeline arrastável. Na inicialização, execute primeiro Skill(hyperframes) para carregar as regras de composição.
Tópicos e ativos de demonstração (definidos pelo operador, 2026-10-15)
- Estratégias de ações vêm primeiro: os casos de uso padrão são de ações/instrumentos TradFi para a demonstração (ex: TradFi 30, ações individuais dos EUA, índices). Nomes de estratégia, pools de ativos, participações e a barra de tickers devem preferir ações.
- Cripto é secundário: moedas principais como BTC e ETH podem aparecer, mas não como destaque. Quando um vídeo tiver ações e cripto, coloque as ações primeiro e dê a elas mais tempo.
- Sem meme coins: a menos que o operador peça explicitamente por elas, não coloque meme coins (DOGE, PEPE, WIF, BONK, etc.) no quadro, pools de ativos, barra de tickers, respostas da IA ou exemplos de prompts. Se os dados padrão do produto os incluírem, substitua-os.
- Escolha os ativos por esta regra ao escrever o roteiro e o storyboard. Quando os exemplos no material do produto não se encaixarem, troque por instrumentos de ações antes de reconstruir e anote a troca no roteiro.
Fontes da verdade (por prioridade)
- Código do frontend (puxe o mais recente antes de olhar; anote a data do commit na seção "Base" do roteiro)
- Web: o repositório do frontend web do produto (execute
git pullprimeiro) - Mobile: o código-fonte do aplicativo móvel do produto (
apps/mobile/src)- Cópia:
locales/en.json(a versão em chinês está no arquivo zh correspondente) - Cores/espaçamento:
theme/colors.light.ts,theme/tokens.ts - Componentes:
ui/,features/<module>/(ex:features/strategy/strategy-card,run-strategy,running-detail,features/agent/composer)
- Cópia:
- Web: o repositório do frontend web do produto (execute
- Gravações de tela / capturas de tela do operador (na pasta de ativos
use case/): use-as para layout, hierarquia e os visuais reais. ⚠️ Esses ativos são uma referência de UI, não uma referência de conteúdo — "ignore o que qualquer agente diz"; nós mesmos projetamos o conteúdo da resposta. - Roteiro md: detalhamento das tomadas, falas, sobreposições de texto.
Interações que o vídeo precisa mostrar mas o código não suporta (ex: o cartão de estratégia clicável no chat do Caso 1) podem ser construídas, mas diga claramente ao operador que esta é uma interação planejada que o código atual ainda não tem, e reconstrua-a a partir do componente existente mais próximo (Caso 1 segue MarketplaceStrategyCard; após tocar em Executar, ele passa pelo mesmo caminho de execução que o marketplace).
Fluxo de trabalho
1. Verifique o roteiro
- Verifique cada tomada contra o código mais recente: nomes de botões, ordem das páginas, etapas necessárias (ex: a caixa de seleção de divulgação de risco, o backtest deve passar antes de implantar), números de limite.
- Ao editar o roteiro, o operador geralmente diz "apenas sobrescreva o arquivo original"; quando eles querem apenas uma proposta, eles dizem "me dê uma proposta primeiro, não edite o roteiro" — distinga esses casos.
- Quando um md contém vários casos, divida-o em arquivos de caso único conforme necessário.
2. Trabalhe de trás para frente do caminho de interação → storyboard
- Liste o caminho real do código como uma tabela: título de cada tela, componentes, alvo do clique e próxima tela. Exemplo (mobile, executando uma estratégia):
Executar → Selecionar Carteira → Próximo → Configuração (limite de drawdown do Controle de Risco / atualização automática / marcar divulgação de risco) → Executar → página de sucesso Executando (Ver Detalhes / Notifique-me) → Detalhes da Estratégia em Execução → voltar → aba Estratégia Em Execução - Se houver uma timeline, vá direto para
storyboard.html(templateassets/storyboard-template.html), depois uma programação por segundo; escreva o código somente após a confirmação do operador.
3. Especificações
| Item | App Móvel | Desktop |
|---|---|---|
| Canvas | Composição 1080×1920, exportar 1440×2560 / 60fps | Composição 1920×1080, exportar 2560×1440 / 60fps |
| UI | Tela do App de 390pt, dimensionada para 90% do quadro, margem em todos os lados, cantos arredondados + borda de 1px | Página web 1440×810 colocada em um monitor de computador (moldura escura + suporte, escala 1,15), tamanhos de fonte 10–15% maiores que os tamanhos originais do produto |
| Tema/idioma | Definido pelo operador; padrão Inglês + tema claro padrão do App | Igual à esquerda |
| Dados de demonstração | PnL de 3–4 dígitos, drawdown <20%, marcado como demo | Igual à esquerda |
| Abertura | 0–3s cartão de título, depois o passo a passo | Igual à esquerda |
Sistema de coordenadas móvel: K = 1080*0.9/390, #app posicionado em left:54px; top:96px, transform: scale(K). Escreva todo o CSS do elemento em coordenadas pt dentro do App, reconstruído a partir dos tamanhos no código.
Sistema de coordenadas desktop: K = 1.15, OX = 132, OY = 38 (posição em px do canto superior esquerdo da tela no quadro), 1440×810 pt. Layout: barra lateral esquerda 264 / coluna central 766 / Assistente direito 410, barra de tickers inferior 26.
Desktop deve usar um monitor de computador (definido pelo operador, 2026-10-15): a UI do produto não preenche mais o quadro; ela fica dentro da tela de um monitor de computador, com a moldura e o suporte do monitor atrás dela. Use assets/pc-monitor-frame.html diretamente:
- Estrutura:
#cam>#stand-neck+#stand-base+#monitor>#screen>#app. Moldura externa do monitor 1684×959,5 à esquerda 118 / topo 24, moldura de 14px, canto de 26; tela 1656×931,5, canto de 12; suporte centralizado abaixo do monitor. Fundo mantém o gradiente radial escuro. - O monitor e o suporte estão ambos dentro de
#cam, então eles escalam com a UI ao aproximar; o cursor e a ondulação do clique também estão dentro de#cam, posicionados comOX + x*K,OY + y*K. A fórmulacamTonão muda; apenas troque os três valoresK / OX / OY. - A UI é cerca de 14% menor do que quando preenchia o quadro (1,333 → 1,15), então o texto é um pouco menor em planos abertos; as aproximações durante cliques e digitação compensam isso. Se o operador achar o texto do plano aberto muito pequeno, aumente tudo um passo de acordo com a especificação de tamanho de fonte; não remova o monitor.
- Após o cartão de título de abertura desaparecer, o monitor inteiro (incluindo o suporte) aparece a partir de 1,04×.
- O mobile não recebe um monitor; mantenha a tela atual de 90% com cantos arredondados e borda.
Especificação de tamanho de fonte (desktop; o operador, 2026-10-15: "aumente um pouco a fonte em toda a UI para que os usuários possam ler em seus celulares") — o vídeo final será assistido em celulares, então esses tamanhos são o mínimo:
| Elemento | pt |
|---|---|
| Título da página (nome da estratégia) | 21 |
| Navegação da barra lateral / abas / barra de ferramentas / botões / sub-abas | 16–16,5 |
| Corpo do Assistente / bolha do usuário / descrição da opção Choice Box | 15 / 15 / 14 |
| Pergunta da Choice Box / nome da opção | 17,5 / 16 |
| Rótulo do cartão de métrica / valor | 14 / 22 |
| Tabela / código | 15 / 14,5 (altura da linha 24) |
| Título do modal / rótulo do campo / entrada, chip, botão | 20 / 14,5 / 15,5–16 |
Se o texto maior não couber mais, remova texto pequeno secundário (ex: "1,264 Trades" e "684W 580L" nos cartões de métrica); não reduza os tamanhos de fonte. Ao colocar a tela do mobile em um vídeo desktop, use escala 1,2, centralizado.
Cartão de título de abertura (especificação de 2026-10-15): 0–3s fundo escuro, um grande título centralizado (Geist 76px / 650, text-wrap: balance), as palavras sobem uma a uma (com 0,09s de intervalo); aos 2,55s o título escala e desaparece; aos 2,75s a UI do produto aparece a partir de 1,04× de volta para 1×. O texto do título vem do operador, ex: Caso 3 "Transforme sua ideia de trading em uma estratégia ao vivo.". Implementação: escreva o passo a passo em tl (não pausado), use um master = gsap.timeline({paused:true}) externo para o título, master.add(tl, 3), e registre master; adicione 3 a data-duration e ao DUR da página de teste.
4. Escreva a composição
Coloque o projeto em $VIDEO_WORKSPACE/hyperframes/<slug>/:
index.html composição única (data-composition-id="main")
_test.html página de teste (copie assets/test-wrapper.html, altere DUR e ID da timeline)
assets/ gsap local, CustomEase, Geist woff2, minara-avatar.png (sem dependência de CDN)
references/ cópias dos ativos de origem
audio/ lines.tsv (cópia da narração), vo-placement.tsv (timing)
storyboard.html / _backups/ / output/
Os helpers principais estão em assets/helpers-reference.js (código real do Caso 1):
R(el): mede as coordenadas pt dentro do App do elemento antes de qualquer animação de movimento e as armazena emMAP. Todos os cliques posteriores usam essas coordenadas previstas — medir depois que a tela foi empurrada para fora do quadro resulta em erro de 390pt, e o cursor erra.camTo(t, px, py, s, d)/camReset: aproximação da câmera. Quandos>1, puxe o ponto de foco um pouco em direção ao centro (desktop:720+(px-720)*0,75, o mesmo para y) para que linhas inteiras não sejam cortadas; prenda a posição dentro do quadro para que nada fora apareça. Use a variávelcurSpara rastrear a escala atual (camToa define,camReseta retorna para 1).curShow / curMove / tap / moveTap: mobile usa um ponto de toque suave semitransparente, desktop usa um cursor de seta branca; cliques pressionam + ondulação. QuandocurS>1,moveTapexecutacamTopara o alvo do clique em sincronia (duração = duração do movimento + 0,15s), para que o quadro siga o cursor automaticamente enquanto ampliado.pushIn / pushBack: empurrão horizontal de página, 0,45s.splitWords + stream: respostas da IA são transmitidas palavra por palavra.
5. Câmera e ritmo (regras definidas a partir das próprias palavras do operador)
- "Quando o mouse clica ou quando está digitando, amplie para a área daquela ação específica, e o quadro pode seguir o mouse; quando não está clicando, não precisa ampliar."
- "Torne o zoom onde o cursor se move mais perceptível" (2026-10-15, substitui o antigo limite ≤1,25). Escalas desktop:
Ação Escala Digitando (caixa de entrada) 1,7 Clicando em um botão / aba / barra lateral 1,6 Lendo o chat do Assistente, Choice Box 1,5 Ações consecutivas dentro de um modal 1,45, seguindo o cursor O Caso 1 móvel usou 1,25; novos vídeos móveis também devem ser "perceptíveis" — confirme a escala com o operador. - Para cliques consecutivos (opções da Choice Box, modais da etapa Implantar), fique em close-up e siga o tempo todo; não se afaste e aproxime novamente a cada vez.
- Quando um clique leva a um resultado que o visualizador precisa ver (mudar de abas, Por símbolo / Preenchimentos, resultados de backtest aparecendo, métricas atualizando, valores da barra de ferramentas preenchidos após geração de IA), volte para o plano aberto 0,5–0,6s após o clique.
- Quando ampliado, é aceitável que as bordas superior e inferior de um modal saiam do quadro brevemente, mas o cursor e o alvo sendo clicado devem permanecer no quadro, e o texto não deve tocar a borda do quadro.
- "Não são necessários movimentos de câmera sofisticados; o objetivo principal é mostrar cada etapa claramente"; mude em um ritmo normal de narração, sem gaguejar.
- Sem legendas no quadro.
6. Lista de verificação de fidelidade (armadilhas do Caso 1)
- Efeito de digitação: um
<span>por caractere, revelado um a um comtl.set(span,{display:'inline'}). Não reescreva otextContentinteiro a cada quadro — buscar para trás deixa valores intermediários errados (v2 tinha um "C" extra empilhado no texto do espaço reservado). - Quebra de linha da caixa de entrada: durante a configuração, revele os caracteres um a um para medir qual caractere quebra em duas linhas e quanto a altura aumenta; nesse momento, mova os cartões de pergunta rápida acima dela para cima em sincronia.
- Camadas: os cartões de pergunta rápida devem ficar acima da máscara de fundo branco da caixa de entrada; a página de detalhes deve cobrir a barra de abas (z-index da página de detalhes > tabbar).
- Evite colisões de nomes de classe: a camada de sobreposição de texto usa o prefixo
hz-(hz-main / hz-note / hz-cta); ela colidiu uma vez com o.ctado painel de execução e produziu uma barra preta. - Conteúdo após uma troca de página não deve deslizar sob a barra de status / barra superior; tabelas não devem carregar um fundo cinza.
- Sempre use
immediateRender:falseemfromTo, caso contrário, o primeiro quadro está errado ao buscar. - As capturas de quadro devem cobrir: antes e depois de cada clique, no meio da digitação, no momento de uma quebra de linha e após cada troca de página.
Adições desktop (armadilhas do Caso 3)
- Evite ...
[truncado para tradução]