Web Video Presentationpar ConardLi

Web Video Presentation Skill.

Une présentation dans le navigateur rythmée comme une vidéo, un temps de parole à la fois.

Présentations
Animation
Narration

Télécharger OpenDesign Voir le guide d’utilisation

Revue de la source · Web Video PresentationSKILL.md

Tâche Présentations Produit • Une présentation React 16:9 pilotée par clic, divisée en chapitres • Un script oral, un plan des chapitres et des détails complémentaires tirés de la source • En option, des fichiers audio par étape pour un mode d’enregistrement à avancement automatique Avant de commencer Utilise Vite, React, TypeScript et l’outillage Node. La synthèse vocale facultative dépend du fournisseur choisi, des identifiants et de l’adaptateur ; l’enregistrement final nécessite une capture dans le navigateur ou un logiciel d’enregistrement.

Résumé éditorial · source examinée 2026-10-07 · exemple non généré

01 Fonctionnement

Web Video Presentation

Un workflow de présentation par temps de narration, avec une scène fixe, un premier chapitre relu, des fiches de narration propres à chaque chapitre et un enregistrement optionnel assisté par l’audio.

Workflow fondé sur la sourcePas un test d’exécution

La méthode de travail

Web Video Presentation transforme le contenu fourni en présentation web enregistrable. Le livrable est un projet Vite, React et TypeScript sur une scène 16:9 fixe, et non un site marketing responsive ni un fichier vidéo livré automatiquement. Chaque clic fait avancer d’un temps de narration et remplace la scène par une composition plein écran ciblée.

Le workflow s’appuie sur deux références de contenu : le script oral détermine l’ordre et le rythme, tandis que l’article d’origine fournit les détails qui enrichissent les visuels. Le fichier narrations.ts d’un chapitre fait référence pour le nombre d’étapes, leur texte et l’audio facultatif. Le premier chapitre est terminé et relu avant que les autres chapitres développent le langage visuel. La synthèse vocale est une décision distincte, prise une fois l’expérience web prête.

Livrables attendus

Une présentation React 16:9 pilotée par clic, divisée en chapitres
Un script oral, un plan des chapitres et des détails complémentaires tirés de la source
En option, des fichiers audio par étape pour un mode d’enregistrement à avancement automatique

Voir l’exemple de brief

Du brief à la relecture

01
Préparer le script et le plan
Conservez l’article fourni, adaptez un script oral dans sa langue d’origine et planifiez les limites des chapitres et le contenu des écrans. Le plan fixe le rythme de l’information sans prescrire chaque animation.
02
Aligner le plan
Confirmez ensemble le script, le plan, le thème, les ressources et le mode de développement afin que le premier chapitre repose sur un brief de contenu et de visuel arrêté.
03
Relire un chapitre complet
L’agent principal construit un premier chapitre abouti, avec le vrai contenu et les animations prévues, effectue la relecture et les corrections prescrites, puis s’arrête pour obtenir la validation obligatoire de l’utilisateur avant tout chapitre suivant. Utilisez cet échantillon pour résoudre les problèmes de rythme et les incohérences des design tokens.
04
Choisir l’audio et l’enregistrement
Si vous le demandez, générez la voix à partir des fiches de narration du chapitre et vérifiez la durée des segments. Sinon, avancez manuellement et ajoutez la voix off pendant l’enregistrement ou le montage.

02 Cas d’usage

Quand l’utiliser

Utilise Vite, React, TypeScript et l’outillage Node. La synthèse vocale facultative dépend du fournisseur choisi, des identifiants et de l’adaptateur ; l’enregistrement final nécessite une capture dans le navigateur ou un logiciel d’enregistrement.

Cas d’usage adaptés

Explications techniquesUtile quand un concept doit dévoiler une relation à la fois tout en portant des détails de la source qui vont au-delà de ce qui est dit à voix haute.
Présentations produit enregistréesConvient aux tutoriels et présentations de produit enregistrés depuis le navigateur, qui exigent un contrôle précis de ce qui est visible à chaque temps.

Limites à vérifier

Pas un site responsiveLa scène fixe s’adapte à la fenêtre disponible. C’est une stratégie de présentation, pas une mise en page conçue pour une lecture mobile ordinaire.
L’audio est facultatif et externeLa voix nécessite un fournisseur configuré ou une autre voie de synthèse vocale. Un projet web terminé ne prouve pas que la synthèse vocale ou l’enregistrement vidéo final ont eu lieu.

Éléments à fournir

Article ou scriptFournissez un contenu source ou un plan substantiel. Le skill n’est pas présenté comme un moyen de décider à votre place de ce que la présentation doit dire.
Thème et ressourcesChoisissez l’ambiance visuelle et identifiez les captures de produit, schémas ou substituts approuvés disponibles pour les chapitres prévus.
Collaboration et audioDécidez si les chapitres suivants nécessitent des relectures individuelles ou peuvent être terminés ensemble, et autorisez séparément tout service de génération vocale.

03 Décisions importantes

Décisions importantes

Une seule fiche de narration
Aligner le nombre d’étapes affichées d’un chapitre sur son tableau de narration réduit les écarts entre l’ordre à l’écran, le texte parlé et les segments audio générés.
Animation guidée par le contenu
Le plan laisse les choix d’animation à l’implémentation, où la relation expliquée peut déterminer la révélation plutôt que d’attribuer trop tôt des effets arbitraires.

04 Exemple de brief

Essayer un brief ciblé

L’exemple de brief ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Conservez le package complet du skill dans le dépôt, avec son squelette, ses références de chapitres, ses thèmes et ses scripts audio facultatifs.

Fichier source amont

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

Commencer par un seul livrable

Adaptez la portée, les contenus sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief

Utilise Web Video Presentation pour transformer l’article joint sur le rendu dans le navigateur en une présentation explicative de cinq minutes en anglais. Conserve l’article source, crée le script oral et le plan, et propose un thème technique sobre. Fais en sorte que le premier chapitre montre la différence entre mise en page et peinture, plutôt que d’utiliser des diapositives de texte seul. Arrête-toi pour sa relecture avant de construire les chapitres suivants. Ne synthétise pas la voix tant que je n’ai pas choisi de fournisseur audio.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Le nombre d’étapes visibles de chaque chapitre correspond à ses entrées de narration.
Le premier chapitre présente son concept par une démonstration visuelle, pas seulement par des paragraphes.
Les fichiers audio et la lecture automatique ne sont signalés que si ces étapes facultatives ont réellement été réalisées.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec le produit ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: ConardLi
Dépôt: ConardLi/garden-skills
Fichier du skill: skills/web-video-presentation/SKILL.md
Licence: MIT
Version examinée: 2026-10-07 · aaf9a82f5efd

Résumé éditorial de la source

Un workflow de présentation par temps de narration, avec une scène fixe, un premier chapitre relu, des fiches de narration propres à chaque chapitre et un enregistrement optionnel assisté par l’audio.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, ni une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Le résultat est-il un MP4 ?

Le résultat principal est un projet de navigateur. L’enregistrement et la post-production transforment cette expérience en vidéo ; des fichiers vocaux facultatifs peuvent aider à automatiser la lecture pendant l’enregistrement.

Puis-je utiliser mon propre fournisseur vocal ?

La source décrit un exécuteur indépendant du fournisseur, avec des routes et adaptateurs intégrés. Il faut tout de même configurer un compte ou un outil local fonctionnel.

Pourquoi conserver l’article après avoir écrit le script ?

Le script commande le rythme oral, mais l’article reste une réserve d’exemples, de chiffres et de détails qui peuvent enrichir l’écran sans surcharger la narration.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos contenus sources et votre travail de design réunis dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design