00:00:00Ini adalah Superpowers, kerangka kerja keterampilan agen dengan lebih dari 50.000 bintang di GitHub
00:00:05yang mencegah agen pengodean Anda terburu-buru dan membuat kesalahan dengan memaksanya melalui
00:00:10alur kerja terstruktur yang berisi brainstorming, implementasi, red-green test-driven development,
00:00:15dan bahkan menggunakan sub-agen untuk mengeksekusi tugas serta meninjau kode secara paralel.
00:00:19Tapi apa bedanya ini dengan sekadar menggunakan mode rencana atau sesuatu seperti spec-driven development?
00:00:24Klik subscribe dan mari kita bahas.
00:00:27Jadi, ini adalah proyek bernama XDL, sebuah alat CLI yang digunakan untuk mengunduh video dari Twitter.
00:00:32Saya ingin membuat UI web untuk alat ini yang tidak hanya mengunduh video ke peramban pengguna dari
00:00:38sebuah URL, tetapi juga menggunakannya untuk membuat artikel. Jadi saya menggunakan Opus 4.6 dengan mode rencana di Claude Code
00:00:46untuk mencoba membuat UI tersebut. Dan inilah hasilnya.
00:00:50Sayangnya, saat saya menjalankan kodenya pertama kali, ada beberapa masalah.
00:00:53Jadi saya meninjau kodenya untuk mencoba memperbaiki masalah tersebut, yang syukurlah sudah teratasi.
00:00:58Sekarang sepertinya semuanya sudah berfungsi.
00:01:00Saya akan ke Twitter dan menyalin tautan ke cuitan ini.
00:01:03Maaf, Kevin. Tempel di sini dan mari lihat apakah videonya terunduh.
00:01:06Sedang mengekstrak dan ternyata berhasil mengunduhnya.
00:01:09Jika saya klik di sini, videonya terbuka di tab baru, tidak sesuai harapan saya, tapi setidaknya berhasil.
00:01:15Dan jika saya mencoba membuat artikel dari cuitan itu, saya tempel di sini dan ia mulai membuat,
00:01:20kita bisa melihat langkah-langkah yang diambil. Pertama mengekstrak video dan kemudian
00:01:24memproses audionya. Dan setelah selesai, kita mendapatkan artikel dalam format Markdown yang sempurna,
00:01:29yang sangat mengesankan. Dan jika kita melihat tugas yang sama dilakukan dengan Opus 4.6,
00:01:35tetapi menggunakan Superpowers, kita sudah bisa melihat desainnya jauh lebih baik dengan opsi untuk
00:01:39mengunduh dan membuat artikel. Kita tempel URL Twitter yang sama, klik unduh, dan sekali lagi,
00:01:45ia mengekstrak video, tetapi kali ini langsung terunduh ke peramban saya dan saya bisa mengekliknya untuk menonton.
00:01:51Sekarang, jika menggunakan cuitan yang sama untuk membuat artikel di sini, kita bisa melihat langkah-langkah
00:01:56yang telah diambil. Dan setelah menyelesaikan semua langkah, artikelnya dikirim secara streaming ke peramban saya.
00:02:01Dan saya punya opsi untuk menyalin ini dan menempelnya di mana pun saya mau. Sekarang Anda bisa melihat
00:02:06versi Superpowers lebih baik daripada versi tanpa menggunakan Superpowers. Kita akan membahas
00:02:10kodenya nanti di video ini, tapi pertama-tama mari kita bahas bagaimana saya melakukannya. Jadi setelah Anda
00:02:15menginstal plugin Superpowers, sekarang kita punya beberapa perintah slash baru seperti brainstorm,
00:02:20execute plan, dan write the plan, yang akan menulis rencana dari hasil brainstorm. Sebenarnya kita hanya
00:02:25membutuhkan perintah ini karena Superpowers akan mengarahkan kita ke tahap berikutnya setelah tahap sebelumnya selesai.
00:02:31Mari kita jalankan ini dan tempelkan sebuah prompt. Kita tekan enter. Dan sekarang ia memuat
00:02:35keterampilan brainstorming dan mulai memahami proyek saat ini. Di sini ia akan menanyakan beberapa
00:02:39pertanyaan untuk menyempurnakan rencana. Saya akan menjawab React plus Vite, lalu saya minta langkah
00:02:44demi langkah untuk pembuatan artikel. Sekarang ia meminta saya mengonfirmasi struktur arsitekturnya,
00:02:49yang menurut saya terlihat bagus. Ia juga bertanya tentang tata letak, lalu tentang endpoint dan logika
00:02:54server. Setelah saya menjawab semua pertanyaan, ia lanjut membuat rencana, yang sekarang
00:02:58disimpan di dalam direktori ini. Dan jika kita melihat rencananya, kita bisa melihatnya sangat mendetail,
00:03:03memberikan ringkasan, stack, struktur, serta desain, tata letak, API endpoint, dan banyak lagi.
00:03:09Faktanya, ini sangat mirip dengan apa yang akan diberikan Claude Code jika ia menulis rencananya sendiri.
00:03:15Tapi langkah selanjutnya adalah di mana segalanya menjadi menarik. Setelah saya mengonfirmasi rencana dan siap
00:03:19untuk implementasi, ia kemudian menulis rencana implementasi lainnya. Ia melakukan ini dengan pertama-tama
00:03:25melihat rencana desain asli yang kita buat. Dan ia membaginya menjadi potongan tugas yang lebih kecil
00:03:31dan lebih mudah dikelola yang dapat diselesaikan oleh sub-agen paralel. Jadi sekarang ia menulis rencana
00:03:36lain dan menyimpannya ke direktori plans lagi. Dan jika kita melihat yang itu, kita bisa
00:03:41melihat alih-alih memberikan gambaran mendetail tentang proyek dan arsitektur, ia membagi semuanya menjadi
00:03:46tugas-tugas. Jadi kita punya satu tugas di sini untuk menyusun proyek dan ada beberapa langkah di dalamnya.
00:03:52Kita punya tugas lain di sini untuk membuat kerangka klien Vite dan React. Dan sekali lagi, ada beberapa langkah
00:03:57dan ini berlanjut untuk setiap tugas yang diperlukan untuk menyelesaikan proyek. Dari sini, Superpowers
00:04:03meminta saya memilih pendekatan. Apakah saya ingin pendekatan berbasis sub-agen atau sesi
00:04:08paralel? Pendekatan ini menggunakan sub-agen terpisah untuk setiap tugas tanpa konfirmasi manusia apa pun.
00:04:14Pendekatan ini akan membuat sesi lain dari sesi rencana, menyelesaikan tugas dalam batch,
00:04:18dan kemudian mengonfirmasi kepada saya. Jadi sebagai manusia, saya melihat apakah saya puas dengan batch tersebut sebelum berlanjut.
00:04:24Demi kecepatan, saya akan memilih pendekatan berbasis sub-agen. Dan sekarang ia mulai
00:04:28membuat tugas-tugas yang perlu diselesaikan untuk proyek ini. Sekarang, sayangnya,
00:04:32tugas-tugas ini terlihat berbeda dari tugas sebelumnya karena saya lupa merekam layar saat
00:04:36pertama kali. Jadi saya mulai lagi dari awal, tetapi menggunakan prompt yang sama persis. Jadi yang terjadi sekarang
00:04:41adalah setiap sub-agen pertama-tama membuat pengujian. Ia menulis tes yang akan gagal. Dan kemudian
00:04:47ia menulis kode minimal untuk membuat tes tersebut lolos. Dan ketika selesai mengerjakan fiturnya,
00:04:52ia memverifikasi fitur tersebut memenuhi persyaratan yang ditentukan dalam rencana dan kemudian lanjut
00:04:57memeriksa kualitas kode, apakah bersih, terstruktur dengan baik, dan mudah dipelihara. Sekarang ia
00:05:02telah menyelesaikan sebagian besar tugas. Sekarang ia akan menguji semua yang telah dikerjakan. Dan inilah hasilnya,
00:05:06semua tugas selesai dan ia bahkan menemukan satu bug dalam prosesnya yang berhasil ia perbaiki. Dan jika kita
00:05:11melihat kodenya, dipisahkan berdasarkan server dan source. Saya asumsikan source adalah front end atau
00:05:16klien. Kita punya beberapa komponen di sini. Ada tab artikel, tab unduhan, dan sebagainya. Jika kita melihat
00:05:21progres pipeline, kita punya tahapan dalam sebuah objek, sebuah antarmuka TypeScript. Sepertinya ia menggunakan
00:05:27semacam CSS in JS untuk penataan gayanya. Kalau dipikir-pikir, seharusnya saya menentukan untuk menggunakan Tailwind,
00:05:32tapi ini tidak masalah. Dan lihat ini. Ini adalah sesuatu yang tidak akan dilakukan mode rencana Opus secara default.
00:05:37Anda bisa melihat di setiap langkahnya, Superpowers melakukan git commit mulai dari menyusun
00:05:43proyek hingga menambahkan pembungkus CLI dan menambahkan Hono serta segala hal di antaranya. Jadi jika saya cek
00:05:48git status, tidak ada yang perlu saya commit karena branch sudah bersih, yang berarti jauh lebih sedikit pekerjaan bagi saya.
00:05:53Sekarang Anda mungkin melihat ini dan bertanya-tanya di mana file pengujiannya? Saya akan membahasnya
00:05:57nanti. Sejujurnya, menurut saya Superpowers adalah proyek yang mengesankan. Saya suka fakta bahwa ia
00:06:02berfokus pada keterampilan. Saya pikir ada 14 keterampilan, yang melakukan banyak hal berbeda dari brainstorming
00:06:08ke perencanaan hingga implementasi dan bahkan meninjau kode setelahnya. Saya suka fokus pada TDD,
00:06:12khususnya red-green TDD, di mana ia menulis pengujian terlebih dahulu. Jadi pengujiannya gagal, menjadi merah,
00:06:18dan kemudian menulis kode minimal untuk meloloskannya. Tapi terkadang ini tidak selalu berhasil karena agen memilih
00:06:24untuk tidak melakukannya. Coba lihat ini. Di sini kita bisa melihat keterampilan menulis rencana secara eksplisit menyebut TDD.
00:06:31Dan entah mengapa, Claude memilih untuk tidak melakukannya. Saya memintanya mengonfirmasi hal itu dan ia bilang, ya, itu salah saya.
00:06:36Keterampilannya menyebutkan TDD dan saya tetap tidak melakukannya. Saya bertanya, mengapa Anda tidak melakukannya? Dan ia menjawab
00:06:42ia fokus pada pengiriman cepat daripada mengikuti proses. Saya tidak yakin persis mengapa ini terjadi pada
00:06:47model mutakhir, tapi ini menunjukkan bahwa Anda tidak boleh menerima mentah-mentah apa yang dilakukan
00:06:53model tersebut. Penting untuk membaca rencananya dan memastikan ia melakukan apa yang Anda harapkan.
00:06:57Ini adalah salah satu alasan mengapa saya rasa saya tidak akan menggunakan Superpowers untuk setiap
00:07:03proyek atau persyaratan fitur saya hanya karena ukurannya yang kecil. Dan jika saya punya fitur kecil
00:07:08yang ingin ditambahkan, saya lebih suka berdiskusi dengan Claude untuk merencanakannya, menulis dokumen rencana,
00:07:13dan kemudian menghapus konteks untuk mengeksekusi rencana tersebut. Tetapi jika saya berada dalam situasi
00:07:19di mana saya mengimplementasikan banyak fitur, yang memang sesekali terjadi, maka Superpowers adalah
00:07:24alat yang hebat untuk digunakan karena sangat baik dalam membagi persyaratan kompleks menjadi potongan-potongan
00:07:31yang dapat diselesaikan oleh sub-agen. Dan ya, fitur tugas di Claude Code bisa melakukan hal ini,
00:07:37tetapi saya suka fakta bahwa Superpowers membuat rencana untuk ini alih-alih langsung mengimplementasikan
00:07:43kodenya. Sekarang, bagaimana perbandingan Superpowers dengan sesuatu seperti Beads atau SpecKit atau seluruh
00:07:48arsitektur spec-driven development? Bagi saya, ini tampak seperti versi perencanaan yang lebih sederhana
00:07:53sebelum dieksekusi. Tentu saja tidak sesederhana sesuatu seperti Ralph, tapi mungkin berada di tengah-tengah
00:07:58antara sesuatu seperti Ralph dan Beads. Namun bagi saya, sepertinya semakin banyak alat seperti ini
00:08:02yang membantu orang menulis kode lebih baik dengan agen AI mereka. Sekarang, ini adalah hal yang baik,
00:08:06tetapi setiap orang berbeda. Dan menurut saya baik untuk mengambil sedikit dari sini, sedikit dari sana,
00:08:10dan akhirnya membuat alur kerja Anda sendiri yang sempurna bagi Anda. Jadi mungkin itu sesuatu yang akan saya lakukan
00:08:16di masa depan. Dan jika Anda beruntung, saya akan membuat video tentang itu untuk menunjukkan persis bagaimana saya melakukannya.