anandragav/sharepoint-skills-plugin

Animación de Historia Narrada

Cuándo usarlo

Úsalo para una historia de cliente, campaña, lanzamiento de producto, viaje de entrada al mercado, caso de estudio, tutorial de aprendizaje o explicación narrativa que deba reproducirse como una experiencia HTML animada autónoma. Produce solo HTML. No crees una presentación de PowerPoint, archivo de texto de narración, archivo de audio o video a menos que el usuario lo solicite explícitamente.

Debe coincidir con la experiencia editorial de Story Studio, no crear una animación genérica tipo diapositiva. En la carpeta demo/ de este skill en GitHub se encuentran una referencia completa de Story Studio y un ejemplo ficticio llamado Routewise.

Entradas

• Fuente de la historia: resumen proporcionado por el usuario, hechos o una fuente nombrada de SharePoint.
• Opcional: tipo de historia, audiencia, idioma, llamado a la acción, dirección de marca y carpeta de destino.
• Si el usuario no proporciona una fuente, crea una muestra claramente ficticia. Nunca presentes nombres, cifras, resultados o citas ficticias como reales.

Pasos

1. Recopila la historia. Lee una fuente de SharePoint proporcionada antes de escribir. Usa solo los hechos de la fuente o los detalles indicados por el usuario. Si no se proporciona ninguna fuente, etiqueta la historia completa como ficticia.
2. Planea un arco de 6 a 9 escenas. Usa solo tipos de escena apropiados para la historia del sistema Story Studio: título, estadísticas, barras, ruta, red, línea de tiempo, cita, resultado y CTA.
3. Escribe datos de escena listos para narración. Mantén cada campo say en 45 palabras o menos, con cláusulas cortas y pausas naturales. Los titulares deben ser concisos y pueden usar solo <em> para énfasis editorial. Cada número visible debe provenir de la fuente. Usa [placeholder] donde se necesite un número pero no se proporcione.
4. Construye un único archivo HTML completo y funcional sin conexión. No uses CDN, fuentes externas, imágenes externas, llamadas de red o <script src>.
5. Reproduce el diseño y la experiencia de usuario de Story Studio:
   • paleta de papel editorial cálida, tipografía serif para display, etiquetas mono, acento rojo, bordes finos, granulado, escenario 16:9 enmarcado, cabecera, etiquetas de ejecución, folio y contador de escenas;
   • botones de selector de escenas cuando se incluye más de una variante de historia;
   • transiciones de barrido animadas, revelaciones de texto escalonadas, líneas de titular enmascaradas, soporte para movimiento reducido y escenario responsivo a pantalla completa;
   • movimiento específico de escena: estadísticas de conteo ascendente, rellenos de barras, ruta animada y marcadores de mapa, revelación de red de socios, progresión de línea de tiempo, revelación de cita palabra por palabra y ráfaga de confeti de resultado;
   • palabras de subtítulo sincronizadas con el progreso de la narración, indicadores de avance/desplazamiento de escena, botones anterior, siguiente, reiniciar, alternar subtítulos, alternar narración, selector de voz, selector de velocidad, control de pantalla completa, atajos de teclado y texto de estado;
   • etiquetas de accesibilidad, controles visibles, comportamiento responsivo y manejo de prefers-reduced-motion.
6. La narración está ACTIVADA por defecto. Al cargar, configura la narración como habilitada e inmediatamente intenta la síntesis de voz del navegador para la primera escena. Mantén la narración habilitada entre escenas y espera a que termine el habla de cada escena antes de avanzar automáticamente.
7. Incluye un selector de voz. Complétalo usando speechSynthesis.getVoices() con las voces inglesas del navegador/sistema instaladas del espectador más una opción de Voz predeterminada. Reacciona a voiceschanged para que aparezcan voces que cargan tarde. Seleccionar una voz debe reiniciar la narración de la escena actual usando esa voz. No inventes una biblioteca de voces compartida ni afirmes que voces nombradas están disponibles para todos los espectadores.
8. Maneja honestamente las restricciones de reproducción automática del navegador. Los navegadores pueden bloquear el habla audible hasta que el espectador interactúe con la página. Cuando esté bloqueado, muestra un mensaje prominente en el escenario como La narración está lista — selecciona Reproducir para escucharla, preserva el estado de narración habilitada e inicia el habla en el primer clic, pulsación de tecla o toque. No afirmes que el audio se reproducirá automáticamente.
9. No edites manualmente un motor de animación separado después de generar el archivo completo. Valida que el resultado sea un documento HTML completo con controles funcionales y sin dependencias externas.
10. Guarda todos los paneles HTML e historias HTML animadas de este sitio en la biblioteca Informes. No los subas ni publiques en otro lugar a menos que el usuario solicite otro destino.

Formato de salida

Responde brevemente con:

• el arco de escenas de la historia en una línea;
• el nombre exacto del archivo HTML y el enlace;
• controles: Espacio para reproducir/pausar, Flechas izquierda/derecha para escenas, N para narración, C para subtítulos y F para pantalla completa;
• una nota de que el selector de voz lista las voces inglesas instaladas en el navegador/dispositivo del espectador y usa la voz seleccionada para la narración;
• una declaración clara cuando la historia es ficticia o contiene marcadores de posición;
• una nota de que la narración comienza automáticamente cuando el navegador lo permite; de lo contrario, la primera interacción la inicia.

Restricciones

• Nunca inventes nombres de clientes, cifras, citas o resultados cuando se proporcione una fuente real.
• Atribuye las citas reales a la fuente proporcionada.
• Mantén la experiencia final autónoma y abrible en un navegador.
• Usa la voz del navegador del espectador para la narración.
• Si la síntesis de voz o las voces no están disponibles, muestra un mensaje claro en el escenario y mantén la historia visual utilizable.
• Si no se puede leer una fuente de entrada, dilo claramente y no inventes hechos de la fuente.