Transitions.dev

Transitions.dev nima

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: :root dagi CSS o'zgaruvchilar, t-* nomli klasslar va prefers-reduced-motion himoyasi bilan. Xuddi shu transitionlar AI kodlash vositalari uchun skill sifatida ham o'ralgan. Bu UI/motion bilan ishlaydigan dizayner va frontend dasturchilarga kerak.

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.

O'rnatish

Usul	Buyruq	Natija
Agent skill	npx skills add Jakubantalik/transitions.dev	transitions-dev va transitions-ui-generation skill'lari o'rnatiladi
CLI (bitta transition)	npx transitions-dev add card-resize	Bepul transition loyihaga qo'shiladi, akkaunt shart emas
CLI (hammasi bepul)	npx transitions-dev add --free	Barcha bepul transitionlar
CLI (ro'yxat)	npx transitions-dev list	Mavjud transitionlar ro'yxati
Pro	npx transitions-dev login, so'ng npx transitions-dev add confetti-burst	Brauzerda kirgandan keyin Pro CSS + React
Refine	npx transitions-refine live	Ishlayotgan ilovaga timeline va Refine panel qo'shiladi

Skill'lar Claude Code, Cursor, Codex kabi skill o'qiy oladigan agentlarda ishlaydi.

Ish jarayoni (transitions-agent)

transitions-agent skill'i motion'ni skanerlab, tuzatadi:

1. Skan (xavfsiz, faqat o'qiydi): npx transitions-agent@latest --json — motion bahosi (0–100), tanilgan komponentlar va topilmalar (fayl:qator bilan).
2. Foydalanuvchi ikki variantdan birini tanlaydi:
   • Polish fix: qiymatlar motion-token shkalasiga o'tkaziladi, kichik diff'lar: npx transitions-agent@latest fix --yes
   • Revamp fix: polish + har bir komponentga transitions.dev recipe'i (Business tarifi): npx transitions-agent@latest fix --mode revamp --yes
3. Litsenziya kaliti TRANSITIONS_AGENT_LICENSE o'zgaruvchisida yoki ~/.transitions-agent.json da bo'ladi. Yo'q bo'lsa: npx transitions-agent@latest signup. Kalit saqlanmasa, har fix'da --license <key> bering.
4. Tekshiruv: skanni qayta ishga tushirib, bahoning o'zgarishini ko'rsating. Pull request kerak bo'lsa — fix --pr (faqat foydalanuvchi ruxsati bilan).

GitHub Actions uchun: npx transitions-agent@latest init-ci.

Har bir skill nima qiladi

Skill	Siz nima berasiz	Nima chiqadi
transitions-dev	"animate the dropdown", "make the modal open smoothly" kabi so'rov yoki transitions reveal / review / apply / refine	Tegishli transition CSS'i va HTML hook'lari
transitions-polish	"polish my transitions", "align to the motion tokens" yoki transitions polish	Mavjud motion qiymatlari token shkalasiga (duration, distance, scale, blur, easing) moslanadi
transitions-ui-generation	"AI generating the UI" kabi so'rov yoki transitions generate	UI, sarlavha yoki rasm "agent yaratayotgandek" paydo bo'ladigan animatsiya (ui, text, small-text, image, auto)
transitions-agent	npx transitions-agent	Motion bahosi va tuzatishlar
refine-live	/refine live	Refine panelini editor ichidagi agent bilan ulaydi

Amaliy misol

1. Loyiha ildizida npx transitions-dev add card-resize ni ishga tushiring.
2. Snippetdagi :root o'zgaruvchilari va t-* qoidalarini komponentingizga ulang.
3. Motion'ni sayqallash uchun npx skills add Jakubantalik/transitions.dev qiling va agentdan "polish my transitions" so'rang.
4. Jonli sozlash uchun npx transitions-refine live ni ishga tushiring; --llm bilan Cursor CLI ulanadi, npx transitions-refine stop skript tegini olib tashlaydi.

transitions-ui-generation ni ko'rish uchun repodagi skills/transitions-ui-generation/demo.html faylini oching.

Cheklovlar va maslahatlar

• Pro transitionlar uchun brauzer orqali kirish (login) kerak; Revamp rejimi Business tarifida.
• transitions-agent tarmoq talab qiladi. Tarmoqsiz sandbox'da (masalan, Codex'da) ETARGET, ENOTFOUND yoki eski versiya ko'rinishi mumkin — bu paket yo'qligini bildirmaydi, buyruqni tarmoq ruxsati bilan qayta ishga tushiring.
• Skill foydalanuvchi tanlovisiz fix ishga tushirmasligi kerak.
• refine-live (chat rejimi) bo'sh turganda ham chat navbatini sarflaydi; relay ~10 daqiqa ishsiz qolsa to'xtash signalini beradi. Doimiy rejim uchun npx transitions-refine live afzal.
• Skill'dagi snippetlar index.html dan npm run build orqali generatsiya qilinadi.
• Manba README va SKILL.md'dagi transitionlar soni turlicha ko'rsatilgan; aniq ro'yxat uchun npx transitions-dev list dan foydalaning.

Manba

https://github.com/Jakubantalik/transitions.dev — jonli sayt: https://transitions.dev/