الواجهات والتصميم مميز

Animation Systems

بواسطة Julien Thibeaut (ui-skills.com) 3.7k نجوم GitHub

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

#motion#choreography#performance#accessibility

Claude Code Codex

نظرة عامة

Animation Systems مرجع كامل لتصميم وتنفيذ حركة المنتجات الراقية. بيغطي مبادئ الحركة وإعدادات الـ easing والمدة المعقولة والتناسق والـ staggering وتفاعلات الـ scroll والـ hover والأداء وسهولة الوصول عبر reduced-motion. استخدمه علشان حركة التطبيق تحس إنها مقصودة مش مجرد زينة.

بتنفع في إيه

تحديد إعدادات الحركة الافتراضية لنظام تصميم
تنسيق تتابعات دخول متعددة العناصر
إضافة تفاعلات scroll وhover بمسؤولية
احترام prefers-reduced-motion

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install animation-systems

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/animation-systems ~/.claude/skills/animation-systems

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/animation-systems ~/.codex/skills/animation-systems

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Web Artifacts Builder

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

Claude Code Codex

الواجهات والتصميم

Apple Design

أسلوب Apple في الحركة السلسة والفيزيائية مترجم للويب — الـ springs والإيماءات والسحب والسحب والـ sheets والخامات الشفافة.

Claude Code Codex