FĂ€higkeiten hyperframes-cli
📩

hyperframes-cli

Sicher

HTML-Kompositionen mit HyperFrames CLI als Video rendern

HTML-basierte Videokompositionen in MP4- oder WebM-Ausgabe umwandeln, ohne manuelles Rendern. Automatisierung von Scaffolding, Linting, visueller Inspektion und finaler Bereitstellung fĂŒr Content-Ersteller und Entwicklungsteams.

UnterstĂŒtzt: Claude Codex Code(CC)
đŸ„‰ 74 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → FĂ€higkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "hyperframes-cli". npx hyperframes doctor

Erwartetes Ergebnis:

Checking environment...
✓ Chrome: installed
✓ FFmpeg: installed
✓ Node: v22.10.0
✓ Memory: 8GB available

Environment is ready for rendering.

Verwendung von "hyperframes-cli". npx hyperframes lint ./my-project

Erwartetes Ergebnis:

Linting composition...
✓ index.html: valid
✗ compositions/intro.html: missing data-composition-id
⚠ compositions/outro.html: overlapping tracks at 2.5s

1 error, 1 warning found.

Sicherheitsaudit

Sicher
v1 ‱ 4/27/2026

All 69 static findings are false positives. The external_command detections are markdown code examples showing CLI usage, not executable code. Network detections are localhost URLs for local development preview, which is expected. No cryptographic code or malicious patterns exist in this skill.

1
Gescannte Dateien
151
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

QualitÀtsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
91
SpezifikationskonformitÀt

Was du bauen kannst

Video-Generierung in CI/CD-Pipelines automatisieren

Verwenden Sie hyperframes render mit dem Flag --non-interactive, um Videos als Teil automatisierter Workflows ohne manuellen Eingriff zu generieren.

Marketing-Video-Inhalte aus Vorlagen erstellen

Erstellen Sie ein Projekt mit einer Vorlage wie product-promo, passen Sie die HTML-Komposition an und rendern Sie dann das finale MP4 fĂŒr Social Media oder Werbung.

Visuelle Layout-Probleme in Videokompositionen debuggen und beheben

FĂŒhren Sie hyperframes lint aus, um strukturelle Fehler zu erkennen, dann hyperframes inspect, um TextĂŒberlauf und Clipping vor dem finalen Rendern zu identifizieren.

Probiere diese Prompts

Ein neues Videoprojekt erstellen 
Run `npx hyperframes init my-project --non-interactive` to create a new HyperFrames video project in the current directory.
Eine Komposition validieren und inspizieren 
Run `npx hyperframes lint` followed by `npx hyperframes inspect --json` to check for errors and visual layout issues in the current composition.
Eine Komposition als Video rendern 
Run `npx hyperframes render --output final.mp4 --quality high --fps 30` to render the current composition to a high-quality MP4 file.
Änderungen live in der Vorschau anzeigen und testen 
Run `npx hyperframes preview --port 3002` to start the preview server and open the HyperFrames studio for interactive testing.

BewÀhrte Verfahren

  • FĂŒhren Sie lint- und inspect-Befehle vor der Vorschau aus, um strukturelle und visuelle Probleme frĂŒhzeitig zu erkennen
  • Verwenden Sie das Flag --docker fĂŒr reproduzierbare, byte-identische Renderings in verschiedenen Umgebungen
  • Verwenden Sie wĂ€hrend der Iteration Draft-QualitĂ€t und wechseln Sie erst fĂŒr die finale Bereitstellung zu hoher QualitĂ€t

Vermeiden

  • Überspringen Sie die lint- und inspect-Schritte vor dem Rendering nicht – strukturelle Fehler können zu stillen Fehlern fĂŒhren
  • Verwenden Sie 60fps nicht,é™€éžæ˜ŽçĄźéœ€èŠ – es verdoppelt die Rendering-Zeit mit minimalem visuellem Vorteil
  • Rendern Sie wĂ€hrend der Entwicklung nicht direkt in die finale Ausgabe – verwenden Sie Draft-QualitĂ€t, um Zeit zu sparen

HĂ€ufig gestellte Fragen

Was sind die Systemanforderungen fĂŒr HyperFrames CLI?
Node.js Version 22 oder höher und FFmpeg mĂŒssen installiert sein. FĂŒhren Sie npx hyperframes doctor aus, um Ihre Umgebung zu ĂŒberprĂŒfen.
Wie rendere ich ein Video ohne das Vorschaufenster?
Verwenden Sie npx hyperframes render mit dem Flag --non-interactive in CI/CD-Umgebungen oder automatisierten Skripten.
Was ist der Unterschied zwischen lint- und inspect-Befehlen?
Lint prĂŒft strukturelle Fehler wie fehlende Attribute und ĂŒberlappende Tracks. Inspect fĂŒhrt die Komposition in Headless Chrome aus, um visuelle Probleme wie TextĂŒberlauf zu erkennen.
Wie stelle ich konsistente Renderings auf verschiedenen Rechnern sicher?
Verwenden Sie das Flag --docker, das das Rendering in einem Docker-Container mit festen Chrome- und FFmpeg-Versionen ausfĂŒhrt.
Kann ich meiner Videokomposition eine Audiokommentierung hinzufĂŒgen?
Ja, verwenden Sie npx hyperframes tts, um Text-zu-Sprache zu generieren, und npx hyperframes transcribe, um bestehende Audio- oder Untertiteldateien zu importieren.
Welche QualitĂ€tseinstellungen sollte ich fĂŒr die finale Bereitstellung verwenden?
Verwenden Sie --quality high --fps 30 fĂŒr die finale Bereitstellung. Verwenden Sie --quality draft wĂ€hrend der Iteration, um Zeit zu sparen.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-cli/

Ref

main

Dateistruktur

📄 SKILL.md