Habilidades visual-engine-skill
🎨

visual-engine-skill

Seguro 🌐 Acceso a red📁 Acceso al sistema de archivos⚙️ Comandos externos

إنشاء رسوم متحركة وتأثيرات بصرية مذهلة

أضف رسومًا متحركة احترافية إلى الصفحات المقصودة والعروض التوضيحية دون المساس بالأداء أو إمكانية الوصول. تتعامل مهارة Visual Engine تلقائيًا مع التوقيت والتسهيل وأنماط الحركة الآمنة.

Soporta: Claude Codex Code(CC)
📊 69 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "visual-engine-skill". أضف تأثير توهج إلى زر الدعوة لاتخاذ إجراء يتم تفعيله عند التمرير

Resultado esperado:

  • تم تطبيق رسم متحرك بتأثير الشعاع على زر الدعوة لاتخاذ إجراء
  • تم تعيين المدة على 0.5 ثانية (الحد الأدنى للمدة الآمنة)
  • التسهيل: ease-out للخروج السلس
  • تمت إضافة فحص prefers-reduced-motion
  • الأداء: يستخدم transform/opacity فقط

Usando "visual-engine-skill". أنشئ انتقال صفحة لقسم العروض التوضيحية

Resultado esperado:

  • تم تنفيذ رسم متحرك iris reveal clip
  • مدة الانتقال: 0.6 ثانية
  • تمت إضافة تجاوز إمكانية الوصول لـ prefers-reduced-motion
  • تم الاختبار على عروض الهاتف المحمول وسطح المكتب

Auditoría de seguridad

Seguro
v5 • 1/16/2026

This is a documentation-only skill containing no executable code. All 29 static findings are false positives. The analyzer incorrectly scanned its own output file (skill-report.json) and misinterpreted markdown formatting (backticks) as shell execution patterns. Findings labeled as C2 keywords, cryptographic algorithms, and system reconnaissance are actually common words, metadata, and accessibility documentation. The skill uses only Read, Write, Search tools and defines animation guidelines for a visual experience engine.

2
Archivos escaneados
223
Líneas analizadas
3
hallazgos
5
Auditorías totales

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
85
Contenido
21
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

إضافة رسوم متحركة إلى الصفحات المقصودة

ربط إعدادات الرسوم المتحركة المعدة مسبقًا بأقسام البطل والبطاقات وصفحات العروض التوضيحية

إنشاء معارض الإلهام البصري

بناء عروض توضيحية للعملاء توضح كيف يمكن أن يبدو موقعهم مع تصميم الحركة

تنفيذ العناصر المرئية ثلاثية الأبعاد في Three.js

إضافة مكونات بصرية ثلاثية الأبعاد مع أنماط رسوم متحركة آمنة وعالية الأداء

Prueba estos prompts

رسم متحرك أساسي
Add a smooth hover animation to the feature cards using the beam effect preset
انتقال القسم
Create a page transition using the iris reveal clip animation
مكون ثلاثي الأبعاد
Add a 3D particle background using the starfield effect to the hero section
تدفق المعرض
Build a visual inspiration gallery flow that shows 5 different animation style options for client review

Mejores prácticas

  • احترم دائمًا إعداد إمكانية الوصول prefers-reduced-motion
  • اجعل جميع مدد الرسوم المتحركة أعلى من 0.5 ثانية للامتثال للسلامة
  • استخدم فقط تحويلات CSS والشفافية للحصول على أداء مثالي

Evitar

  • استخدام رسوم متحركة وامضة سريعة تؤدي إلى تحفيز الصرع الحساس للضوء
  • إضافة تأثيرات تكبير أو دوران مربكة
  • تنفيذ رسوم متحركة JavaScript المانعة التي تجمد الخيط الرئيسي

Preguntas frecuentes

ما هي المنصات التي تدعم هذه المهارة؟
تعمل مع مساعدي الذكاء الاصطناعي Claude وCodex وClaude Code.
ما هي مدد الرسوم المتحركة المسموح بها؟
يجب أن تتجاوز جميع الرسوم المتحركة 0.5 ثانية للامتثال للسلامة.
هل يمكنني دمج مكتبات الرسوم المتحركة الخارجية؟
تدير هذه المهارة إعدادات الرسوم المتحركة المدمجة فقط. تتطلب المكتبات الخارجية تنفيذًا منفصلاً.
هل يتم جمع أو تخزين بيانات المستخدم؟
لا يتم جمع البيانات. هذه مهارة قائمة على الأوامر لإنشاء كود الرسوم المتحركة.
لماذا لا تظهر رسومي المتحركة؟
تحقق من إعداد prefers-reduced-motion وتأكد من ربط الرسم المتحرك بعنصر DOM الصحيح.
ما الفرق بين هذه المهارة وFramer Motion؟
توفر هذه المهارة نظام رسوم متحركة مخصص محسّن لقوالب Synthex. يمكن إضافة Framer Motion بجانبه إذا لزم الأمر.

Detalles del desarrollador

Estructura de archivos

📄 SKILL.md