Motion Design skill

Motion Design skill nima

Motion Design skill — AI agentlarga animatsiya kodini yozishdan oldin "motion director" kabi o'ylashni o'rgatadi: to'g'ri timing, easing, choreography va hissiy maqsadni tanlash. U implementatsiyaga bog'liq emas: CSS, Framer Motion, GSAP, Lottie, Spring va boshqa animatsiya tizimlari bilan ishlaydi. UI animatsiyalari ustida ishlaydigan dasturchi va dizaynerlarga mos. Litsenziya: MIT.

O'rnatish

Usul	Buyruq	Natija
skills CLI	npx skills add LottieFiles/motion-design-skill	Skill agentingizga qo'shiladi

README bo'yicha skill 40+ agentni qo'llab-quvvatlaydi, jumladan Claude Code, Cursor, Codex va GitHub Copilot.

Skill nimalarni o'z ichiga oladi

• Core (SKILL.md) — 8 bosqichli checklist, motion personality arxetiplari, duration/easing jadvallari, property tanlash qo'llanmasi va sifat qoidalari.
• Philosophy (director/) — uch ustun, UI uchun moslangan Disney'ning 12 tamoyili, his → harakat xaritasi, choreography, narrative tuzilma, kontekstga moslashuv.
• Patterns (patterns/) — kirish/chiqish, holat feedback'i (success, error, loading, hover), ambient harakat va ko'p elementli choreography uchun tayyor retseptlar.
• Reference (reference/) — timing va easing jadvallari, sifat checklisti, muammolarni bartaraf etish.

Ish jarayoni

Har qanday animatsiyadan oldin 8 qadam:

1. Hissiy maqsad: quvonch, xotirjamlik, shoshilinchlik, nafislik.
2. Motion personality: Playful, Premium, Corporate yoki Energetic.
3. Asosiy property: position, scale, rotation, opacity.
4. Davomiylik (duration jadvaliga qarab).
5. Easing oilasi: kirish — decelerate, chiqish — accelerate.
6. Hero element: staging tamoyillarini qo'llash.
7. Ikkilamchi va ambient qatlamlarni qo'shish.
8. 1/3 qoidalari: harakat masofasi va bir vaqtdagi elementlar.

Motion personality arxetiplari

Loyiha uchun bitta arxetip tanlanadi va izchil qo'llanadi.

Arxetip	Davomiylik	Easing	Overshoot
Playful	150–300ms	ease-out-back	10–20%
Premium	350–600ms	cubic-bezier(0.4,0,0.2,1)	0%
Corporate	200–400ms	cubic-bezier(0.2,0,0,1)	0–3%
Energetic	100–250ms	ease-out-expo	15–30%

Standart: UI uchun Corporate, illyustratsiyalar uchun Playful.

Asosiy qiymatlar

• Tooltip / mikro-feedback: 80–120ms
• Tugma bosilishi / toggle: 120–180ms
• Card kirish/chiqish: 200–350ms
• Modal: 300–400ms
• Sahifa o'tishi: 400–600ms
• Dramatik ochilish: 600–1200ms
• Kirish chiqishdan 30–50% uzunroq bo'lishi kerak.
• Kirish uchun ease-out, chiqish uchun ease-in, ekrandagi harakat uchun ease-in-out.

Amaliy misol

Skill quyidagi kabi so'rovlarda ishga tushadi:

1. Agentga so'rov bering: Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar.
2. Agent hero elementni aniqlaydi va tartibni (chart → cards → sidebar) belgilaydi.
3. Personality (masalan, dashboard uchun Corporate), davomiylik va easing jadvaldan tanlanadi.
4. Stagger bilan ketma-ket kirish kodi yoziladi.

Boshqa namunaviy so'rovlar:

• Add a playful entrance animation to these card components
• Create a loading → success → error state transition for this form submit button
• Review my animation code and suggest improvements based on motion design principles

Cheklovlar va maslahatlar

• Skill UI animatsiyalari, mikro-interaksiyalar, loading/success/error holatlari, scroll animatsiyalari va brend motion identikasi uchun ishlatiladi.
• Minimal property ishlating: bitta — to'g'ridan-to'g'ri, ikkita — sayqallangan, uch va undan ko'pi — ortiqcha bo'lishi mumkin.
• Tekis animatsiya — qatlamlar yetishmasligi belgisi: primary, secondary va ambient qatlamlarni tekshiring.
• Brend uchun bitta signature easing (80% animatsiyada), 3 ta duration va bitta kirish uslubini belgilang.
• Masofa davomiylikka ta'sir qiladi: 100px — baza, 200px — 1.3x, 400px — 1.6x.
• Hover feedback 100ms dan, press 150ms dan qisqa bo'lsin.

Manba

github.com/lottiefiles/motion-design-skill