Remotion Interactivity
Sélectionné par Skill Harbor — de la guidance pour structurer le markup Remotion afin que la vidéo reste éditable dans Remotion Studio : construire les scènes autour de ce que l'utilisateur doit pouvoir
- Quoi
- Sélectionné par Skill Harbor — de la guidance pour structurer le markup Remotion afin que la vidéo reste éditable dans Remotion Studio : construire les scènes autour de ce que l'utilisateur doit pouvoir
- Coût
- Gratuit
- Prérequis
- Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — de la guidance pour structurer le markup Remotion afin que la vidéo reste éditable dans Remotion Studio : construire les scènes autour de ce que l'utilisateur doit pouvoir sélectionner, déplacer, rogner ou styler indépendamment, exposer les valeurs éditables comme champs de schéma sur chaque instance, rendre les éléments interactifs avec les composants Interactive, garder le texte, les styles, les animations (appels interpolate() inline) et les métadonnées de composition inline pour que Studio puisse les relire et écrire les modifications dans le code, et rendre les paths SVG éditables avec Interactive.Path de @remotion/paths. Deux fichiers compagnons couvrent la structure de timeline éditable et les effets inline. C'est une connaissance appliquée au propre code Remotion de l'utilisateur ; aucune licence n'a été trouvée nulle part dans le dépôt amont au commit épinglé — voir la note de licence de cette fiche. Crédit : @remotion-dev. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans Muse📌 Version épinglée : commit 6c67adcAvant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre. Prérequis — Aucun pour installer ce skill — aucun compte, aucune clé, aucun paiement, et aucun code exécutable dans son dossier. C'est une connaissance pour structurer mon propre markup Remotion pour l'interactivité Studio ; le seul paquet qu'il nomme, @remotion/paths pour les paths SVG éditables, s'ajoute à mon projet à l'usage seulement. Aucune licence n'a été trouvée nulle part dans le dépôt amont au commit épinglé, donc aucune condition de licence n'est énoncée pour lui. Installe-moi « Remotion Interactivity ». Il apprend à l'agent à écrire du markup Remotion que Remotion Studio peut éditer : structurer chaque scène autour d'unités éditables indépendamment, donner à chaque clé de schéma un défaut et une description pour que Studio l'affiche comme un contrôle, utiliser les composants Interactive (y compris Interactive.Path de @remotion/paths pour les paths SVG éditables et les keyframes de paths), préférer le texte inline, les styles inline et les animations interpolate() inline plutôt que les constantes, les spreads et les variables extraites — parce que Studio ne peut lire et keyframer que ce qui est écrit inline — et garder les métadonnées de composition inline sur l'élément <Composition>. Son dossier contient le SKILL.md principal (nom frontmatter remotion-interactivity), timeline-structure.md sur la structure de timeline éditable, inline-effects.md sur les effets à garder inline, son fichier de politique agents/openai.yaml et son icône. Dépôt : https://github.com/remotion-dev/skills (le skill est tout le dossier skills/remotion-interactivity/ au commit épinglé : SKILL.md plus 4 fichiers compagnons, 5 fichiers en tout) Version épinglée : installe le code au commit 6c67adcd9cdbe6eb84d76342da89b225f9161cb2 exactement. Ne substitue pas une version plus récente. Si ce commit est inaccessible, arrête-toi et dis-le-moi. 1. Clone https://github.com/remotion-dev/skills dans un dossier temporaire, place-toi au commit 6c67adcd9cdbe6eb84d76342da89b225f9161cb2, et copie le dossier skills/remotion-interactivity/ de ce checkout. Compare ensuite chaque fichier du dossier aux empreintes enregistrées pour cette fiche le 2026-10-22 : [FINGERPRINTS] - SKILL.md: SHA-256 17effa2e5c589391fd113e8c52b6e531f64dd350a069d69286ff1da9d1ccdedf - agents/openai.yaml: SHA-256 84cd86b0b10e1f8b5be97bbd46677d5f618304303d922f1016ce0ea6a015d4b9 - assets/remotion-icon.svg: SHA-256 5007669bd0555b0f4565b4e7176fa191310ab0039b2ed09d867a9270f5b0ce58 - inline-effects.md: SHA-256 e2204691164855f195ffefc88706785089153a1e97dae06781841575892a30a6 - timeline-structure.md: SHA-256 7edab50c1c594100a2512baf34483d8407c25df37234b0d36c18ad1d256b391b Si un fichier ne correspond pas, il a changé depuis la préparation de la fiche : ne l'installe pas encore, dis-moi ce que tu as trouvé et laisse-moi décider. 2. Lis SKILL.md au complet, et dis-moi en mots simples : ce que le skill fait quand on l'utilise, à quoi il se connecte, s'il lit ou envoie des informations personnelles ou des identifiants, et tout ce qui semble inhabituel. Arrête-toi sur tout signal d'alerte et dis-le-moi avant d'aller plus loin. Confirme ces points à partir des fichiers : - Le dossier du skill contient 5 fichiers et aucun code exécutable : SKILL.md (nom frontmatter remotion-interactivity), timeline-structure.md, inline-effects.md, agents/openai.yaml et l'icône assets (un fichier SVG). - Rien n'est envoyé nulle part pendant l'installation elle-même ; le seul téléchargement à l'installation est le dossier du skill depuis GitHub au commit épinglé. Aucun de mes fichiers de projet n'est lu ni modifié pendant l'installation. - À l'usage, l'agent applique seulement cette connaissance en écrivant ou en refactorant mon propre markup Remotion en local, pour que Studio puisse sélectionner, éditer et réécrire les valeurs ; le seul paquet qu'il nomme, @remotion/paths, s'ajoute à mon projet seulement à l'usage. Aucun identifiant n'est lu et rien n'est envoyé nulle part. - Le point de licence des prérequis fait partie du tableau : aucune licence n'a été trouvée nulle part dans le dépôt amont au commit épinglé, donc ne présente pas ce skill comme MIT, Apache ou open source. - Ne restructure aucune composition, n'ajoute aucun paquet, n'ouvre pas Studio et n'utilise le skill d'aucune façon pendant cette installation : l'utiliser est une étape séparée qui ne commence que quand je demande un travail d'interactivité Remotion plus tard. 3. Quand je dis « yes, install », installe-le comme skill : copie tout le dossier remotion-interactivity dans le répertoire des skills de l'agent, dans un dossier nommé exactement « remotion-interactivity », en gardant ses 5 fichiers dans leur arborescence relative d'origine (SKILL.md à sa racine). 4. Vérifie sans appels réseau : frontmatter valide (name: remotion-interactivity), les 5 fichiers en place avec des empreintes concordantes. N'exécute rien du dossier et n'utilise pas le skill pour vérifier. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (par exemple : qu'aucune licence n'a été trouvée dans le dépôt amont, que c'est de la connaissance seulement pour mon propre markup Remotion, et que l'utiliser est une étape séparée qui ne commence que quand je demande un travail d'interactivité). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
🔒 Sécurité, provenance et ce que ça touche
Le prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.