Web Video Presentationpor ConardLi

Web Video Presentation Skill.

Uma apresentação no navegador com ritmo de vídeo, um momento falado por vez.

Apresentações
Movimento
Narração

Revisão da fonte · Web Video PresentationSKILL.md

Tarefa Apresentações Produz • Uma apresentação React 16:9 controlada por cliques e dividida em capítulos • Um roteiro falado, um esboço de capítulos e detalhes de apoio extraídos da fonte • Arquivos de áudio opcionais por etapa para um modo de gravação com avanço automático Antes de começar Usa Vite, React, TypeScript e ferramentas Node. O TTS opcional depende do provedor escolhido, das credenciais e do adaptador; a gravação final exige captura pelo navegador ou software de gravação.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Web Video Presentation

Um fluxo de apresentação por momentos de narração, com palco fixo, primeiro capítulo revisado, registros de narração por capítulo e gravação opcional assistida por áudio.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Web Video Presentation transforma o material fornecido em uma apresentação web gravável. O artefato é um projeto Vite, React e TypeScript em um palco 16:9 fixo, não um site de marketing responsivo nem um arquivo de vídeo entregue automaticamente. Cada clique avança um momento da narração e substitui a cena por uma composição focada em tela cheia.

O fluxo mantém duas referências de conteúdo: o roteiro falado determina a sequência e o ritmo, enquanto o artigo original fornece detalhes que enriquecem o visual. O narrations.ts de um capítulo é a referência de quantidade e texto para as etapas e o áudio opcional. O primeiro capítulo é concluído e revisado antes de os demais ampliarem a linguagem visual. A síntese de fala é uma decisão separada, tomada depois que a experiência web estiver pronta.

Entregas esperadas

Uma apresentação React 16:9 controlada por cliques e dividida em capítulos
Um roteiro falado, um esboço de capítulos e detalhes de apoio extraídos da fonte
Arquivos de áudio opcionais por etapa para um modo de gravação com avanço automático

Ver o briefing de exemplo

Do briefing à revisão

01
Preparar roteiro e esboço
Mantenha o artigo fornecido, adapte um roteiro falado no idioma original e planeje os limites dos capítulos e o conteúdo das telas. O esboço define o ritmo da informação sem prescrever cada animação.
02
Alinhar o plano
Confirme juntos o roteiro, o esboço, o tema, os recursos e o modo de desenvolvimento, para que o primeiro capítulo tenha um briefing de conteúdo e visual definido.
03
Revisar um capítulo completo
O agente principal cria um primeiro capítulo finalizado, com conteúdo real e o movimento pretendido, conclui a revisão e os reparos prescritos e então pausa para a aprovação obrigatória do usuário antes de qualquer capítulo posterior. Use esse exemplo para resolver questões de ritmo e inconsistências nos tokens de design.
04
Escolher áudio e gravação
Se solicitado, gere a fala a partir dos registros de narração do capítulo e verifique a duração dos segmentos. Caso contrário, use o avanço manual e adicione a locução durante a gravação ou a edição.

02 Quando usar

Quando usar

Usa Vite, React, TypeScript e ferramentas Node. O TTS opcional depende do provedor escolhido, das credenciais e do adaptador; a gravação final exige captura pelo navegador ou software de gravação.

Boa indicação

Explicações técnicasÚtil quando um conceito deve revelar uma relação de cada vez, sem deixar de trazer detalhes da fonte além das palavras ditas em voz alta.
Palestras de produto gravadasServe para tutoriais e apresentações de produto que serão gravados no navegador e exigem controle preciso sobre o que aparece a cada momento.

Limites a verificar

Não é um site responsivoO palco fixo se ajusta à viewport disponível. Isso é uma estratégia de apresentação, não um layout pensado para a leitura comum em dispositivos móveis.
O áudio é opcional e externoA fala exige um provedor configurado ou outra rota de TTS. Um projeto web finalizado não é evidência de que a síntese de voz ou a gravação final do vídeo tenha acontecido.

Traga estas entradas

Artigo ou roteiroForneça conteúdo-fonte ou um esboço com substância. A skill não é apresentada como substituta da decisão sobre o que a palestra deve dizer.
Tema e recursosEscolha o clima visual e identifique as capturas de produto, os diagramas ou os marcadores aprovados disponíveis para os capítulos planejados.
Colaboração e áudioDecida se os capítulos posteriores precisam de revisões individuais ou podem ser concluídos juntos e, separadamente, autorize qualquer backend de geração de fala.

03 Decisões importantes

Decisões importantes

Um único registro de narração
Alinhar o número de etapas renderizadas do capítulo ao seu array de narração reduz divergências entre a ordem das telas, o texto falado e os segmentos de áudio gerados.
Movimento guiado pelo conteúdo
O esboço deixa as decisões de animação para a implementação, em que a relação que está sendo explicada pode determinar a revelação, em vez de atribuir efeitos arbitrários cedo demais.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Mantenha o pacote completo da skill do repositório, incluindo o scaffold, as referências de capítulos, os temas e os scripts de áudio opcionais.

Arquivo de origem upstream

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Comece com uma entrega

Adapte o escopo, o material-fonte e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use Web Video Presentation para transformar o artigo anexo sobre renderização no navegador em um vídeo explicativo de cinco minutos em inglês. Mantenha o artigo-fonte, crie o roteiro falado e o esboço e proponha um tema técnico contido. Faça o primeiro capítulo demonstrar layout versus pintura, em vez de usar slides apenas com texto. Pare para a revisão dele antes de criar os capítulos seguintes. Não sintetize fala até eu escolher um provedor de áudio.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

O número de etapas visíveis de cada capítulo corresponde às entradas de narração.
O primeiro capítulo comunica o conceito com uma demonstração visual, não só com parágrafos.
Arquivos de áudio e reprodução automática só são informados quando essas etapas opcionais foram realmente concluídas.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos do upstream podem mudar.

Responsável pela fonte: ConardLi
Repositório: ConardLi/garden-skills
Arquivo da skill: skills/web-video-presentation/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · aaf9a82f5efd

Resumo editorial da fonte

Um fluxo de apresentação por momentos de narração, com palco fixo, primeiro capítulo revisado, registros de narração por capítulo e gravação opcional assistida por áudio.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O resultado é um MP4?

O resultado principal é um projeto de navegador. A gravação e a pós-produção transformam essa experiência em vídeo; arquivos de fala opcionais podem ajudar a automatizar a reprodução durante a gravação.

Posso usar meu próprio provedor de fala?

A fonte descreve um runner independente de provedor, com rotas e adaptadores integrados. Ainda é preciso configurar uma conta ou ferramenta local que funcione.

Por que manter o artigo depois de escrever o roteiro?

O roteiro controla o ritmo falado, mas o artigo continua sendo um acervo de exemplos, números e detalhes que podem apoiar a tela sem sobrecarregar a narração.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material-fonte e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design