🎬

hyperframes

Name: hyperframes
Author: heygen-com

مخاطر منخفضة ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات🔑 متغيرات البيئة

إنشاء تركيبات وفيديوهات متحركة تعتمد على HTML

يتطلب إنشاء فيديوهات متحركة تعلم برامج إنتاج الفيديو المتخصصة وخطوط العرض المعقدة. يتيح HyperFrames لك كتابة HTML لتعريف تركيبات الفيديو، واستخدام GSAP للرسوم المتحركة، وعرض فيديوهات احترافية مع ترجمة مكتوبة وانتقالات وصوت.

يدعم: Claude Codex Code(CC)

🥈 80 فضي

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "hyperframes". إنشاء بطاقة عنوان بسيطة مع نص 'مرحباً'

النتيجة المتوقعة:

تركيبة HTML مع تحديد موضع ثابت ورسم متحرك للدخول من GSAP يذيب نص العنوان.

استخدام "hyperframes". إضافة ترجمة مكتوبة متزامنة مع ملف صوتي

النتيجة المتوقعة:

تركيبة مع عناصر ترجمة على مستوى الكلمة وبيانات توقيت مستمدة من النص.

استخدام "hyperframes". إنشاء تلاشي متبادل بين مشهدين

النتيجة المتوقعة:

تركيبة من مشهدين مع انتقالات شفافية مدارة بـ GSAP لاستمرارية بصرية سلسة.

التدقيق الأمني

مخاطر منخفضة

v1 • 4/26/2026

All 791 static findings are false positives. The skill is a legitimate HTML-based video composition framework with documented CLI commands, file operations for composition authoring, and optional API integrations for transcription/TTS services. The detected patterns are benign: hex color codes in palette files (misidentified as Ruby commands), relative file paths (../) in documentation, and CLI tool invocations that are expected behavior for a video production tool.

الملفات التي تم فحصها

3,777

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

مشكلات منخفضة المخاطر (2)

SKILL.md:279-281 SKILL.md:292-293 SKILL.md:324-327

CLI Command Usage (Expected Behavior)

The skill instructs users to run CLI commands like `npx hyperframes lint`, `npx hyperframes inspect`, and `node scripts/animation-map.mjs` for video composition validation. These are documented authoring tools, not command injection vulnerabilities.

references/transcript-guide.md:120 references/transcript-guide.md:133

Environment Variable Documentation for External APIs

The transcript-guide.md shows curl examples with `$OPENAI_API_KEY` and `$GROQ_API_KEY` placeholders. These are documentation examples showing users how to authenticate with external transcription APIs - not actual credential exfiltration.

عوامل الخطر

⚙️ الأوامر الخارجية (4)

SKILL.md:279 SKILL.md:280 SKILL.md:289 SKILL.md:325-327

🌐 الوصول إلى الشبكة (1)

SKILL.md:42

📁 الوصول إلى نظام الملفات (1)

SKILL.md:269

🔑 متغيرات البيئة (2)

references/transcript-guide.md:120 references/transcript-guide.md:133

الأنماط المكتشفة

Hex Color Codes (False Positive)Relative Path References in Documentation (False Positive)Word Count Commands in Validation Instructions (False Positive)

تم تدقيقه بواسطة: claude

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

فيديوهات التسويق ووسائل التواصل الاجتماعي

إنشاء بطاقات عنوان متحركة وعروض منتجات ومحتوى ترويجي بألوان متسقة مع العلامة التجارية وانتقالات احترافية.

المحتوى التعليمي والشروحات

بناء فيديوهات شرح متحركة مع ترجمة مكتوبة وسرد صوتي وتأثيرات بصرية تسلط الضوء على النقاط الرئيسية.

عروض المؤتمرات والفعاليات

إنشاء شرائح متحركة وأفلام ترويجية مع انتقالات سلسة وتأثيرات طباعة وانتقالات تفاعلية مع الصوت.

جرّب هذه الموجهات

طلب تركيبة أساسية

إنشاء تركيبة HyperFrames مع بطاقة عنوان تقول [TITLE] على خلفية داكنة مع تلاشي النص. استخدم لوحة ألوان corporate النظيفة.

طلب فيديو مترجم

لدي ملف صوتي في [PATH]. إنشاء تركيبة HyperFrames مع ترجمة على مستوى الكلمة متزامنة مع الصوت. استخدم خلفية داكنة مع نص أبيض.

طلب تسلسل انتقالات

إنشاء تسلسل انتقالات من 3 مشاهد باستخدام انتقالات التلاشي المتبادل والضبابية والحرق بين المشاهد. تطبيق لوحة الألوان جريئة والحماسية.

طلب إنتاج فيديو كامل

إنشاء فيديو HyperFrames كامل مع: بطاقة عنوان و 3 مشاهد محتوى مع ترجمة مكتوبة ورسوم متحركة خلفية تفاعلية مع الصوت وانتقالات سلسة. النمط يجب أن يكون [STYLE].

أفضل الممارسات

تحديد هوية بصرية (DESIGN.md أو visual-style.md) قبل كتابة أي تركيبة HTML
بناء التخطيط الثابت أولاً، وتحديد مواقع العناصر حيث تظهر في أكثر لحظات وضوحها
تشغيل `hyperframes validate` للتحقق من تباين WCAG و `hyperframes inspect` للتحقق من التخطيط قبل العرض
استخدام GSAP.from() للدخولات و GSAP.to() للخروجات، التحريك من/إلى الحقيقة الأساسية لـ CSS

تجنب

عدم كتابة تركيبات بألوان عامة أو افتراضية - دائماً تطبيق هوية بصرية محددة
عدم تحديد مواقع حاويات محتوى المشهد بتحديد موضع مطلق وأبعاد مشفرة
عدم تخطي التحقق من التخطيط والتباين قبل العرض النهائي

الأسئلة المتكررة

ما هو HyperFrames؟

HyperFrames هو إطار عمل لتركيب الفيديو يعتمد على HTML. تكتب HTML مع سمات data-* للتوقيت و CSS للتصميم. يتولى GSAP الرسوم المتحركة. يدير الإطار ظهور المقاطع وتشغيل الوسائط ومزامنة الجدول الزمني.

هل أحتاج لتثبيت أي شيء لاستخدام هذه المهارة؟

نعم. تحتاج واجهة hyperframes CLI مثبتة عبر npm ومحرك العرض (Puppeteer و FFmpeg) لإخراج الفيديو. تشغيل `npx hyperframes init` لإعداد مشروع.

هل يمكنني إضافة ترجمة من ملف صوتي؟

نعم. يمكنك استخدام واجهات برمجة النسخ الخارجي الخارجية (OpenAI Whisper، Groq) أو النسخ المحلي. تحول المهارة طوابع الوقت إلى عناصر ترجمة على مستوى الكلمة متزامنة مع الصوت.

كيف أضيف سرد صوتي؟

استخدام أمر TTS المدمج مع نماذج Kokoro-ONNX. تشغيل `npx hyperframes tts` مع نص السيناريو. تدعم المهارة اختيار الصوت وتوليد ملفات صوتية.

ما قدرات الرسوم المتحركة المتاحة؟

تعمل GSAP على تشغيل جميع الرسوم المتحركة بما في ذلك الدخولات والخروجات وتأثيرات النص والسلوكيات التفاعلية مع الصوت. يمكنك إنشاء رسوم متحركة متزامنة مع الإيقاع وتأثيرات التوهج والتنسيق المعقد.

كيف أتحقق من تركيبتي قبل العرض؟

تشغيل `npx hyperframes lint` لفحوصات الصياغة و `npx hyperframes validate` لتباين WCAG و `npx hyperframes inspect` للتحقق من التخطيط. إصلاح جميع التحذيرات قبل العرض.