[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-lottiefiles-motion-design-skill":3},{"slug":4,"name":5,"summary":6,"owner":7,"repo":8,"repo_url":9,"avatar_url":10,"stars":11,"language":12,"license":13,"ai_tools":14,"topics":19,"published_at":25,"updated_at":26,"category":27,"category_slug":28,"description":29,"github_synced_at":30,"install":31,"guide_html":33,"toc":34},"lottiefiles-motion-design-skill","Motion Design skill","AI agentlarga UI animatsiyalarida timing, easing, choreography va Disney tamoyillarini qo'llashni o'rgatuvchi universal motion design skill.","lottiefiles","motion-design-skill","https:\u002F\u002Fgithub.com\u002Flottiefiles\u002Fmotion-design-skill","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F30947444?v=4",2850,null,"MIT",[15,16,17,18],"Claude Code","Cursor","Codex","GitHub Copilot",[20,21,22,23,24],"agent-skills","animation","lottie","motion-design","ui","2026-11-07T09:57:28.000000Z","2026-11-07T09:57:47.000000Z","Motion","motion","Universal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI","2026-11-07T09:57:29.000000Z",{"repo_url":9,"skills":32,"custom":12},[23],"\u003Ch2 id=\"motion-design-skill-nima\">Motion Design skill nima\u003C\u002Fh2>\n\u003Cp>Motion Design skill — AI agentlarga animatsiya kodini yozishdan oldin &#34;motion director&#34; kabi o&#039;ylashni o&#039;rgatadi: to&#039;g&#039;ri timing, easing, choreography va hissiy maqsadni tanlash. U implementatsiyaga bog&#039;liq emas: CSS, Framer Motion, GSAP, Lottie, Spring va boshqa animatsiya tizimlari bilan ishlaydi. UI animatsiyalari ustida ishlaydigan dasturchi va dizaynerlarga mos. Litsenziya: MIT.\u003C\u002Fp>\n\u003Ch2 id=\"ornatish\">O&#039;rnatish\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Usul\u003C\u002Fth>\n\u003Cth>Buyruq\u003C\u002Fth>\n\u003Cth>Natija\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>skills CLI\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx skills add LottieFiles\u002Fmotion-design-skill\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Skill agentingizga qo&#039;shiladi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>README bo&#039;yicha skill 40&#43; agentni qo&#039;llab-quvvatlaydi, jumladan Claude Code, Cursor, Codex va GitHub Copilot.\u003C\u002Fp>\n\u003Ch2 id=\"skill-nimalarni-oz-ichiga-oladi\">Skill nimalarni o&#039;z ichiga oladi\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Core\u003C\u002Fstrong> (\u003Ccode>SKILL.md\u003C\u002Fcode>) — 8 bosqichli checklist, motion personality arxetiplari, duration\u002Feasing jadvallari, property tanlash qo&#039;llanmasi va sifat qoidalari.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Philosophy\u003C\u002Fstrong> (\u003Ccode>director\u002F\u003C\u002Fcode>) — uch ustun, UI uchun moslangan Disney&#039;ning 12 tamoyili, his → harakat xaritasi, choreography, narrative tuzilma, kontekstga moslashuv.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Patterns\u003C\u002Fstrong> (\u003Ccode>patterns\u002F\u003C\u002Fcode>) — kirish\u002Fchiqish, holat feedback&#039;i (success, error, loading, hover), ambient harakat va ko&#039;p elementli choreography uchun tayyor retseptlar.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Reference\u003C\u002Fstrong> (\u003Ccode>reference\u002F\u003C\u002Fcode>) — timing va easing jadvallari, sifat checklisti, muammolarni bartaraf etish.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"ish-jarayoni\">Ish jarayoni\u003C\u002Fh2>\n\u003Cp>Har qanday animatsiyadan oldin 8 qadam:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Hissiy maqsad: quvonch, xotirjamlik, shoshilinchlik, nafislik.\u003C\u002Fli>\n\u003Cli>Motion personality: Playful, Premium, Corporate yoki Energetic.\u003C\u002Fli>\n\u003Cli>Asosiy property: position, scale, rotation, opacity.\u003C\u002Fli>\n\u003Cli>Davomiylik (duration jadvaliga qarab).\u003C\u002Fli>\n\u003Cli>Easing oilasi: kirish — decelerate, chiqish — accelerate.\u003C\u002Fli>\n\u003Cli>Hero element: staging tamoyillarini qo&#039;llash.\u003C\u002Fli>\n\u003Cli>Ikkilamchi va ambient qatlamlarni qo&#039;shish.\u003C\u002Fli>\n\u003Cli>1\u002F3 qoidalari: harakat masofasi va bir vaqtdagi elementlar.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2 id=\"motion-personality-arxetiplari\">Motion personality arxetiplari\u003C\u002Fh2>\n\u003Cp>Loyiha uchun bitta arxetip tanlanadi va izchil qo&#039;llanadi.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Arxetip\u003C\u002Fth>\n\u003Cth>Davomiylik\u003C\u002Fth>\n\u003Cth>Easing\u003C\u002Fth>\n\u003Cth>Overshoot\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Playful\u003C\u002Ftd>\n\u003Ctd>150–300ms\u003C\u002Ftd>\n\u003Ctd>ease-out-back\u003C\u002Ftd>\n\u003Ctd>10–20%\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Premium\u003C\u002Ftd>\n\u003Ctd>350–600ms\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>cubic-bezier(0.4,0,0.2,1)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>0%\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Corporate\u003C\u002Ftd>\n\u003Ctd>200–400ms\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>cubic-bezier(0.2,0,0,1)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>0–3%\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Energetic\u003C\u002Ftd>\n\u003Ctd>100–250ms\u003C\u002Ftd>\n\u003Ctd>ease-out-expo\u003C\u002Ftd>\n\u003Ctd>15–30%\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Standart: UI uchun Corporate, illyustratsiyalar uchun Playful.\u003C\u002Fp>\n\u003Ch2 id=\"asosiy-qiymatlar\">Asosiy qiymatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Tooltip \u002F mikro-feedback: 80–120ms\u003C\u002Fli>\n\u003Cli>Tugma bosilishi \u002F toggle: 120–180ms\u003C\u002Fli>\n\u003Cli>Card kirish\u002Fchiqish: 200–350ms\u003C\u002Fli>\n\u003Cli>Modal: 300–400ms\u003C\u002Fli>\n\u003Cli>Sahifa o&#039;tishi: 400–600ms\u003C\u002Fli>\n\u003Cli>Dramatik ochilish: 600–1200ms\u003C\u002Fli>\n\u003Cli>Kirish chiqishdan 30–50% uzunroq bo&#039;lishi kerak.\u003C\u002Fli>\n\u003Cli>Kirish uchun ease-out, chiqish uchun ease-in, ekrandagi harakat uchun ease-in-out.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"amaliy-misol\">Amaliy misol\u003C\u002Fh2>\n\u003Cp>Skill quyidagi kabi so&#039;rovlarda ishga tushadi:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Agentga so&#039;rov bering: \u003Ccode>Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Agent hero elementni aniqlaydi va tartibni (chart → cards → sidebar) belgilaydi.\u003C\u002Fli>\n\u003Cli>Personality (masalan, dashboard uchun Corporate), davomiylik va easing jadvaldan tanlanadi.\u003C\u002Fli>\n\u003Cli>Stagger bilan ketma-ket kirish kodi yoziladi.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Boshqa namunaviy so&#039;rovlar:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>Add a playful entrance animation to these card components\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>Create a loading → success → error state transition for this form submit button\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>Review my animation code and suggest improvements based on motion design principles\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"cheklovlar-va-maslahatlar\">Cheklovlar va maslahatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Skill UI animatsiyalari, mikro-interaksiyalar, loading\u002Fsuccess\u002Ferror holatlari, scroll animatsiyalari va brend motion identikasi uchun ishlatiladi.\u003C\u002Fli>\n\u003Cli>Minimal property ishlating: bitta — to&#039;g&#039;ridan-to&#039;g&#039;ri, ikkita — sayqallangan, uch va undan ko&#039;pi — ortiqcha bo&#039;lishi mumkin.\u003C\u002Fli>\n\u003Cli>Tekis animatsiya — qatlamlar yetishmasligi belgisi: primary, secondary va ambient qatlamlarni tekshiring.\u003C\u002Fli>\n\u003Cli>Brend uchun bitta signature easing (80% animatsiyada), 3 ta duration va bitta kirish uslubini belgilang.\u003C\u002Fli>\n\u003Cli>Masofa davomiylikka ta&#039;sir qiladi: 100px — baza, 200px — 1.3x, 400px — 1.6x.\u003C\u002Fli>\n\u003Cli>Hover feedback 100ms dan, press 150ms dan qisqa bo&#039;lsin.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"manba\">Manba\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Flottiefiles\u002Fmotion-design-skill\" rel=\"noopener nofollow ugc\" target=\"_blank\">github.com\u002Flottiefiles\u002Fmotion-design-skill\u003C\u002Fa>\u003C\u002Fp>\n",[35,38,41,44,47,50,53,56,59],{"id":36,"title":37},"motion-design-skill-nima","Motion Design skill nima",{"id":39,"title":40},"ornatish","O'rnatish",{"id":42,"title":43},"skill-nimalarni-oz-ichiga-oladi","Skill nimalarni o'z ichiga oladi",{"id":45,"title":46},"ish-jarayoni","Ish jarayoni",{"id":48,"title":49},"motion-personality-arxetiplari","Motion personality arxetiplari",{"id":51,"title":52},"asosiy-qiymatlar","Asosiy qiymatlar",{"id":54,"title":55},"amaliy-misol","Amaliy misol",{"id":57,"title":58},"cheklovlar-va-maslahatlar","Cheklovlar va maslahatlar",{"id":60,"title":61},"manba","Manba"]