manaAI
← Skillar
Skill darsligi

Loyihaga endi dizayner nigohi bilan qarang!

Veb animatsiya mutaxassisi — aqlli, "har narsani harakatlantirmaydi". Faqat aniq maqsad uchun: scroll bilan hikoya, sahifa o'tishlari, rasmiy motion tizim. Oddiy hover va menyuni loyihaning o'ziga (CSS) qoldiradi — ortiqcha animatsiya qo'shmaydi.

Bu skill ochiq va bepul — GitHub'da. Bir buyruq bilan o'rnatasan.

GitHub'da ochish →

Nima qiladi

Scroll storytelling

Pinned yoki scrubbed ketma-ketliklar — sahifa aylantirilganda ochiladigan hikoya (VERO daraxt videosi kabi).

Sahifa o'tishlari

Bo'lim va sahifa o'tishlari (page transitions) — silliq, kontentni kechiktirmasdan.

SVG · matn · Rive · Lottie

SVG chizish/morf, matn animatsiya, interaktiv Rive va Lottie assetlar.

Canvas · Three.js · WebGL

Kanvas va 3D sahnalar — immersiv, lekin nazorat ostidagi performans bilan.

Rasmiy motion tizim

Tokenlar (davomiylik, easing, masofa), xoreografiya va dizayner→dasturchi spetsifikatsiyasi.

Performans + tuzatish

reduced-motion fallback, jank va layout muammolarini o'lchash, qiyin animatsiya buglarini tuzatish.

4 rejim

01

Strategy — reja

Nima harakatlanadi, nega, nima qimirlamay turadi va qaysi motion darajasi oqlangan — buni hal qiladi. Motion brief va risk bahosini beradi, kod emas.

02

Specification — spetsifikatsiya

Tasdiqlangan yo'nalishni motion tokenlar, xoreografiya, triggerlar, holatlar, komponent egaligi, fallback va qabul mezonlariga aylantiradi.

03

Build — qurish

Spetsifikatsiyaga mos eng kichik ishonchli tizimni yozadi. Avval repozitoriya, framework hayotiy sikli, CSS arxitekturasi va mavjud animatsiya egaligini tekshiradi.

04

Audit & debug — tekshirish

Muammoni takrorlaydi, egalikni ajratadi, runtime'ni o'lchaydi, ildiz sababni topadi va eng tor tuzatishni taklif qiladi. Lifecycle/layout muammosini ko'proq animatsiya bilan yashirmaydi.

Namunaviy promptlar

Skill o'rnatilgach, shunchaki tabiiy tilda so'ra — u o'zi kerakli rejimga o'tadi.

Prompt — scroll hikoya
web-motion-design skilini ishlat: hero bo'limga scroll bilan
boshqariladigan (scrubbed) video ketma-ketligi qo'sh.
reduced-motion holatida statik kadr bilan fallback ber.
Prompt — sahifa o'tishlari
sahifalar orasiga silliq page transition qo'sh — mavjud stack'ni
buzmasdan, performansni pasaytirmasdan. avval qisqa motion brief ber.
Prompt — animatsiya bug
bu animatsiya jank qilyapti va hover'da "sakraydi". audit qil:
sababni top, runtime'ni o'lcha va eng tor tuzatishni taklif et.

Nimani qilmaydi

⚠Oddiy hover, focus, menu, accordion, form va holat o'tishlari — bularni loyihaning o'zi (CSS yoki mavjud UI primitivlari) bilan hal qiladi. Skill aralashmaydi.
⚠Ortiqcha animatsiya qo'shmaydi. Aniq muloqot yoki interaksiya foydasi bo'lmasa — harakatni rad etadi. Eng past motion darajasidan boshlaydi.

O'rnatish

↓

Bitta buyruq bilan

Skill — odam tilida yozilgan ko'rsatma fayli. Bitta buyruq bilan Claude'ga o'rnatiladi.

Global (barcha loyihalarga)
npx skills add Persist102/web-motion-design -g -y -a claude-code
Faqat shu loyihaga
npx skills add Persist102/web-motion-design -a claude-code
Izoh. -g = global; usiz — faqat joriy loyiha. -a claude-code — qaysi agent uchun. -y — tasdiqsiz. Node.js (npx uchun) o'rnatilgan bo'lsin.

Keyingi qadam

Claude Code'ni noldan o'rgan

Skill — bu boshlanishi. manaAI'da Claude Code bo'yicha to'liq bepul kurs bor: o'rnatishdan tortib o'z ilovangni qurishgacha, o'zbek tilida, 21 dars.

Kursni boshlash →