HyperFrames skills — o'zbekcha qo'llanma

HyperFrames nima

HyperFrames — HTML, CSS, media va "seekable" (vaqt bo'yicha surish mumkin bo'lgan) animatsiyalarni deterministik MP4 videoga aylantiradigan bepul, ochiq manbali framework. Uni CLI orqali lokal ishlatish yoki AI kod agentlariga skill sifatida ulash mumkin. Dasturchilar, motion-dizaynerlar va avtomatlashtirilgan video pipeline quruvchilar uchun mos. Litsenziya: Apache-2.0.

Render vaqtida headless Chrome har bir kadrni "seek" qiladi, natijani FFmpeg kodlaydi. Shuning uchun bir xil kirish doim bir xil videoni beradi.

O'rnatish

Usul	Buyruq	Natija
Claude Code plagini	`claude plugin marketplace add heygen-com/hyperframes` va `claude plugin install hyperframes@hyperframes`	To'liq skill katalogi plagin sifatida o'rnatiladi, `/hyperframes:hyperframes` ishlaydi
Alohida skill'lar (OpenCode ham)	`npx skills add heygen-com/hyperframes`	Tanlash oynasi ochiladi; "Core Skills" guruhi yetarli
Core to'plam (skriptda/CI'da)	`npx hyperframes skills update`	Aynan core skill'lar, CLI versiyasiga mos
Hammasi	`npx skills add heygen-com/hyperframes --all`	Barcha 9 ta e'lon qilingan skill
Qo'lda CLI	`npx hyperframes init my-video`	Yangi loyiha skeleti

Talablar: Node.js 22+, FFmpeg.

Ish jarayoni

Skill'lar agentga HyperFrames ishlab chiqarish siklini o'rgatadi:

Videoni rejalashtirish.
To'g'ri HTML yozish (data-start, data-duration, data-track-index atributlari bilan).
Seekable animatsiyalarni ulash (GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI).
Media qo'shish.
Lint qilish.
Preview qilish.
Render qilish.

Har bir skill nima qiladi

Core to'plam:

Buyruq	Siz nima berasiz	Nima chiqadi
`/hyperframes`	Video, motion graphic, subtitr yoki overlay so'rovi (avval shuni o'qiladi)	Render qoidalari va ish sikli bo'yicha yo'riqnoma
`/hyperframes-cli`	CLI vazifasi: scaffold, preview, render, publish	CLI buyruqlari, JSON o'qish, xatolarni tuzatish
`/hyperframes-registry`	Tayyor blok yoki komponent kerak bo'lgan vizual	Tahrirlanadigan manba sifatida o'rnatilgan ~450 blok
`/media-use`	Musiqa, ovoz, rasm, voiceover, transkript va h.k.	HeyGen yoki bepul lokal vositalar bilan media

Kerak bo'lganda o'rnatiladigan (npx hyperframes skills update <name>):

/figma — Figma havolasidan asset, brend tokenlari va komponentlarni videoga olib kirish.
/slideshow — taqdimot/deck; natija MP4 emas, navigatsiya qilinadigan deck.
/remotion-to-hyperframes — Remotion va boshqa vositalardagi kodni ko'chirish.
/reverse-any-video — video faylni tahrirlanadigan loyihaga qayta qurish (HyperFrames Pro).
/style-sampling — beshta tayyor uslubdan birida yangi epizod (HyperFrames Pro).

Amaliy misol

Agent orqali:

npx hyperframes skills update ni bir marta ishga tushiring.
Agentga so'rov bering: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music."

Qo'lda:

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # brauzerda jonli preview
npx hyperframes render       # MP4 ga render

Tayyor blok qo'shish:

npx hyperframes add data-chart

Boshqa misollar: flash-through-white (shader o'tish), instagram-follow (ijtimoiy overlay).

Cheklovlar va maslahatlar

Loyiha-lokal o'rnatishni video loyihangiz papkasidan bajaring. HyperFrames repozitoriysi ichida global npx hyperframes skills update ishlating, aks holda tahrirlanmagan o'zgarishlar ustidan yozilishi mumkin.
skills add registry nusxasi main dan bir necha soat orqada qolishi mumkin; skills update CLI versiyasiga mos reliz tegidan o'rnatadi.
/reverse-any-video va /style-sampling HyperFrames Pro talab qiladi.
Repo ichidagi olti ichki skill odatda o'rnatilmaydi.
Animatsiya seekable bo'lishi shart: GSAP timeline paused: true bilan yaratilib, window.__timelines ga yoziladi.
Dasturiy ishlab chiqish uchun repo klonlanganda Git LFS kerak (golden test .mp4 fayllari, ~240 MB). Faqat manba kerak bo'lsa: GIT_LFS_SKIP_SMUDGE=1 git clone ....

Manba

GitHub: https://github.com/heygen-com/hyperframes

Tezkor o'rnatish