appariciojunior/video-editor-skills

Hält ein Video-Motion-Graphics-Kit und seine bearbeitbaren Figma-Boards synchron – der Creator entwirft und optimiert in Figma, Claude überträgt die Änderungen in die Remotion-Komponenten und Marken-Tokens und spiegelt Code-Änderungen zurück. Verwende es, wenn der Creator sagt, dass er die Boards geändert hat, ein neues Grafikdesign wünscht oder das Kit in Figma sichtbar haben möchte.

Was ist video-editor-skills?

Diese Fähigkeit richtet sich an Entwickler und KI-Agenten, die mit Figma und Remotion arbeiten, um Video-Motion-Graphics zu erstellen und zu warten. Sie stellt eine bidirektionale Synchronisation zwischen bearbeitbaren Figma-Boards und Remotion-Komponenten her. Der Creator kann seine Designs visuell in Figma optimieren, während Claude Änderungen an Farben, Schriften, Layouts und Abständen automatisch in den Code überträgt (brand.json und Komponenten). Gleichzeitig werden Code-Änderungen in Figma gespiegelt, sodass Boards und Code nie auseinanderdriften. Die Fähigkeit unterstützt die Plattformen Claude Code und VSCode (mit Erweiterungen) und nutzt das Figma MCP-Tool. Sie ist ideal für Teams, die Design und Entwicklung eng verzahnen möchten, ohne den Workflow zu unterbrechen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor

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

Dokumentation

Figma ↔ Motion-Kit

Creators gestalten besser in Figma als in Prompts. Halte jede Kit-Komponente als bearbeitbares Board gespiegelt und lass sie dort editieren.

Einmalig einrichten

Eine Seite in ihrer Brand-Datei (z.B. „Claude - Editierbar") mit einem Abschnitt pro Kit-Version („Motion-Kit v1", „Vlog-Kit v1").
Ein Board pro Komponente in der Video-Framegröße, mit echtem Text, jede Ebene benannt.
Farben und Typografie an Variablen gebunden (eine „Motion"-Sammlung: Tinte, Papier, Akzent/Marker, Graustufen; Schriftgrößen und Abstände als Zahlen), sodass eine Farbänderung ein einziger Edit ist.
Verwende das Figma MCP (lade zuerst dessen figma-use-Fähigkeit, bevor du in die Datei schreibst). Notiere den Datei-Key und die Seite in der CLAUDE.md.

Wenn sie sagen „Ich habe die Boards geändert"

Lies die Ebenen jedes geänderten Boards aus: Schriftarten, Gewichte, Größen, Zeilenhöhen, Abstände, Positionen, welche Variablen verwendet werden, Eckenradius, Striche.
Überführe die Unterschiede in die Komponenten und die brand.json (zuerst Tokens, Komponenten-Code nur für Layout).
Rendere Vorschaubilder derselben Komponenten und vergleiche sie Seite an Seite mit den Boards.
Liste auf, was sich geändert hat („Titel Light 120 → Regular 108, Padding 64 → 80, Label jetzt uppercase mono").

Wenn sich das Kit im Code ändert

(z.B. ein neues Layout mit schmalem Frame, ein Caption-safe-Band) aktualisiere die passenden Boards, sodass die beiden nie auseinanderdriften, oder informiere den Creator, welche Boards nun veraltet sind.

Erlernter Geschmack (frag deinen Creator, das sind Beispiele)

Light/Regular bei großen Größen, niemals Heavy Bold; Monospace Light Uppercase Labels; 80 px Padding; viel Platz; eine flüssige Bewegung pro Element; keine Gerätemockups (die bringen wenig); bevorzuge Textüberlagerungen und persönliche Notizen.