visual-engine-skill
إنشاء رسوم متحركة وتأثيرات بصرية مذهلة
أضف رسومًا متحركة احترافية إلى الصفحات المقصودة والعروض التوضيحية دون المساس بالأداء أو إمكانية الوصول. تتعامل مهارة Visual Engine تلقائيًا مع التوقيت والتسهيل وأنماط الحركة الآمنة.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
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
SeguroThis 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.
Factores de riesgo
🌐 Acceso a red (1)
📁 Acceso al sistema de archivos (1)
⚙️ Comandos externos (11)
Puntuación de calidad
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 المانعة التي تجمد الخيط الرئيسي