anandragav/sharepoint-skills-plugin

Animation d'histoire narrée

Quand l'utiliser

Utilisez-la pour un témoignage client, une campagne, un lancement de produit, un parcours d'entrée sur le marché, une étude de cas, un tutoriel d'apprentissage ou une explication narrative qui doit se présenter comme une expérience HTML animée autonome. Produisez uniquement du HTML. Ne créez pas de PowerPoint, de fichier texte de narration, de fichier audio ou de vidéo, sauf si l'utilisateur le demande explicitement.

Reproduisez l'expérience éditoriale de Story Studio plutôt que de créer une animation générique de type diaporama. Une référence Story Studio terminée et un exemple fictif Routewise se trouvent dans le dossier demo/ de cette compétence sur GitHub.

Entrées

• Source de l'histoire : brève fournie par l'utilisateur, faits ou source SharePoint nommée.
• Optionnel : type d'histoire, public, langue, appel à l'action, direction de marque et dossier de destination.
• Si l'utilisateur ne fournit aucune source, créez un exemple clairement fictif. Ne présentez jamais de noms, chiffres, résultats ou citations fictifs comme réels.

Étapes

1. Recueillez l'histoire. Lisez une source SharePoint fournie avant d'écrire. Utilisez uniquement les faits de la source ou les détails fournis par l'utilisateur. Si aucune source n'est fournie, étiquetez l'histoire terminée comme fictive.
2. Planifiez un arc de 6 à 9 scènes. Utilisez uniquement les types de scènes appropriés à l'histoire du système Story Studio : titre, statistiques, barres, itinéraire, réseau, chronologie, citation, résultat et CTA.
3. Écrivez les données de scène prêtes pour la narration. Limitez chaque champ say à 45 mots ou moins, avec des clauses courtes et des pauses naturelles. Les titres doivent être concis et peuvent utiliser <em> uniquement pour l'emphase éditoriale. Chaque nombre visible doit provenir de la source. Utilisez [placeholder] lorsqu'un nombre est nécessaire mais non fourni.
4. Construisez un fichier HTML complet et autonome hors ligne. N'utilisez pas de CDN, de polices externes, d'images externes, d'appels réseau ou de <script src>.
5. Reproduisez le design et l'UX de Story Studio :
   • palette de papier éditorial chaleureuse, typographie serif d'affichage, étiquettes mono, accent rouge, bordures fines, grain, cadre 16:9, en-tête, étiquettes courantes, folio et compteur de scènes ;
   • boutons de sélection de scène lorsque plusieurs variantes d'histoire sont incluses ;
   • transitions animées par balayage, révélations de texte échelonnées, lignes de titres masquées, prise en charge du mouvement réduit et écran plein réactif ;
   • mouvement spécifique à la scène : statistiques comptées, remplissage de barres, itinéraire animé et épingles de carte, révélation du réseau partenaire, progression de la chronologie, révélation mot par mot des citations, et explosion de confettis de résultat ;
   • mots de sous-titres synchronisés avec la progression de la narration, indicateur de progression de scène, boutons précédent, suivant, redémarrer, bascule des sous-titres, bascule de la narration, sélecteur de voix, sélecteur de vitesse, contrôle plein écran, raccourcis clavier et texte de statut ;
   • étiquettes d'accessibilité, contrôles visibles, comportement réactif et gestion de prefers-reduced-motion.
6. La narration est ACTIVÉE par défaut. Au chargement, activez la narration et tentez immédiatement la synthèse vocale du navigateur pour la première scène. Gardez la narration activée entre les scènes et attendez la fin de la parole de chaque scène avant de passer automatiquement à la suivante.
7. Incluez un sélecteur de voix. Remplissez-le en utilisant speechSynthesis.getVoices() avec les voix anglaises installées du navigateur/système du spectateur, plus une option Voix par défaut. Réagissez à voiceschanged pour que les voix qui se chargent tardivement apparaissent. La sélection d'une voix doit redémarrer la narration de la scène actuelle avec cette voix. N'inventez pas de bibliothèque de voix partagée et ne prétendez pas que des voix nommées sont disponibles pour chaque spectateur.
8. Gérez honnêtement les restrictions de lecture automatique du navigateur. Les navigateurs peuvent bloquer la parole audible jusqu'à ce que le spectateur interagisse avec la page. Lorsque cela se produit, affichez un message bien visible dans la scène tel que La narration est prête — sélectionnez Lecture pour l'entendre, conservez l'état de narration activé et lancez la parole au premier clic, appui sur une touche ou toucher. Ne prétendez pas que l'audio est garanti de se lire automatiquement.
9. Ne modifiez pas manuellement un moteur d'animation séparé après avoir généré le fichier complet. Validez que le résultat est un document HTML complet avec des contrôles fonctionnels et sans dépendances externes.
10. Sauvegardez tous les tableaux de bord HTML et histoires HTML animées de ce site dans la bibliothèque Rapports. Ne téléchargez ni ne publiez ailleurs, sauf si l'utilisateur demande une autre destination.

Format de sortie

Répondez brièvement avec :

• l'arc de scènes de l'histoire en une ligne ;
• le nom exact du fichier HTML et le lien ;
• les contrôles : Espace pour lecture/pause, Flèches Gauche/Droite pour les scènes, N pour la narration, C pour les sous-titres et F pour le plein écran ;
• une note indiquant que le sélecteur de voix liste les voix anglaises installées dans le navigateur/appareil du spectateur et utilise la voix sélectionnée pour la narration ;
• une déclaration claire lorsque l'histoire est fictive ou contient des espaces réservés ;
• une note indiquant que la narration démarre automatiquement lorsque le navigateur le permet, sinon la première interaction la démarre.

Contraintes

• N'inventez jamais de noms de clients, chiffres, citations ou résultats lorsqu'une source réelle est fournie.
• Attribuez les citations réelles à la source fournie.
• Gardez l'expérience terminée autonome et ouvrable dans un navigateur.
• Utilisez la voix du navigateur du spectateur pour la narration.
• Si la synthèse vocale ou les voix sont indisponibles, affichez un message clair dans la scène et gardez l'histoire visuelle utilisable.
• Si une source d'entrée ne peut pas être lue, dites-le clairement et n'inventez pas de faits de source.