Brobri
    Gabung AI Circle

    animated-readme · skill Claude Code buat README

    README yang langsung nunjukin proyek lo jalan, lengkap sama GIF-nya.

    Kebanyakan README dibuka pakai langkah install, tanpa satu gambar pun. Pengunjung cabut dalam sepuluh detik. Pakai animated-readme, Claude baca proyek lo, nulis copy README yang cepet ditangkep, terus bikin GIF animasi dari HTML. Gak ada yang di-push sebelum lo setuju.

    Animasi. Di kiri, judul "Turn your README into a demo people watch". Di kanan, terminal Claude Code ngetik "Make an animated README for this repo.", terus baca proyeknya, nulis copy, ngisi tiga adegan, dan nge-render hero.gif. Muncul kartu: README siap dicek, lengkap sama judul dan bagian Sound familiar, tiga GIF yang masing-masing punya alt text, dan dua klaim yang ditandain karena gak ada sumbernya di proyek. Baris terakhir: gak ada yang di-push sebelum lo setuju.
    GIF pembuka hasil render animated-readme: Claude baca proyeknya, nulis copy, terus nyiapin README buat lo cek.
    Ambil gratis di GitHubLihat GIF-nya

    Gratis di GitHub: github.com/BrianArfi/animated-readme (publik, lisensi Apache-2.0).

    GratisBaruVersi 0.1.0Apa yang baru

    Kabar baiknya

    Sekarang bikin proyek cepet banget, AI ikut bantu nulis kodenya.

    Semalam aja, alatnya udah jalan dan udah lo taruh di GitHub.

    Masalahnya

    Tapi README-nya gak nunjukin apa-apa.

    • Layar pertama

      Isinya langkah install. Pengunjung belum tahu alat ini buat apa.

    • Nyari gambar

      Gak ada satu gambar pun yang nunjukin alatnya jalan. Rekaman layar satu-satunya udah ketinggalan tiga versi.

    • Kalimat pembuka

      "A composable, extensible framework for..." Orang yang lo tuju gak nangkep maksudnya.

    • Pas rilis baru

      Rekam ulang demonya berarti nyiapin semuanya lagi, terus ngeklik satu-satu.

    Solusinya

    Claude baca proyek lo, nulis README-nya, terus bikin GIF yang nunjukin alatnya jalan.

    Tiap klaim di copy harus ada buktinya di proyek lo. Yang gak ada sumbernya dibuang, atau ditandain buat lo. GIF-nya dibikin dari halaman HTML, frame per frame, jadi input yang sama selalu ngasih GIF yang sama. Lo cek dulu, baru naik.

    Bedanya

    Sebelum dan sesudah.

    Sebelum

    • Layar pertama isinya langkah install.
    • Gak ada gambar alatnya lagi jalan.
    • Rekaman demo ketinggalan beberapa versi.
    • Pembaca layar cuma dapet "demo.gif".

    Sesudah

    • Layar pertama nunjukin masalah yang diberesin alat lo.
    • Tiga GIF: pembuka, sebelum dan sesudah, cara kerja.
    • Copy berubah? Render ulang sekali, GIF-nya ikut.
    • Tiap GIF punya alt text yang nyeritain isinya.

    Cara kerjanya

    Cukup tiga langkah.

    1. Minta ke Claude

      Di Claude Code, bilang "bikinin README animasi buat proyek ini", atau jalanin /animated-readme.

    2. Cek draft-nya

      Lo dapet copy README, tiga GIF, dan alt text-nya. Klaim yang gak ada sumbernya ditandain.

    3. Setujuin, baru naik

      Mau ganti? Bilang ke Claude, GIF-nya dirender ulang. Gak ada yang naik ke GitHub sebelum lo bilang oke.

    Dia bisa ngapain aja

    Dia nulis copy dari isi proyek lo, terus bikin GIF yang bisa dirender ulang kapan aja.

    Tiap klaim ada sumbernya. Tiap GIF ada alt text-nya.

    • 01

      Tiap klaim ada buktinya di proyek lo

      Claude baca README, dokumen, kode, dan catatan rilis dulu. Fitur yang masih rencana, setengah jadi, atau cuma ada di branch gak ditulis jadi fitur.

      Copy-nya bilang "bisa ekspor ke PDF", padahal belum ada.Ditandain: gak ada sumbernya di proyek.
    • 02

      Urutan README yang kebaca dalam sepuluh detik

      Judul soal hasil, momen yang pembaca alamin, buat siapa dan bukan buat siapa, sebelum dan sesudah, cara kerja, baru langkah install.

      Judulnya "A composable, extensible framework".Judulnya hasil yang pembaca dapet, pakai kata-kata mereka.
    • 03

      Tiga GIF siap pakai

      Pembuka dengan judul dan ketikan perintah, sebelum dan sesudah sampai enam keluhan, dan cara kerja tiga atau empat langkah. Warnanya ikut warna proyek lo.

      Contoh README-nya AI Second Brain · AI Prototype Kit · id-voice-gate · artifact-comments

      Bilang ke AI lo"Bikinin README animasi buat proyek ini."
    • 04

      Input sama, GIF sama

      GIF-nya gak direkam dari layar. Tiap animasi dijeda, dimajuin per frame, terus difoto. Jalanin lagi besok, hasilnya tetap sama.

      ContohCopy berubah? Ganti teksnya, render ulang, GIF-nya ikut.
    • 05

      Alt text di tiap GIF

      Urut sesuai kejadian di layar, lengkap sama kata-kata yang penting, jadi pembaca layar ikut ngerti.

      ![demo](demo.gif)Alt text yang nyeritain GIF-nya langkah demi langkah.
    • 06

      Ukuran file dijaga

      Tiap GIF dicek ukurannya, dan ada peringatan kalau lewat 4 MB. Ada juga gambar diam PNG buat tempat yang gak muter GIF.

      ContohLewat 4 MB? Turunin fps, jumlah warna, atau durasinya.
    • 07

      Ilustrasi ngaku ilustrasi

      Adegan contoh dikasih keterangan kayak "Illustration of a typical project README." Gambar karangan gak pernah dipajang seolah layar asli.

      Gambar contoh kebaca kayak screenshot asli.Ada keterangan "ilustrasi" di GIF-nya.
    • 08

      Gak ada yang di-push sebelum lo setuju

      Claude nunjukin README dan GIF-nya dulu. Commit dan push nunggu lo bilang oke.

      ContohREADME langsung publik begitu masuk branch utama, jadi lo yang pegang tombolnya.
    Dipakai buatREADME proyek open sourceProyek sampingan yang baru rilisSkill Claude Code yang mau dibagiinTemplate dan starter kitRender ulang GIF tiap rilisAnimasi dari halaman HTML lo sendiri
    README animated-readme sendiri dibikin pakai alat ini. Tiga GIF di halaman ini hasil render-nya, dari satu file teks yang sama.
    Brian Arfi FaridhiBrian Arfi FaridhiProduct Director di Merit · AI Builder · Yang bikin alat ini

    Lihat langsung

    Animasi sebelum dan sesudah. Sebelum: enam kartu numpuk. Layar pertama isinya langkah install dan gak ada yang tahu proyeknya buat apa. Gak ada gambar yang nunjukin alatnya jalan. Kalimat pembukanya penuh istilah. Rekaman layar satu-satunya ketinggalan tiga versi. Pembaca layar cuma dapet demo.gif. Rekam ulang berarti ngulang semuanya manual. Sapuan hijau ganti labelnya jadi Sesudah: terminal jalanin "Make an animated README for this repo." dan muncul lima hasil: dibuka pakai masalah penggunanya, tiga GIF dari HTML, alt text di tiap GIF, copy yang tinggal di readme-scenes.json dan bisa dirender ulang sekali jalan, dan input yang sama selalu ngasih GIF yang sama.

    Sebelum dan sesudah: enam keluhan soal README, terus lima hasil setelah pakai animated-readme.

    Diagram animasi empat langkah, kiri ke kanan. 1, baca proyek: README.md, dokumen dan kode, buat siapa dan buat apa, apa yang beneran ada sekarang. 2, nulis copy: masalah dulu pakai kata-kata biasa, sebelum dan sesudah, tiap klaim diambil dari proyeknya. 3, isi adegan: readme-scenes.json, template hero, before-after, dan how-it-works, warna lo lewat theme. 4, disorot, render: python scripts/render.py, satu GIF plus satu PNG diam, cek ukuran, dan alt text. Di bawahnya ada garis putaran: copy berubah? Ubah readme-scenes.json, render lagi, GIF-nya ikut.

    Cara kerja: baca proyek, nulis copy, isi adegan, render.

    Dua GIF lain dari README animated-readme sendiri, hasil render alat ini.

    Yang suka bikin ragu

    Yang biasanya ditanyain duluan.

    Harus pakai Claude Code?
    Buat nulis copy-nya, iya, karena itu bagian skill Claude Code. Bagian render GIF bisa jalan sendiri, cukup Python dan Playwright, tanpa akun apa pun.
    Beneran gratis?
    Gratis, lisensinya Apache-2.0. Yang kepakai cuma kuota Claude Code lo sendiri waktu dia nulis copy.
    Ini ngerekam aplikasi gw yang asli?
    Nggak. Dia bikin ilustrasi animasi dari halaman HTML. Kalau butuh rekaman aplikasi asli, jalanin aplikasinya lewat Playwright, terus ambil frame-nya pakai cara yang sama kayak record_html.py.
    GIF-nya gede gak?
    Tiap GIF dicek ukurannya, dan ada peringatan kalau lewat 4 MB. Kalau ffmpeg ada di komputer lo, GIF-nya lebih kecil dan lebih tajam. Tanpa ffmpeg, Pillow yang nyusun GIF-nya.
    Perlu bisa coding?
    Sedikit. Pasangnya pakai beberapa perintah di terminal, langkahnya ada di bagian teknis, atau suruh Claude yang jalanin. Habis itu lo cukup ngobrol sama Claude.

    animated-readme

    README yang nunjukin proyek lo jalan, dari sepuluh detik pertama.

    Gratis. Claude yang nulis dan render, lo yang mutusin kapan tayang.

    Bagikan

    Kenal orang yang butuh ini? Kirim ke dia.

    WhatsAppLinkedInX
    Teks yang ikut dikirim

    Kebanyakan README dibuka pakai langkah install tanpa gambar, jadi pengunjung cabut. animated-readme bikin Claude nulis copy-nya dan nge-render GIF animasi yang nunjukin proyeknya jalan. Gak ada yang di-push sebelum lo setuju. Gratis.

    brianarfi.com/skills/animated-readme

    Buat yang teknisCara pasang, kebutuhan, lisensi, dan changelog lengkap.

    Cara pasang

    Dari nol sampai jalan.

    Langkahnya diambil dari README repo-nya, tinggal salin.

    1. Lihat dia nge-render GIF-nya sendiri

      Cukup Python 3.9 ke atas, gak perlu akun. GIF-nya muncul di docs/. Kalau ffmpeg ada di PATH, GIF-nya lebih kecil dan tajam. Tanpa ffmpeg, Pillow yang nyusun.

      bash
      git clone https://github.com/BrianArfi/animated-readmecd animated-readmepip install playwright pillow && python -m playwright install chromiumpython scripts/render.py

    2. Pasang di proyek lo

      Salin skill-nya dan perintah /animated-readme ke folder .claude di proyek lo.

      bash
      cd your-projectmkdir -p .claude/skills .claude/commandscp -r /path/to/animated-readme .claude/skills/animated-readmecp .claude/skills/animated-readme/commands/animated-readme.md .claude/commands/

    3. Terus, di Claude Code

      Atau jalanin /animated-readme. Claude nunjukin README dan GIF-nya dulu sebelum ada yang di-commit atau di-push.

      Claude Code
      Make an animated README for this repo.

    4. Copy-nya berubah belakangan?

      Perintah ini nge-render ulang GIF-nya dari readme-scenes.json.

      Claude Code
      /animated-readme render

    Kebutuhan

    • Python 3.9 ke atas, plus Playwright (Chromium) dan Pillow.
    • Claude Code buat bagian nulis copy. Render GIF jalan tanpa akun.
    • Opsional: ffmpeg, biar GIF-nya lebih kecil dan tajam.

    Lisensi

    Apache-2.0

    Versi, lisensi, dan changelog dicek ulang ke sumbernya 2026-10-02

    Changelog

    Apa aja yang berubah, dari versi ke versi.

    Disalin dari CHANGELOG produknya, dicek 2026-10-02. Versi yang belum rilis gak ditampilin.

    Versi 0.1.0Terbaru2 Okt 2026

    Added

    • The animated-readme skill and /animated-readme command: read the project, write the copy, render the GIFs, show the README for approval.
    • Three scene templates: hero, before-after and how-it-works, filled from readme-scenes.json.
    • scripts/render.py: renders every scene, writes still PNGs, warns over 4 MB, writes readme-snippets.md with alt text.
    • scripts/record_html.py: deterministic frame-by-frame GIF recording, ffmpeg or Pillow.
    • A writing guide for README copy and alt text.
    • This README, with GIFs rendered by the kit itself.

    AI Skills lain

    Masalah lain yang bisa diberesin.

    Lihat semua AI Skills