ما هي micro-interactions؟
يُستخدم عند تصميم لحظات تعليقات واجهة المستخدم الصغيرة مثل حالات الزر أو التبديل أو التحقق من صحة النموذج أو مؤشرات التحميل أو شارات الإشعارات. المصدر: dylantarre/animation-principles.
·micro-interactions
*
micro-interactions
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesالمصدر: dylantarre/animation-principles
يُستخدم عند تصميم لحظات تعليقات واجهة المستخدم الصغيرة مثل حالات الزر أو التبديل أو التحقق من صحة النموذج أو مؤشرات التحميل أو شارات الإشعارات.
كيفية تثبيت micro-interactions
ثبّت مهارة الذكاء الاصطناعي micro-interactions بسرعة في بيئة التطوير لديك عبر سطر الأوامر
- افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
- نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions
- تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
المصدر: dylantarre/animation-principles.
SKILL.md
عرض النص الخامApply Disney's 12 animation principles to small UI feedback moments and interface details.
| Squash & Stretch | Button press compression, toggle bounce | | Anticipation | Hover state hints, pre-click feedback | | Staging | Focus attention on active element | | Straight Ahead / Pose to Pose | Progress vs state changes | | Follow Through / Overlapping | Ripple effects, settling motion | | Slow In / Slow Out | Snappy but smooth transitions |
| Arc | Toggle switches, circular menus | | Secondary Action | Icons respond to parent state | | Timing | 100-300ms for most interactions | | Exaggeration | Clear but not distracting | | Solid Drawing | Consistent transform behavior | | Appeal | Delightful, purposeful feedback |
حقائق جاهزة للاقتباس
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
- أمر التثبيت
npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions- الفئة
- *وسائط إبداعية
- موثق
- ✓
- أول ظهور
- 2026-02-19
- آخر تحديث
- 2026-03-10
إجابات سريعة
كيف أثبّت micro-interactions؟
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
أين مستودع المصدر؟
https://github.com/dylantarre/animation-principles
التفاصيل
- الفئة
- *وسائط إبداعية
- المصدر
- skills.sh
- أول ظهور
- 2026-02-19