anandragav/sharepoint-skills-plugin

Animação Narrativa com Histórias

Quando usar

Use para uma história de cliente, campanha, lançamento de produto, jornada de entrada no mercado, estudo de caso, tutorial de aprendizado ou explicação narrativa que deve ser reproduzida como uma experiência HTML animada autossuficiente. Produza apenas HTML. Não crie PowerPoint, arquivo de texto de narração, arquivo de áudio ou vídeo, a menos que o usuário peça explicitamente.

Corresponda à experiência editorial do Story Studio, em vez de criar uma animação genérica no estilo de slides. Uma referência completa do Story Studio e uma amostra fictícia chamada Routewise estão na pasta demo/ deste skill no GitHub.

Entradas

• Fonte da história: breve fornecida pelo usuário, fatos ou uma fonte nomeada do SharePoint.
• Opcionais: tipo de história, público, idioma, chamada para ação, direção de marca e pasta de destino.
• Se o usuário não fornecer nenhuma fonte, crie uma amostra claramente fictícia. Nunca apresente nomes, figuras, resultados ou citações fictícios como reais.

Passos

1. Reúna a história. Leia uma fonte do SharePoint fornecida antes de escrever. Use apenas fatos da fonte ou detalhes fornecidos pelo usuário. Se nenhuma fonte for fornecida, rotule a história concluída como fictícia.
2. Planeje um arco de 6 a 9 cenas. Use apenas tipos de cena apropriados à história do sistema Story Studio: título, estatísticas, barras, rota, rede, linha do tempo, citação, resultado e CTA.
3. Escreva dados de cena prontos para narração. Mantenha cada campo say com 45 palavras ou menos, com cláusulas curtas e pausas naturais. Os títulos devem ser concisos e podem usar apenas <em> para ênfase editorial. Todo número visível deve vir da fonte. Use [placeholder] onde um número é necessário, mas não fornecido.
4. Crie um único arquivo HTML completo e funcional offline. Não use CDNs, fontes externas, imagens externas, chamadas de rede ou <script src>.
5. Reproduza o design e a UX do Story Studio:
   • paleta de papel editorial quente, tipografia de exibição serifada, rótulos mono, destaque vermelho, bordas finas, textura granulada, palco 16:9 emoldurado, cabeçalho, rótulos em execução, fólio e contagem de cenas;
   • botões de seleção de cena quando mais de uma variante de história for incluída;
   • transições de wipe animadas, revelações de texto escalonadas, linhas de título mascaradas, suporte a movimento reduzido e palco responsivo em tela cheia;
   • movimentos específicos de cena: estatísticas com contagem regressiva, preenchimento de barras, rota animada e pinos no mapa, revelação de rede de parceiros, progressão da linha do tempo, revelação de citação palavra por palavra e explosão de confetes de resultado;
   • palavras de legenda sincronizadas com o progresso da narração, indicadores de progresso/scrubber de cena, botões anterior, próximo, reiniciar, alternância de legendas, alternância de narração, seletor de voz, seletor de velocidade, controle de tela cheia, atalhos de teclado e texto de status;
   • rótulos de acessibilidade, controles visíveis, comportamento responsivo e tratamento de prefers-reduced-motion.
6. A narração está ATIVADA por padrão. Ao carregar, defina a narração como habilitada e tente imediatamente a síntese de fala do navegador para a primeira cena. Mantenha a narração habilitada entre as cenas e aguarde o fim da fala de cada cena antes de avançar automaticamente.
7. Inclua um seletor de voz. Preencha-o usando speechSynthesis.getVoices() com as vozes do navegador/sistema do visualizador em inglês, mais uma opção de Voz Padrão. Reaja a voiceschanged para que vozes de carregamento tardio apareçam. Selecionar uma voz deve reiniciar a narração da cena atual usando essa voz. Não invente uma biblioteca de vozes compartilhada nem afirme que vozes nomeadas estão disponíveis para todos os visualizadores.
8. Lide honestamente com as restrições de autoplay do navegador. Os navegadores podem bloquear a fala audível até que o visualizador interaja com a página. Quando bloqueado, mostre uma mensagem proeminente no palco, como A narração está pronta — selecione Reproduzir para ouvi-la, preserve o estado de narração habilitada e inicie a fala no primeiro clique, tecla ou toque. Não afirme que o áudio é garantido para reproduzir automaticamente.
9. Não edite manualmente um mecanismo de animação separado após gerar o arquivo completo. Valide se o resultado é um documento HTML completo com controles funcionais e nenhuma dependência externa.
10. Salve todos os dashboards HTML e histórias HTML animadas deste site na biblioteca Relatórios. Não faça upload ou publique em outro lugar, a menos que o usuário peça outro destino.

Formato de saída

Responda brevemente com:

• o arco de cenas da história em uma linha;
• o nome exato do arquivo HTML e o link;
• controles: Espaço para reproduzir/pausar, setas Esquerda/Direita para cenas, N para narração, C para legendas e F para tela cheia;
• uma observação de que o seletor de voz lista vozes em inglês instaladas no navegador/dispositivo do visualizador e usa a voz selecionada para a narração;
• uma declaração clara quando a história é fictícia ou contém placeholders;
• uma observação de que a narração começa automaticamente quando o navegador permite, caso contrário, a primeira interação a inicia.

Restrições

• Nunca invente nomes de clientes, figuras, citações ou resultados quando uma fonte real é fornecida.
• Atribua citações reais à fonte fornecida.
• Mantenha a experiência final autossuficiente e aberta no navegador.
• Use a voz do navegador do visualizador para a narração.
• Se a síntese de fala ou as vozes não estiverem disponíveis, mostre uma mensagem clara no palco e mantenha a história visual utilizável.
• Se uma fonte de entrada não puder ser lida, diga isso claramente e não invente fatos da fonte.