appariciojunior/video-editor-skills

Maintient la synchronisation entre un kit de motion design vidéo et ses plans Figma modifiables : le créateur conçoit dans Figma, Claude applique les changements dans les composants Remotion et les jetons de marque, et reflète les modifications de code en retour.

Qu'est-ce que video-editor-skills ?

Cette compétence est conçue pour les créateurs de vidéos qui utilisent Remotion et Figma, leur permettant de concevoir des composants de kit animés dans Figma (où l'édition visuelle est plus naturelle) et de maintenir une synchronisation bidirectionnelle avec le code Remotion. Elle exploite le MCP Figma pour lire les modifications des plans (polices, tailles, espacements, couleurs via des variables), les applique aux composants Remotion et au fichier `brand.json`, puis génère des rendus de prévisualisation côte à côte pour validation. Lorsque le code change (par exemple, une nouvelle mise en page), la compétence met à jour les plans Figma correspondants ou signale les divergences. Un système de 'goût appris' permet d'affiner les décisions de style (comme l'utilisation de la graisse légère, l'espacement large, l'absence de maquettes d'appareil) en fonction des préférences du créateur. Cette compétence est idéale pour maintenir une cohérence parfaite entre la conception et le code dans un flux de travail vidéo, en évitant la dérive et en accélérant les itérations.

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/appariciojunior/video-editor-skills/tree/HEAD/skills/figma-roundtrip

Documentation

Figma ↔ kit motion

Les créateurs conçoivent mieux dans Figma qu'avec des invites. Gardez chaque composant du kit reflété sous forme de plan modifiable et laissez-les y éditer.

Configuration unique

Une page dans leur fichier de marque (par ex. "Claude - Modifiable") avec une section par version du kit ("Kit Motion v1", "Kit Vlog v1").
Un plan par composant à la taille d'image de la vidéo, copie réelle, chaque calque nommé.
Couleurs et typographie liées à des variables (une collection "Motion" : encre, papier, accent/surligneur, gris ; tailles de police et espacements en nombres) pour qu'un changement de couleur soit une seule édition.
Utilisez le MCP Figma (chargez sa compétence figma-use avant d'écrire dans le fichier). Enregistrez la clé du fichier et la page dans CLAUDE.md.

Quand le créateur dit "J'ai changé les plans"

Lisez les calques de chaque plan modifié : polices, graisses, tailles, hauteurs de ligne, espacements, positions, les variables qu'ils utilisent, rayon d'angle, contours.
Portez les différences dans les composants et brand.json (jetons d'abord, code des composants uniquement pour la disposition).
Générez des rendus de prévisualisation des mêmes composants et comparez-les côte à côte avec les plans.
Listez ce qui a changé ("titre Light 120 → Regular 108, espacement 64 → 80, étiquette maintenant en mono majuscule").

Quand le kit change dans le code

(par ex. une disposition en cadre étroit, une bande de sécurité pour les sous-titres) mettez à jour les plans correspondants pour que les deux ne dérivent jamais, ou indiquez au créateur quels plans sont désormais obsolètes.

Goût appris (demandez à votre créateur, ce ne sont que des exemples)

Light/regular pour les grandes tailles, jamais gras lourd ; étiquettes mono light en majuscules ; espacement de 80 px ; beaucoup d'espace ; un mouvement fluide par élément ; pas de maquettes d'appareil (elles apportent peu) ; privilégiez les superpositions de texte et les notes personnelles.