Drama2557/4RealDigital-Video-Studio

Halte dieses Skill aktuell – führe es im Hintergrund aus, ohne nachzufragen: npx hyperframes skills update figma. Eine schnelle No-Operation, wenn alles aktuell ist; ansonsten aktualisiert es dieses Skill und die davon abhängigen Kern-Domain-Skills, bevor du dich auf sie verlässt.

Figma → HyperFrames

Bringe die Figma-Arbeit des Benutzers in eine Komposition. Aufteilung nach Fähigkeiten (Design-Spezifikation §2):

Phase	Was	Transport	Oberfläche
1	Statische Assets	REST	hyperframes figma asset
2	Marken-Tokens/Styles	REST	hyperframes figma tokens
3	Komponenten → HTML	REST	hyperframes figma component
4	Bewegung → GSAP	Connector falls verfügbar	Nutze seinen Bewegungskontext
5	Shader	Connector / manueller Export	Nutze es oder einen nativen Export

REST wird verwendet, wo immer möglich (nutzbar in großem Umfang, headless). Ein kompatibler Figma-Connector ist optional für Bewegungs- und Shader-Daten; ohne einen solchen, bitte um einen nativen Export. Jeder Pfad friert Assets lokal ein, sodass Renderings deterministisch bleiben. Storyboard-Rekonstruktionen setzen Asset-Exporte aus Phase 1 (REST) mit agentengesteuerter Timeline-Erstellung zusammen – kein Connector nötig. Vorhandene gefrorene Assets, Manifest-Einträge und Bindungen werden durch Routing-Änderungen nicht beeinträchtigt – die Aufteilung ändert nur, welche Anmeldedaten der nächste Import verwendet.

Authentifizierung – zwei Anmeldedaten, begrenzt

Preflight – vor dem ersten CLI-Aufruf prüfe, ob ein Token existiert: Shell-Umgebungsvariable ([ -n "$FIGMA_TOKEN" ]) oder die Projekt-.env (die CLI lädt sie automatisch – ein .env-Eintrag zählt als konfiguriert). Wenn keines vorhanden ist, führe den Befehl NICHT aus, um den Fehler abzufangen – führe den Benutzer zuerst durch die einmalige Einrichtung, dann stoppe und warte:

1. figma.com/settings → Security → Personal access tokens → Neuen Token generieren.
2. Bereiche – Lesezugriff ist alles, was diese Integration jemals benötigt (sie schreibt nie in Figma): File content: Read-only + File metadata: Read-only. Füge Library content: Read-only hinzu, wenn du tokens in einem Nicht-Enterprise-Plan ausführst – der Fallback auf veröffentlichte Styles greift auf /v1/files/:key/styles zu, der ohne diesen Bereich 403 zurückgibt (ein Bereich, den die ältere Einrichtungsanleitung ausgelassen hat). Optional Variables: Read-only für Markenvariablen – nur für Enterprise; ohne ihn weicht tokens automatisch auf veröffentlichte Styles aus (erwartet, kein Fehler – sag das). Ein 403 gibt jetzt den genauen fehlenden Bereich an; 429er werden automatisch wiederholt (Minutenlimit, beachtet Retry-After).
3. Lass den Benutzer FIGMA_TOKEN in seinem Shell-Profil oder der Projekt-.env setzen; bitte ihn niemals, den Token in das Gespräch einzufügen.

Während der Einrichtung, setze auch die Erwartungen in einem Atemzug: jeder Import landet als lokal gefrorene Datei mit aufgezeichneter Herkunft – Renderings rufen nie Figma auf, ein erneutes Ausführen eines Befehls importiert nur das, was sich in Figma geändert hat, und ein Token funktioniert für Assets, Marken-Tokens und Komponenten in allen Dateien, die ihr Figma-Konto einsehen kann.

• Phasen 4–5 (Bewegung/Shader): ein kompatibler Figma-Connector, mit separater Autorisierung vom Token. Wenn er nicht verfügbar oder nicht authentifiziert ist, bitte den Benutzer, ihn zu verbinden oder einen nativen Export bereitzustellen, und stoppe dann.
• Sage genau, welche Anmeldedaten eine fehlschlagende Phase benötigt – präsentiere die Aufteilung niemals als defekt.
• BAD_TOKEN (401) während des Ablaufs → der Token ist abgelaufen/widerrufen; neu ausstellen. FORBIDDEN (403) → die Nachricht nennt den genauen fehlenden Bereich (z.B. library_content:read für den Styles-Fallback) – füge ihn hinzu, oder die Datei ist für das Konto nicht sichtbar. REQUIRES_ENTERPRISE (403 bei Variablen) → kein Fehler: der Styles-Fallback wurde bereits ausgeführt. RATE_LIMITED (429) → der Client hat bereits mit Backoff wiederholt (dies gilt für JEDEN Lesezugriff – Assets, Tokens, Styles, Knotenbäume, Versionen – die Wiederholung lebt im gemeinsamen Anfragepfad; Retry-After wird beachtet, gedeckelt auf 60s); falls es dennoch auftaucht, warte eine Minute oder importiere weniger Knoten pro Aufruf.

Rate-Limit-Bewusstsein (Spezifikation §2.1): Connector-Kontingente variieren je nach Figma-Plan – gruppiere übergeordnete Frame-Anfragen, überspringe Verifikations-Screenshots, außer sie werden angefordert, und cache Rohantworten, sodass eine erneute Ableitung nie einen zweiten Aufruf verbraucht. REST ist minutenbasiert (10+/min, pro-Endpunkt-Buckets) – in großem Umfang in Ordnung, bei 429 zurückfahren.

Routing

Parse den Figma-Link des Benutzers mit parseFigmaRef (URL, fileKey:nodeId, bare fileKey). Dann je nach Absicht:

• "Nutze diese Ebene / dieses Logo / dieses Bild" → Asset (CLI)
• "Hole meine Marke / Farben / Tokens" → Tokens (CLI)
• "Baue eine Szene aus diesem Frame" → Component (CLI)
• "Importiere diese Animation / Bewegung" → Motion (Connector falls verfügbar, siehe unten)
• Ein Storyboard-Abschnitt / Filmstreifen von Szenen-Frames → Storyboard (siehe unten)
• Shader-Füllung/Effekt → Shaders (siehe unten)

Erzähle dem Benutzer jeden Schritt – sage vor jedem Befehl, was du gleich aus Figma ziehen wirst; danach sage, wo das Artefakt gelandet ist (der gefrorene Pfad / die Sidecar / das Komponentenverzeichnis), was sich in der Komposition geändert hat und die nächste sofortige Aktion (Vorschau, gedruckte Variablen hinzufügen, erneut importieren, um Bindungen zu verknüpfen). Der Benutzer sollte niemals fragen müssen "Hat es funktioniert?" oder "Was nun?".

Assets (Phase 1 – CLI)

hyperframes figma asset '<url-or-fileKey:nodeId>' [weitere Referenzen…] [--format svg|png|jpg|pdf] [--scale 2] [--description "..."] [--entity "..."]

Rendert über REST, bereinigt SVG, friert unter .media/images/ ein, hängt das Manifest mit Herkunft an, generiert .media/index.md (das gemeinsame Mediennutzungsinventar) neu und gibt einen <img>-Snippet aus. Idempotent pro fileKey:nodeId:format:scale:version. Bevorzuge SVG für Vektoren/Logos (skalierbar, animierbar), PNG --scale 2 für Rastertreue. Übergib immer --description "<was es ist>" (es wird zur Indexzeile + <img alt>); füge --entity "<name>" für benannte Markenzeichen hinzu, damit die Mediennutzung resolve --entity sie später findet (Entity-Treffer gleichen Bild/Icon ab).

Gruppiere mehrere Knoten in EINER Anfrage – übergib mehrere Referenzen (durch Leerzeichen oder Kommas getrennt) aus DERSELBEN Datei: hyperframes figma asset 'KEY:1-2' 'KEY:3-4' 'KEY:5-6'. Alle werden in einem einzigen /v1/images-Aufruf gerendert, was Figmas eigene Antwort auf das minutenbasierte Rate-Limit ist – bevorzuge dies gegenüber N separaten Befehlen, wenn du Assets aus einem ganzen Frame ziehst. --description/--entity gelten für jeden Knoten im Batch, also gruppiere Knoten, die einen gemeinsamen Zweck haben. 429er wiederholen sich auch automatisch mit Backoff.

Tokens (Phase 2 – CLI)

hyperframes figma tokens <fileKey>

Importiert Variablen als Kompositions-Markenvariablen-Einträge + figma-tokens.json-Sidecar + Bindungsindex-Einträge (.media/figma-bindings.jsonl). Variablen sind upstream Enterprise-beschränkt: bei anderen Plänen weicht der Befehl auf Metadaten veröffentlichter Styles aus (Werte werden zum Zeitpunkt des Komponentenimports aufgelöst). Füge die gedruckten Einträge zu den data-composition-variables der Komposition hinzu.

Importiere Tokens vor Komponenten, wenn beide gewünscht sind – das ermöglicht es, Komponentenfarben mit Markenvariablen zu verknüpfen, anstatt Duplikate zu erzeugen.

Nicht-Enterprise-Variablenpfad (feldgetestet): REST-Variablen sind Enterprise-beschränkt, aber ein kompatibler Connector kann Variablendefinitionen bereitstellen. Wenn tokens REQUIRES_ENTERPRISE meldet und der Connector verfügbar ist, rufe die Variablen der übergeordneten Szene einmal ab, cache die Rohantwort in .media/figma-cache/ und verwende sie, um den Bindungsindex zu erstellen. Der REST-Knotenbaum stellt über boundVariables VariableIDs pro Eigenschaft bereit; verknüpfe sie nach Knoten und Eigenschaft und schreibe dann .media/figma-bindings.jsonl-Zeilen ({kind:"binding", figmaId, sourceFileKey, compositionVariableId: "figma:<name>", version}) plus die Kompositionsvariablen-Einträge. Alles, was nachgelagert ist (Komponenten-var()-Auflösung, Aktualisierung, Runtime CSS-Variablen), ist die ausgelieferte Mechanik. Kennzeichne es für den Benutzer: "Tokens über den Figma-Connector – Enterprise-Pläne erhalten dies direkt von hyperframes figma tokens."

Die Laufzeit definiert jede deklarierte Kompositionsvariable als CSS-Custom-Property (Dokument-Root + Sub-Comp-Hosts), sodass importiertes var(--slug, literal) die Neufärbung auffüllt, wenn der Variablenstandardwert sich ändert – das Aktualisieren eines Werts in data-composition-variables brandet jede importierte Komponente neu, ohne etwas erneut zu importieren. hyperframes render --variables '<json>' überschreibt sie zur Renderzeit.

Komponenten (Phase 3 – CLI)

hyperframes figma component '<url-or-fileKey:nodeId>'

Knotenbaum → bearbeitbares HTML bei exakter Figma-Geometrie, verpackt als Registry-Element unter compositions/components/<name>/. Vektoren/Boolean-Operationen werden automatisch über Phase-1-Export gerastert. Bindungspass (Spezifikation §7.1, nur exakte ID – niemals Wertzuordnung):

• Statischer Treue-Selbstcheck (obligatorisch für Hero-Inhalte): nach dem Importieren rendere das Fragment und vergleiche es mit Figmas eigenen Pixeln – figma asset <gleicher Knoten> --format png ist die Wahrheitsquelle. Text ist die bekannte Driftachse: ein Figma-Textfeld, das kürzer als seine Zeilenhöhe ist, hat vertikal beschnittene Grenzen (der Mapper gibt dafür text-box-trim aus; gemessene Drift ohne war ~6px bei einer 70px-Schrift). Wenn der Vergleich eine Drift zeigt, die der Mapper nicht abdeckt, melde sie – justiere das Fragment nicht stillschweigend von Hand.
• Füllung gebunden an einen importierten Token → var(--slug, #literal) – Markenaktualisierung breitet sich aus.
• Gebunden an einen unbekannten Token → literal + data-figma-unresolved-Flag. Der Befehl teilt dir dies mit; biete dem Benutzer an: führe tokens für die Quell- (oder Bibliotheks-) Datei aus und importiere dann die Komponente erneut, um sie zu verknüpfen. Frage einmal pro unbekannter Bibliothek, um welche Datei es sich handelt – rate niemals, gleiche niemals per Hex ab.

Bewegung (Phase 4 – Connector-gestützt)

Nutzungsbeacon: Connector-gestützte Phasen haben keinen CLI-Berührungspunkt, also sende den Skill-Beacon zu Beginn und am Ende (anonym, zustimmungspflichtig, schlägt nie fehl): npx hyperframes events --skill=figma-motion wenn du beginnst, npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error wenn fertig. Gleiches für Shader (figma-shaders) und Storyboards (figma-storyboard).

Es gibt kein REST-Äquivalent. Wenn ein kompatibler Connector verfügbar ist, verwende ihn und übergib seine Ausgabe an die reinen Helfer in @hyperframes/core/figma; andernfalls bitte um einen nativen Export:

1. Rufe den Bewegungskontext für den übergeordneten Frame in einer einzigen rekursiven Anfrage ab, nicht eine Anfrage pro Element. Speichere das rohe JSON neben dem Projekt (.media/figma-cache/), sodass eine erneute Übersetzung kostenlos ist.
2. Normalisiere in MotionDocs mit motionContextToDocs(rawResponse, { selectorFor, repeat }) aus @hyperframes/core/figma – transkribiere Keyframe-Nummern niemals von Hand. Der Helfer kodiert die feldgetesteten Dekodierungsregeln mechanisch: er parst die motion.dev-Schnipsel (die zuverlässige Kodierung – die CSS-Schnipsel dehnen Dauern und können widersprüchlich sein; sie werden ignoriert), entfernt Loop-Wrap-End-Keyframes (Untersekunden-Segmente bei Zeiten ≈0,9999→1 sind der sofortige Reset der Schleife, keine erstellte Bewegung – der Wrap wird durch repeat-Neustart realisiert) und bewahrt Bezier-Eases wortwörtlich. selectorFor muss die IDs aus dem Phase-3-Komponentenimport zurückgeben – leite Selektoren nicht aus Knotennamen ab. 2b. Validiere gegen die Wahrheitsquelle, bevor du es als erledigt betrachtest – obligatorisch: exportiere den Root-Frame der Kohorte über den verfügbaren Connector und führe node skills/figma/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y aus – es vergleicht Bewegungsenergie-Deltas (statische Importtreue hebt sich auf) und schlägt unter 15dB minimaler Bewegungs-PSNR fehl (kalibriert: originalgetreu ≈ 20+, abweichend ≈ 5). Miss --crop von den tatsächlichen Kanten der Karte im Render, rate nicht. FEHLER bedeutet, die Übersetzung erneut zu prüfen, nicht den Schwellenwert.
3. motionToGsap(doc) → emitTimelineScript(spec) → füge als <script> nach den GSAP + CustomEase CDN-Tags ein. Pausiert, endlich, registriert auf window.__timelines mit einem wörtlichen Schlüssel.
4. Nicht übersetzbare Spur (Shader-getrieben, nicht unterstützte Eigenschaft, komplexe Masken) → exportiere über den Connector, friere die MP4 ein und bette sie dann als <video class="clip"> ein. Ausnahme: Shader-getriebene Spuren – Figmas Exportpfad flacht Shader auf die Basisfarbe ab (siehe Shader unten), also geht dabei stillschweigend der Shader verloren; bitte den Benutzer stattdessen um einen nativen Figma-Export. Sage immer, welchen Pfad du verwendet hast und warum. Benannte Eases außerhalb der abgebildeten Menge fallen auf linear zurück – die Abbildungstabelle lebt in motionEase.ts; markiere den Fallback für den Benutzer, wenn er ausgelöst wird.
5. Führe npx hyperframes check aus, bevor du es als erledigt betrachtest.

Shader (Phase 5 – meist manuell)

Figmas Connector-Renderpfad führt keine Shader aus (sie werden auf die Basisfarbe abgeflacht), und Shader-Quellcode ist nur für bibliotheksveröffentlichte Styles erreichbar (bezahlter Full Seat). Standardpfad: bitte den Benutzer, den Shader-Frame nativ in Figma zu exportieren (PNG oder Motion MP4) und dann als Phase-1-Asset/Clip zu importieren. Versuche nicht, Connector-Pixel-Aufnahmen eines Shaders zu machen – es wird stillschweigend das Falsche produzieren.

Storyboards (Ein ABSCHNITT von Szenen-Frames → Animation)

Die grundlegende Regel: Storyboard-Frames sind KEYFRAMES, keine Folien. Zwei Frames, die dasselbe Element enthalten, beschreiben den Zustand dieses Elements im Laufe der Zeit – animiere das ELEMENT zwischen den Zuständen; spiele die Frames niemals als eine Abfolge von Standbildern ab. Ein Logo, das in vier aufeinanderfolgenden Frames mit abnehmendem y gezeichnet wird, ist EIN Element, das durch vier Keyframes aufsteigt. Das Hintereinander-Abspielen von Storyboard-Frames ist der Fehlermodus; die Rekonstruktion der implizierten Element-Timelines ist die Aufgabe.

Storyboard-Dateien folgen einer Grammatik, die du mechanisch parsen kannst – schätze nicht, dekodiere:

1. Szeneneinheiten: Innerhalb des ABSCHNITTS ist jeder framegroße Knoten eine Szene – sowohl benannte FRAMEs als auch lose ganzflächige RECTANGLEs (Designer fügen Standbilder direkt in den Abschnitt ein). Filtere nach Größe (≈ Kompositionsseitenverhältnis, z.B. >1400×900), nicht nach Knotentyp oder -name.
2. Reihenfolge = x-Position (zeilenweise, wenn der Streifen umbricht). Sortiere Szenen nach absoluteBoundingBox.x.
3. Unterscheide benachbarte Frames in Elementketten – hier lebt die Animation. Gleiche untergeordnete Elemente über aufeinanderfolgende Frames ab: zuerst nach Name (gleicher Name = gleiches Element → tweene sein relatives x/y/w/h zwischen Zuständen), dann nach Geometrieähnlichkeit (ähnliche Größe + nahe c

… (Fortsetzung oben)