anandragav/sharepoint-skills-plugin

Erzählte Geschichten-Animation

Wann verwenden

Verwenden Sie dies für eine Kundengeschichte, Kampagne, Produkteinführung, Markteintritts-Reise, Fallstudie, Lern-Tutorial oder narrative Erklärung, die als eigenständige animierte HTML-Erfahrung abgespielt werden soll. Erzeugen Sie ausschließlich HTML. Erstellen Sie kein PowerPoint, keine Textdatei, keine Audiodatei und kein Video, es sei denn, der Nutzer fordert dies explizit an.

Stimmen Sie die Erfahrung auf das redaktionelle Story Studio ab, anstatt eine generische, Folien-ähnliche Animation zu erzeugen. Eine fertige Story Studio-Referenz und ein fiktives Routewise-Beispiel befinden sich im demo/-Ordner dieses Skills auf GitHub.

Eingaben

• Geschichtenquelle: Vom Nutzer bereitgestellte Kurzbeschreibung, Fakten oder eine benannte SharePoint-Quelle.
• Optional: Geschichtentyp, Zielgruppe, Sprache, Call-to-Action, Markenrichtung und Zielordner.
• Wenn der Nutzer keine Quelle angibt, erstellen Sie ein eindeutig fiktionales Beispiel. Präsentieren Sie fiktive Namen, Zahlen, Ergebnisse oder Zitate niemals als real.

Schritte

1. Sammeln Sie die Geschichte. Lesen Sie eine angegebene SharePoint-Quelle, bevor Sie schreiben. Verwenden Sie ausschließlich Fakten aus der Quelle oder die vom Nutzer genannten Details. Wenn keine Quelle angegeben ist, kennzeichnen Sie die fertige Geschichte als fiktional.
2. Planen Sie einen Bogen mit 6–9 Szenen. Verwenden Sie nur geschichtengerechte Szenentypen aus dem Story Studio-System: Titel, Statistiken, Balken, Route, Netzwerk, Zeitstrahl, Zitat, Ergebnis und CTA.
3. Schreiben Sie szenenfertige, vertonungsbereite Daten. Halten Sie jedes say-Feld auf maximal 45 Wörter, mit kurzen Satzteilen und natürlichen Pausen. Überschriften müssen prägnant sein und dürfen nur <em> für redaktionelle Hervorhebungen verwenden. Jede sichtbare Zahl muss aus der Quelle stammen. Verwenden Sie [Platzhalter], wenn eine Zahl benötigt, aber nicht angegeben ist.
4. Erstellen Sie eine einzige, vollständige, offline-fähige HTML-Datei. Verwenden Sie keine CDNs, externe Schriftarten, externe Bilder, Netzwerkaufrufe oder <script src>.
5. Reproduzieren Sie das Story Studio-Design und die Benutzererfahrung:
   • warme redaktionelle Papierpalette, serifenbetonte Auszeichnungsschrift, Mono-Beschriftungen, roter Akzent, feine Rahmen, Korn, gerahmte 16:9-Bühne, Kopfzeile, laufende Beschriftungen, Kolumnentitel und Szenenzähler;
   • Szenenauswahl-Schaltflächen, wenn mehr als eine Geschichtenvariante enthalten ist;
   • animierte Wisch-Übergänge, versetzte Texteinblendungen, maskierte Überschriftenzeilen, Unterstützung für reduzierte Bewegung und reaktionsfähiger Vollbild-Modus;
   • szenenspezifische Bewegungen: Hochzählen von Statistiken, Balkenfüllungen, animierte Routen- und Kartenmarker, Netzwerk-Enthüllung, Zeitstrahl-Fortschritt, wortgenaue Zitat-Einblendung und Konfetti-Ausbruch beim Ergebnis;
   • Untertitelwörter, die mit dem Fortschritt der Vertonung synchronisiert sind, Szenen-Scrubber/Fortschrittsanzeigen, Zurück-, Weiter-, Neustart-Schaltflächen, Untertitel-Umschalter, Vertonungs-Umschalter, Sprachauswahl, Geschwindigkeitsauswahl, Vollbild-Steuerung, Tastaturkürzel und Statustext;
   • Barrierefreiheitsbeschriftungen, sichtbare Steuerelemente, reaktionsfähiges Verhalten und Behandlung von prefers-reduced-motion.
6. Vertonung ist standardmäßig EIN. Stellen Sie beim Laden die Vertonung auf aktiviert und versuchen Sie sofort, die Browser-Sprachsynthese für die erste Szene zu starten. Halten Sie die Vertonung szenenübergreifend aktiviert und warten Sie, bis die Sprachausgabe jeder Szene beendet ist, bevor Sie automatisch weiterschalten.
7. Fügen Sie einen Sprachauswahl-Picker ein. Befüllen Sie ihn mit speechSynthesis.getVoices() mit den installierten englischen Browser-/Systemstimmen des Betrachters sowie einer Standard-Stimm-Option. Reagieren Sie auf voiceschanged, sodass nachladende Stimmen erscheinen. Die Auswahl einer Stimme muss die Vertonung der aktuellen Szene mit dieser Stimme neu starten. Erfinden Sie keine gemeinsame Stimmbibliothek und behaupten Sie nicht, dass benannte Stimmen für jeden Betrachter verfügbar sind.
8. Gehen Sie ehrlich mit den Autoplay-Einschränkungen des Browsers um. Browser können die hörbare Sprachausgabe blockieren, bis der Betrachter mit der Seite interagiert. Zeigen Sie in diesem Fall eine auffällige Bühnenmeldung wie „Die Vertonung ist bereit – wählen Sie Abspielen, um sie zu hören“, bewahren Sie den aktivierten Vertonungszustand und starten Sie die Sprachausgabe beim ersten Klick, Tastendruck oder Berühren. Behaupten Sie nicht, dass Audio garantiert automatisch abgespielt wird.
9. Bearbeiten Sie nach der Erstellung der vollständigen Datei keine separate Animations-Engine von Hand. Überprüfen Sie, ob das Ergebnis ein vollständiges HTML-Dokument mit funktionierenden Steuerelementen und ohne externe Abhängigkeiten ist.
10. Speichern Sie alle HTML-Dashboards und animierten HTML-Geschichten dieser Website in der Reports-Bibliothek. Laden Sie sie nicht hoch oder veröffentlichen Sie sie nicht anderswo, es sei denn, der Nutzer wünscht ein anderes Ziel.

Ausgabeformat

Antworten Sie kurz mit:

• dem Szenenbogen der Geschichte in einer Zeile;
• dem genauen HTML-Dateinamen und Link;
• Steuerung: Leertaste für Abspielen/Pause, Pfeiltasten links/rechts für Szenen, N für Vertonung, C für Untertitel und F für Vollbild;
• einem Hinweis, dass der Sprachauswahl-Picker die im Browser/Gerät des Betrachters installierten englischen Stimmen auflistet und die ausgewählte Stimme für die Vertonung verwendet;
• einer klaren Aussage, wenn die Geschichte fiktional ist oder Platzhalter enthält;
• einem Hinweis, dass die Vertonung automatisch startet, wenn der Browser dies zulässt, andernfalls startet sie bei der ersten Interaktion.

Einschränkungen

• Erfinden Sie niemals Kundennamen, Zahlen, Zitate oder Ergebnisse, wenn eine echte Quelle angegeben ist.
• Ordnen Sie echte Zitate der angegebenen Quelle zu.
• Halten Sie die fertige Erfahrung in sich geschlossen und im Browser öffnbar.
• Verwenden Sie die Browserstimme des Betrachters für die Vertonung.
• Wenn Sprachsynthese oder Stimmen nicht verfügbar sind, zeigen Sie eine klare Bühnenmeldung an und halten Sie die visuelle Geschichte nutzbar.
• Wenn eine Eingabequelle nicht gelesen werden kann, sagen Sie dies klar und erfinden Sie keine Quellenfakten.