Skill /brag: Ubah Website atau App Jadi Launch Video (Setup Lengkap + Workflow Terverifikasi)

<callout icon="🎬" color="blue_bg"> Skill /brag membaca project website atau app yang ada di folder kerja, lalu menyusun video launch singkat. Panduan ini membedakan jalur klasik dengan /brag-slim dan memberi langkah yang bisa dicoba dari instalasi sampai review hasil. </callout>

Tutorial utama di bawah mengikuti jalur klasik, sebab langkah pemeriksaan, render, dan nama file hasilnya terdokumentasi di repo. Menurut situs proyek, pada Claude Opus 5.5 pemanggilan /brag otomatis beralih ke /brag-slim; gunakan /brag --full untuk meminta jalur klasik. Fitur ini bergantung pada versi plugin dan model yang digunakan. Situs resmi, README.

2. Requirement sebelum install

1. Project website atau app yang source code-nya ada di komputer. Buka folder project itu di AI coding agent. Skill membaca kode, copy, komponen UI, aset, serta alur penggunaan. Website yang hanya punya URL publik belum memenuhi alur utama ini.
2. AI coding agent yang mendukung Agent Skills, misalnya Claude Code, Codex CLI, opencode, atau agent lain yang dapat membaca instruksi skill dan menjalankan perintah lokal.
3. Node.js versi 22 atau lebih baru dan npx.
4. FFmpeg terpasang dan bisa ditemukan dari terminal melalui PATH.
5. Hyperframes CLI untuk jalur klasik; repo meminta pengecekan dengan npx hyperframes doctor. Cek di terminal sistem:

node --version
npx --version
ffmpeg -version
npx hyperframes doctor

Jika salah satu pemeriksaan gagal, pasang atau perbaiki komponen tersebut menggunakan petunjuk resmi untuk sistem operasi Anda, lalu ulangi pengecekan. Jangan memasukkan /brag ke terminal sistem: /brag adalah instruksi di percakapan AI coding agent. README bagian Requirements dan Use it.

3. Install skill

Opsi A — Claude Code, paling langsung

Buka Claude Code, lalu jalankan dua perintah berikut di dalam Claude Code, berurutan:

/plugin marketplace add latent-spaces/brag
/plugin install brag@brag

Perintah ini diambil dari situs dan README resmi. Plugin juga memuat /brag-slim. Jika plugin lama sudah terpasang dan ingin memperbaruinya: claude plugin update brag di terminal sistem. Situs resmi, README.

Opsi B — Codex CLI atau agent lain yang mendukung skills

Dari terminal sistem pada folder project, jalankan:

npx skills add https://github.com/latent-spaces/brag --skill brag

Installer dapat meminta pemilihan agent dan scope instalasi. Pilih agent yang benar dan instalasi pada project saat ini. README menyebut -g untuk memasang secara global agar tersedia di setiap project. Buka ulang sesi agent jika skill belum terdeteksi. Untuk Windows, instalasi berbasis symlink mungkin memerlukan Windows Developer Mode atau hak Administrator; repo juga menyarankan menyalin folder skill secara manual jika symlink tidak berfungsi. README.

Jangan mencampur jalur instalasi. Pengguna Claude Code cukup memilih plugin; pengguna agent lain memilih installer skills. Perintah npx skills add ... adalah perintah terminal, sedangkan /brag dijalankan di chat agent.

4. Jalankan pada project yang sudah jadi

Misalnya Anda baru membuat sebuah web app pemesanan layanan. Contoh ini simulasi tutorial, bukan hasil uji project nyata.

1. Pastikan aplikasi selesai dan bagian yang ingin ditunjukkan memang ada pada source project: hero atau layar awal, fitur utama, dan hasil akhir interaksi.
2. Buka AI coding agent di folder project, bukan di folder kosong atau folder repo /brag.
3. Jika memakai jalur klasik, pastikan npx hyperframes doctor tidak menunjukkan masalah yang menghalangi render.
4. Tulis di chat agent:

Let's /brag about this.

Atau berikan arah kreatif yang spesifik:

/brag --tone polished --format vertical --duration 20 --title "LayananKita"

Pilihan format yang didokumentasikan adalah landscape, vertical, dan square; default landscape. Durasi otomatisnya sekitar 15–25 detik. Musik dan efek suara aktif secara default; --no-music atau --no-sfx dapat menonaktifkannya. Voiceover tidak aktif secara default dan hanya digunakan jika meminta --voice pada jalur klasik. Jika memakai Claude Opus 5.5 dan ingin secara eksplisit mempertahankan jalur Hyperframes, gunakan:

/brag --full --tone polished --format vertical --duration 20

Contoh voiceover: /brag --full --voice. Instruksi skill menyebut narasi pada jalur klasik menggunakan Kokoro melalui Hyperframes. Jangan menjanjikan voiceover dari /brag-slim. Instruksi skill dan opsi.

5. Apa yang dikerjakan agent setelah perintah dijalankan?

Project → inspeksi → konsep → storyboard → komposisi → validasi → render → file untuk dibagikan.

1. Inspeksi project. Agent membaca file seperti index.html, CSS, README.md, package.json, route, komponen, dan aset. Untuk app, ia mencari alur pengguna: masuk → tindakan utama → hasil. Ia memakai nama, pesan, warna, font, dan elemen UI yang benar-benar ada. Panduan inspeksi.
2. Menentukan angle video. Agent memilih visual pembuka, 2–3 momen produk, nada cerita, format, durasi, dan outro. Video harus menunjukkan setidaknya satu UI, copy, atau elemen visual yang berakar dari project. Untuk app, momen penggunaan produk lebih bernilai daripada hanya menyorot landing page. Panduan perencanaan.
3. Menulis plan dan storyboard. Jalur klasik menghasilkan brag-plan.md, dengan rincian scene, waktu, transisi, teks, dan arahan audio. Durasi scene dijumlahkan menjadi 15–25 detik. Instruksi skill.
4. Menyusun komposisi. /brag membuat brief yang fokus pada cerita dan material project; Hyperframes menangani susunan visual, animasi, dan render. Skill mengharuskan pemeriksaan npx hyperframes check tanpa error sebelum render. Instruksi skill.
5. Render dan pemeriksaan akhir. Agent menghasilkan video, memilih frame poster, dan menulis copy singkat untuk berbagi. Hasil jalur klasik didokumentasikan di brag-output/, atau folder bertimestamp jika output sebelumnya sudah ada dan tidak ingin ditimpa. README, instruksi skill. Contoh hasil jalur klasik:

project-kamu/
└── brag-output/
    ├── brag-plan.md
    ├── composition-brief.md
    ├── composition/
    ├── brag.mp4
    ├── brag.jpg
    └── share-copy.txt

brag.mp4 adalah video akhirnya. brag.jpg adalah poster frame. share-copy.txt adalah usulan copy untuk unggahan. Nama folder dapat memakai timestamp pada run berikutnya. Struktur folder di atas menjelaskan hasil jalur klasik; jangan menganggap nama file yang sama pasti dihasilkan oleh /brag-slim. Instruksi skill.

6. Contoh workflow yang mudah dipraktikkan

Skenario simulasi: web app reservasi servis perangkat. Project memiliki layar pilih layanan, formulir jadwal, dan halaman konfirmasi.

1. Selesaikan tiga layar tersebut dan pastikan copy serta visualnya jelas.
2. Dari folder project, jalankan Claude Code atau agent coding yang telah dipasangi skill.
3. Minta: /brag --full --tone polished --format vertical --duration 20 jika berada di Claude Opus 5.5 dan ingin workflow klasik. Pada agent/model lain, pakai /brag --tone polished --format vertical --duration 20.
4. Arahkan agent: “Tampilkan urutan pilih layanan → pilih jadwal → konfirmasi. Gunakan warna brand dari project. Jangan menampilkan data pelanggan nyata. Tunjukkan UI asli atau rekreasi yang setia pada project.” Ini contoh arahan pengguna, bukan klaim fitur khusus baru.
5. Tinjau brag-plan.md: apakah manfaat produk dan alur utama benar, apakah ada klaim yang tidak ada di app, dan apakah teksnya terbaca.
6. Putar brag.mp4, cek urutan visual, keterbacaan, suara, data sensitif, dan rasio video sebelum diposting. Jika kurang pas, berikan masukan spesifik dan minta agent membuat revisi. Skill tidak menjamin semua jenis app langsung tampil persis seperti rekaman aplikasi yang berjalan. Ia membaca project code, memilih momen UI, dan dapat merekreasikan tampilan atau alur menjadi komposisi video. Hasil sangat bergantung pada kelengkapan project, kualitas UI, kemampuan agent, dan lingkungan render. Instruksi skill, panduan plan.

7. Jika hasil belum sesuai

• /brag** tidak dikenali:** pastikan skill/plugin dipasang pada agent yang sedang digunakan dan project yang benar; buka sesi agent baru. Pada instalasi manual Windows, periksa symlink atau salin folder skill sebagaimana petunjuk repo.
• Pemeriksaan lingkungan gagal: ulangi node --version, ffmpeg -version, dan npx hyperframes doctor; perbaiki komponen yang dilaporkan sebelum render.
• Video terasa generik: minta agent menunjukkan alur produk dan UI yang benar-benar ada, serta koreksi brief/plan. Jangan memasukkan klaim yang belum dibuktikan oleh project.
• Rasio salah: minta --format vertical untuk konten vertikal, landscape untuk horizontal, atau square untuk persegi sebelum membuat ulang.
• Ada informasi sensitif: periksa plan, brief, video, dan share copy sebelum publikasi. Panduan skill melarang meneruskan API key, data pelanggan, email pribadi, dan rahasia project ke video; gunakan data contoh fiktif. Panduan inspeksi.

Ringkasnya

/brag membantu mengubah project yang bisa dibaca agent menjadi video launch pendek. Untuk percobaan pertama, gunakan project visual sederhana, jalankan workflow klasik yang requirement dan outputnya terdokumentasi, tinjau plan, lalu periksa MP4 sebelum mengunggah. /brag-slim adalah opsi baru dengan jalur yang berbeda; gunakan jika sesuai model dan kebutuhan Anda. Situs resmi, repo resmi.

Sumber utama: Situs /brag · GitHub README · SKILL.md · Inspect · Plan