Saya pernah beberapa kali minta AI agent bikin video promo, dan hasilnya hampir selalu sama: slide presentasi dengan efek fade. Satu bagian satu judul, gambar, lalu transisi lembut ke bagian berikutnya. Tadi sore saya memasang skill bernama Bang Motion ke Hermes Agent saya, lalu membongkar isinya, dan kali ini saya mau tulis kenapa skill ini pendekatannya berbeda: dia tidak menambah template, dia menambah aturan yang bisa dicek agent di kodenya sendiri.
Apa itu Bang Motion
Bang Motion adalah agent skill open source dari Bang Tutorial, MIT license, versi 1.19.0 saat saya tulis ini. Sekali install, agent yang mendukung format Agent Skills jadi motion designer: dia bisa bikin opener, promo produk, bumper, kinetic typography, sampai explainer 30 sampai 120 detik. Deliverable-nya satu file index.html yang jalan di browser, autoplay dan loop, dengan GSAP dan Three.js dimuat dari CDN. Tidak ada build step, tidak ada npm install cuma untuk menonton hasilnya. Dobel klik file, dia main seperti video.
Yang menarik dari sisi engineering: skill ini tidak menyuruh agent meniru contoh. Dia memaksa alur style brief sebelum kode ditulis. Agent harus mengajukan tiga kandidat konsep, satu rekomendasi, palet warna yang tiap warnanya menyebut sumbernya, baru menulis kode setelah Anda setuju. Ini pola yang sama dengan code review sebelum implementasi, diterapkan ke motion graphic.
Aturan anti PowerPoint yang bisa dicek
Isi skill yang paling bernilai adalah aturan struktural yang objectivamente bisa diverifikasi di kode, bukan cuma selera. Beberapa yang saya anggap paling tajam dari SKILL.md dan references-nya.
Subject harus persisten: satu dunia kontinu yang sama membawa penonton dari awal sampai akhir, bukan bagian-bagian terpisah. Kamera harus beneran bergerak: breathing drift, push-through yang termotivasi, dan di demo SaaS kamera mengikuti klik penting di UI. Teks maksimal dua level, dan tidak boleh ada teks di bawah 30 pixel pada stage selebar 1080 supaya terbaca di ponsel. Tidak ada section yang cuma fade in dan fade out. Latar tidak boleh diam, harus ada background motion dan perubahan warna dengan trigger yang terlihat. Semua ini ada berkas referensi khusus bernama anti-ppt.md, slide pattern berikut solusinya.
Menu di balik tampilan
Supaya tiap proyek tidak berakhir sama, penampilan diturunkan dari menu: 10 arah style dari cinematic dark, poster color-block, editorial light, sampai grainy gradient. Lalu 19 konsep opener, dari one continuous shot sampai product tour with claims. Plus 6 gaya explainer masing-masing dengan starter sendiri: continuous action, cartoon collage, visual journalism, white catalog, vintage sketch, dan cartoon stage. Kombinasinya cukup luas supaya dua proyek berurutan tidak saling mirip, dan skill secara eksplisit melarang membawa warna serta bentuk dari contoh ke proyek baru.
Cara install
Untuk Claude Code, dia terpasang sebagai plugin dari marketplace resminya.
/plugin marketplace add bangtutorial/bang-motion
/plugin install bang-motion@bang-motionMenambahkan skill di Hermes Agent
Untuk Hermes Agent yang saya pakai, ada dua jalur. Jalur pertama lewat CLI bawaan yang mengambil SKILL.md langsung dari URL.
hermes skills install \
https://raw.githubusercontent.com/bangtutorial/bang-motion/main/SKILL.mdPerintah ini menampilkan konfirmasi interaktif sehingga jawabannya diketik manual, dan hasilnya hanya satu berkas SKILL.md. Jalur kedua, yang saya pakai dan rekomendasikan, adalah clone penuh repo langsung ke folder skills Hermes.
git clone --depth 1 https://github.com/bangtutorial/bang-motion \
~/.hermes/skills/bang-motionHermes membaca folder ~/.hermes/skills tanpa konfigurasi tambahan, jadi hasil clone langsung terdeteksi. Verifikasinya satu perintah.
hermes skills listDi mesin saya bang-motion muncul sebagai bang-motion v1.19.0 dengan status enabled. Setelah itu skill terpicu otomatis dari prompt seperti bikin video promo, opener, explainer, atau keluhan bahwa animasi web terasa seperti PowerPoint.
Dua trap install yang saya alami sendiri
Trap pertama: install dari URL SKILL.md lewat CLI hanya membawa satu berkas SKILL.md, padahal nyata skill ini ada di folder references yang berisi konsep, teknik, dan aturan anti slide, folder assets berisi starter HTML per gaya explainer, dan scripts untuk snapshot serta ekspor. Skill terpasang tapi agent tidak punya bahan kerjanya. Solusinya clone penuh seperti di atas.
Trap kedua lebih lucu: perintah install menampilkan konfirmasi interaktif, dan ketika saya menyalurkan jawaban otomatis lewat pipe, prompt itu melahap input menjadi argumen sehingga skill terpasang di folder bernama y. Folder skills jadi berisi path aneh dan skill tidak terbaca. Pelajarannya: jawab konfirmasi manual, atau langsung clone manual saja.
Verifikasi hasil dan ekspor MP4
Hasil index.html punya mode debug: tambahkan ?debug=1 di URL, muncul scrub bar untuk memeriksa detik kunci. Untuk verifikasi otomatis ada scripts/snap.mjs yang memotret detik kunci dengan puppeteer, lalu skill memeriksa capture itu terhadap aturannya sendiri sebelum menyerahkan hasil. Ekspor MP4 memakai scripts/export-frames.mjs, frame by frame lewat puppeteer lalu dirakit dengan ffmpeg. Ada juga deteksi jeda voice-over yang jalan di browser tanpa ffmpeg, dan timeline akan menyesuaikan diri ke narasi yang Anda kirim. Prasyaratnya bertingkat: nonton cukup browser, verifikasi butuh Node plus puppeteer, ekspor butuh ffmpeg juga.
Kesimpulan
Bang Motion menyelesaikan masalah yang spesifik dan sering: AI agent membuat motion graphic yang terasa seperti slide. Caranya bukan menambah template, tapi memaksa proses style brief, memberi menu struktur yang luas, dan menulis aturan visual yang bisa diverifikasi di kode. Kalau Anda sering meminta agent bikin opener atau explainer dan kecewa dengan hasilnya, skill ini layak dicoba. Dan kalau Anda juga memakai skill untuk mengendalikan gaya kerja agent di proyek koding, pendekatannya sekeluarga dengan yang saya bahas di artikel Ponytail Coding: aturan eksplisit menang daripada harapan diam-diam.
