[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-jakubantalik-transitionsdev":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":18,"published_at":27,"updated_at":28,"category":29,"category_slug":30,"description":31,"github_synced_at":32,"install":33,"guide_html":41,"toc":42},"jakubantalik-transitionsdev","Transitions.dev","Transitions.dev: tayyor CSS transitionlar kutubxonasi va AI agentlar uchun skill'lar — motion'ni qo'shish, sayqallash va skanerlash.","Jakubantalik","transitions.dev","https:\u002F\u002Fgithub.com\u002FJakubantalik\u002Ftransitions.dev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F14873517?v=4",6125,"HTML","NOASSERTION",[15,16,17],"Claude Code","Cursor","Codex",[19,20,21,22,23,24,25,26],"design","motion","motionskill","product","skill","ui-design","ux","ux-design","2026-11-07T08:11:26.000000Z","2026-11-07T09:30:40.000000Z","Dizayn","dizayn","UI motion agent, a library of 43+ crafted transitions, a skill that fits your workflow.","2026-11-07T08:11:27.000000Z",{"repo_url":9,"skills":34,"custom":40},[35,36,37,38,39],"transitions-agent","refine-live","transitions-dev","transitions-polish","transitions-ui-generation",null,"\u003Ch2 id=\"transitionsdev-nima\">Transitions.dev nima\u003C\u002Fh2>\n\u003Cp>Transitions.dev — qayta ishlatiladigan CSS transitionlar to'plami (modal, dropdown, tooltip, toast, accordion, tabs, toggle va boshqalar). Har bir transition ko'chirib qo'yishga tayyor CSS snippet sifatida beriladi: \u003Ccode>:root\u003C\u002Fcode> dagi CSS o'zgaruvchilar, \u003Ccode>t-*\u003C\u002Fcode> nomli klasslar va \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> himoyasi bilan. Xuddi shu transitionlar AI kodlash vositalari uchun skill sifatida ham o'ralgan. Bu UI\u002Fmotion bilan ishlaydigan dizayner va frontend dasturchilarga kerak.\u003C\u002Fp>\n\u003Cp>Litsenziya: transitionlar va skill'larni shaxsiy va tijorat loyihalarida cheklovsiz ishlatish, o'zgartirish mumkin. Faqat kutubxonaning o'zini raqobatchi kutubxona sifatida tarqatish mumkin emas. Asboblar (CLI, agent, Refine) — MIT.\u003C\u002Fp>\n\u003Ch2 id=\"ornatish\">O'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>Agent skill\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx skills add Jakubantalik\u002Ftransitions.dev\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>transitions-dev\u003C\u002Fcode> va \u003Ccode>transitions-ui-generation\u003C\u002Fcode> skill'lari o'rnatiladi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CLI (bitta transition)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx transitions-dev add card-resize\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Bepul transition loyihaga qo'shiladi, akkaunt shart emas\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CLI (hammasi bepul)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx transitions-dev add --free\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Barcha bepul transitionlar\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CLI (ro'yxat)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx transitions-dev list\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Mavjud transitionlar ro'yxati\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Pro\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx transitions-dev login\u003C\u002Fcode>, so'ng \u003Ccode>npx transitions-dev add confetti-burst\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Brauzerda kirgandan keyin Pro CSS + React\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Refine\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx transitions-refine live\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Ishlayotgan ilovaga timeline va Refine panel qo'shiladi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Skill'lar Claude Code, Cursor, Codex kabi skill o'qiy oladigan agentlarda ishlaydi.\u003C\u002Fp>\n\u003Ch2 id=\"ish-jarayoni-transitions-agent\">Ish jarayoni (transitions-agent)\u003C\u002Fh2>\n\u003Cp>\u003Ccode>transitions-agent\u003C\u002Fcode> skill'i motion'ni skanerlab, tuzatadi:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Skan (xavfsiz, faqat o'qiydi): \u003Ccode>npx transitions-agent@latest --json\u003C\u002Fcode> — motion bahosi (0–100), tanilgan komponentlar va topilmalar (fayl:qator bilan).\u003C\u002Fli>\n\u003Cli>Foydalanuvchi ikki variantdan birini tanlaydi:\n\u003Cul>\n\u003Cli>\u003Cstrong>Polish fix\u003C\u002Fstrong>: qiymatlar motion-token shkalasiga o'tkaziladi, kichik diff'lar: \u003Ccode>npx transitions-agent@latest fix --yes\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Revamp fix\u003C\u002Fstrong>: polish + har bir komponentga transitions.dev recipe'i (Business tarifi): \u003Ccode>npx transitions-agent@latest fix --mode revamp --yes\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>Litsenziya kaliti \u003Ccode>TRANSITIONS_AGENT_LICENSE\u003C\u002Fcode> o'zgaruvchisida yoki \u003Ccode>~\u002F.transitions-agent.json\u003C\u002Fcode> da bo'ladi. Yo'q bo'lsa: \u003Ccode>npx transitions-agent@latest signup\u003C\u002Fcode>. Kalit saqlanmasa, har fix'da \u003Ccode>--license <key>\u003C\u002Fcode> bering.\u003C\u002Fli>\n\u003Cli>Tekshiruv: skanni qayta ishga tushirib, bahoning o'zgarishini ko'rsating. Pull request kerak bo'lsa — \u003Ccode>fix --pr\u003C\u002Fcode> (faqat foydalanuvchi ruxsati bilan).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>GitHub Actions uchun: \u003Ccode>npx transitions-agent@latest init-ci\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"har-bir-skill-nima-qiladi\">Har bir skill nima qiladi\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Skill\u003C\u002Fth>\n\u003Cth>Siz nima berasiz\u003C\u002Fth>\n\u003Cth>Nima chiqadi\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transitions-dev\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>"animate the dropdown", "make the modal open smoothly" kabi so'rov yoki \u003Ccode>transitions reveal\u003C\u002Fcode> \u002F \u003Ccode>review\u003C\u002Fcode> \u002F \u003Ccode>apply\u003C\u002Fcode> \u002F \u003Ccode>refine\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Tegishli transition CSS'i va HTML hook'lari\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transitions-polish\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>"polish my transitions", "align to the motion tokens" yoki \u003Ccode>transitions polish\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Mavjud motion qiymatlari token shkalasiga (duration, distance, scale, blur, easing) moslanadi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transitions-ui-generation\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>"AI generating the UI" kabi so'rov yoki \u003Ccode>transitions generate\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>UI, sarlavha yoki rasm "agent yaratayotgandek" paydo bo'ladigan animatsiya (\u003Ccode>ui\u003C\u002Fcode>, \u003Ccode>text\u003C\u002Fcode>, \u003Ccode>small-text\u003C\u002Fcode>, \u003Ccode>image\u003C\u002Fcode>, \u003Ccode>auto\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transitions-agent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx transitions-agent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Motion bahosi va tuzatishlar\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>refine-live\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Frefine live\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Refine panelini editor ichidagi agent bilan ulaydi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch2 id=\"amaliy-misol\">Amaliy misol\u003C\u002Fh2>\n\u003Col>\n\u003Cli>Loyiha ildizida \u003Ccode>npx transitions-dev add card-resize\u003C\u002Fcode> ni ishga tushiring.\u003C\u002Fli>\n\u003Cli>Snippetdagi \u003Ccode>:root\u003C\u002Fcode> o'zgaruvchilari va \u003Ccode>t-*\u003C\u002Fcode> qoidalarini komponentingizga ulang.\u003C\u002Fli>\n\u003Cli>Motion'ni sayqallash uchun \u003Ccode>npx skills add Jakubantalik\u002Ftransitions.dev\u003C\u002Fcode> qiling va agentdan "polish my transitions" so'rang.\u003C\u002Fli>\n\u003Cli>Jonli sozlash uchun \u003Ccode>npx transitions-refine live\u003C\u002Fcode> ni ishga tushiring; \u003Ccode>--llm\u003C\u002Fcode> bilan Cursor CLI ulanadi, \u003Ccode>npx transitions-refine stop\u003C\u002Fcode> skript tegini olib tashlaydi.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Ccode>transitions-ui-generation\u003C\u002Fcode> ni ko'rish uchun repodagi \u003Ccode>skills\u002Ftransitions-ui-generation\u002Fdemo.html\u003C\u002Fcode> faylini oching.\u003C\u002Fp>\n\u003Ch2 id=\"cheklovlar-va-maslahatlar\">Cheklovlar va maslahatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Pro transitionlar uchun brauzer orqali kirish (\u003Ccode>login\u003C\u002Fcode>) kerak; Revamp rejimi Business tarifida.\u003C\u002Fli>\n\u003Cli>\u003Ccode>transitions-agent\u003C\u002Fcode> tarmoq talab qiladi. Tarmoqsiz sandbox'da (masalan, Codex'da) \u003Ccode>ETARGET\u003C\u002Fcode>, \u003Ccode>ENOTFOUND\u003C\u002Fcode> yoki eski versiya ko'rinishi mumkin — bu paket yo'qligini bildirmaydi, buyruqni tarmoq ruxsati bilan qayta ishga tushiring.\u003C\u002Fli>\n\u003Cli>Skill foydalanuvchi tanlovisiz \u003Ccode>fix\u003C\u002Fcode> ishga tushirmasligi kerak.\u003C\u002Fli>\n\u003Cli>\u003Ccode>refine-live\u003C\u002Fcode> (chat rejimi) bo'sh turganda ham chat navbatini sarflaydi; relay ~10 daqiqa ishsiz qolsa to'xtash signalini beradi. Doimiy rejim uchun \u003Ccode>npx transitions-refine live\u003C\u002Fcode> afzal.\u003C\u002Fli>\n\u003Cli>Skill'dagi snippetlar \u003Ccode>index.html\u003C\u002Fcode> dan \u003Ccode>npm run build\u003C\u002Fcode> orqali generatsiya qilinadi.\u003C\u002Fli>\n\u003Cli>Manba README va SKILL.md'dagi transitionlar soni turlicha ko'rsatilgan; aniq ro'yxat uchun \u003Ccode>npx transitions-dev list\u003C\u002Fcode> dan foydalaning.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"manba\">Manba\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FJakubantalik\u002Ftransitions.dev\" rel=\"noopener nofollow ugc\" target=\"_blank\">https:\u002F\u002Fgithub.com\u002FJakubantalik\u002Ftransitions.dev\u003C\u002Fa> — jonli sayt: \u003Ca href=\"https:\u002F\u002Ftransitions.dev\u002F\" rel=\"noopener nofollow ugc\" target=\"_blank\">https:\u002F\u002Ftransitions.dev\u002F\u003C\u002Fa>\u003C\u002Fp>\n",[43,46,49,52,55,58,61],{"id":44,"title":45},"transitionsdev-nima","Transitions.dev nima",{"id":47,"title":48},"ornatish","O'rnatish",{"id":50,"title":51},"ish-jarayoni-transitions-agent","Ish jarayoni (transitions-agent)",{"id":53,"title":54},"har-bir-skill-nima-qiladi","Har bir skill nima qiladi",{"id":56,"title":57},"amaliy-misol","Amaliy misol",{"id":59,"title":60},"cheklovlar-va-maslahatlar","Cheklovlar va maslahatlar",{"id":62,"title":63},"manba","Manba"]