Cara bot peninjauan Modern Web Guidance membantu MetaMask mengirimkan UI modern yang mudah diakses

Gilberto Cocchi

Rick Viscomi

Dipublikasikan: 10 November 2026

MetaMask adalah platform keuangan self-custodial dengan lebih dari 100 juta download di sekitar 190 negara. Ekstensi browsernya dikembangkan secara terbuka, sehingga aliran permintaan pull yang stabil berasal dari kontributor di dalam dan di luar perusahaan.

UX engineer MetaMask, Francis Nepomuceno, meninjau banyak permintaan pull tersebut dan menginginkan cara yang konsisten untuk membantu kontributor menerapkan praktik terbaik aksesibilitas dan menggunakan fitur web modern. Di editornya, ia sudah menggunakan Modern Web Guidance Chrome, serangkaian keterampilan yang menghadirkan praktik terbaik platform web dan data kompatibilitas browser ke agen coding. Untuk memberikan panduan yang sama kepada kontributor lain, ia menyiapkan bot untuk meninjau setiap permintaan pull ke repositori open source MetaMask, terlepas dari alat yang digunakan penulisnya.

Tantangan: Mengikuti perkembangan fitur web modern

HTML dan CSS modern terus menambahkan fitur yang meningkatkan aksesibilitas dan pengalaman pengguna, dan melacak fitur mana yang berfungsi di berbagai browser adalah hal yang sulit. Dengan banyaknya kontributor, pengetahuan tersebut harus menjangkau semua orang yang membuka permintaan pull.

Keamanan menambahkan alasan lain untuk diperhatikan: MetaMask melakukan sandbox pada setiap dependensi pihak ketiga secara default, sehingga fitur browser native lebih murah untuk diadopsi daripada alternatif library. Seperti yang dikatakan Nepomuceno, "memiliki akses ke API modern ini, seperti dapat menggunakan dialog dan dropdown tanpa JavaScript, merupakan keuntungan besar".

Solusinya: Modern Web Guidance meninjau setiap permintaan pull

Pada 16 September 2026, permintaan pull ke MetaMask/metamask-extension menambahkan halaman "Cara kerjanya" dengan FAQ yang dibuat seperti kebanyakan FAQ React:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

Sekitar lima menit kemudian, bot memberikan komentar. Dengan mengutip panduan search-hidden-content, ada tiga poin yang disampaikan:

• Merender setiap jawaban secara bersyarat akan menghapusnya dari DOM, sehingga teks yang diciutkan tidak dapat ditemukan dengan fitur temukan dalam halaman browser dan lebih sulit ditemukan oleh teknologi pendukung.
• Pengungkapan <details>/<summary> native (Baseline sejak 2020) mempertahankan konten di DOM dengan semantik yang tepat. Untuk panel yang saling eksklusif, atribut name bersama (Baseline Baru tersedia sejak 2024) akan menutup panel lainnya secara otomatis; untuk FAQ multi-buka, hapus atribut tersebut.
• Jika tim lebih memilih komponen Disclosure yang sudah ada, tim setidaknya harus menyimpan jawaban di DOM dengan hidden="until-found" dan pemroses beforematch yang menyinkronkan aria-expanded dan status ikon.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

Tiga belas menit kemudian, penulis mendorong perbaikan. Komponen menjadi pengungkapan <details>/<summary> native, jawaban yang diciutkan tetap berada di DOM untuk fitur temukan di halaman, dan dua tombol navigasi menjadi link.

Bot tersebut adalah Cursor Automation yang menjalankan Modern Web Guidance, dan Nepomuceno menyiapkannya dengan perintah tiga baris. Pada 21 Oktober 2026, lima minggu setelahnya:

• Bot telah berjalan pada sekitar 480 permintaan pull dan mengomentari 64 di antaranya (57 permintaan pull fitur dan perbaikan, ditambah 7 permintaan pull rilis dan sinkronisasi otomatis) dari 26 penulis.
• Pada permintaan pull fitur dan perbaikan, engineer memperbaiki 43 temuannya, dan memperbaiki sebagian 3 temuan lainnya, di 22 permintaan pull.
• Engineer bertindak cepat: dari 38 perbaikan dengan commit yang dapat diidentifikasi, 19 diselesaikan dalam waktu 15 menit dan 26 dalam waktu satu jam, dengan median 15,2 menit dari komentar hingga perbaikan.

Berikut cara MetaMask mengonfigurasi bot, apa yang ditangkapnya, dan di mana bot tersebut menimbulkan gangguan.

Penyiapannya adalah perintah tiga baris

Saat ditanya bagaimana otomatisasi dikonfigurasi, Nepomuceno menjawab: "Tentu, tidak ada yang istimewa dalam penyiapan kami. Kami hanya membuatnya ringkas dan terfokus." Seluruh petunjuk:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

Cara kerjanya dalam praktik:

• Bersifat saran: Pada dua hari pertamanya, bot memposting ulasan "minta perubahan" (dan satu persetujuan), yang diabaikan oleh penulis setelah mereka mengatasinya; sejak 18 September, setiap ulasan telah menjadi komentar. Alat ini tidak memblokir penggabungan, sehingga penulis tetap memiliki keputusan akhir atas setiap saran.
• Bot ini mengutip panduan dan file tertentu dalam repositori: Di 64 permintaan pull yang dikomentarinya, bot ini memberikan 122 temuan. Dari 102 permintaan pull fitur dan perbaikan, 63 di antaranya menyebutkan panduan Modern Web Guidance tertentu yang diterapkan, seperti search-hidden-content, state-aware-sticky-headers, atau sms-otp-form, dan mengarah ke file yang ada di repositori saat file tersebut sudah menggunakan pola yang direkomendasikan.
• Bot ini tetap diam kecuali jika permintaan pull menyentuh UI: Dari sekitar 480 permintaan pull dalam lima minggu tersebut, setidaknya 100 menyentuh UI atau kode klien, dan bot rata-rata menemukan sekitar dua temuan per permintaan pull yang dikomentari. Tim yang sebagian besar memiliki repositori frontend dapat mengharapkan komentar pada bagian yang lebih besar.

Perintah itu sendiri dapat digunakan dengan runner agen apa pun; Modern Web Guidance diinstal sebagai keahlian atau plugin untuk Cursor, Claude Code, Codex, GitHub Copilot, Antigravity, dan agen coding lainnya. Saat agen menjalankan keterampilan, agen akan mencari panduan yang cocok dalam indeks lokal tanpa memerlukan kunci API, dan memeriksa perbedaan terhadap panduan tersebut, menggunakan model apa pun yang sudah disediakan oleh runner agen tim.

Hal yang ditemukan Modern Web Guidance, tetapi tidak ditemukan linter

Linter statis dapat menandai atribut yang tidak ada pada satu elemen, tetapi temuan yang muncul berkaitan dengan perilaku interaksi, semantik HTML, dan cara komponen saling melengkapi di berbagai file.

Kolom biaya transaksi yang terlihat dapat diedit, tetapi mengabaikan input secara diam-diam

Di setelan biaya transaksi lanjutan MetaMask, kolom batas gas (yang membatasi biaya jaringan yang dapat digunakan transaksi) terlihat dapat diedit, tetapi mengabaikan input pengguna secara diam-diam. Hal ini terjadi saat estimasi biaya masih dimuat atau gagal. Sementara itu, tombol Simpan dinonaktifkan, tanpa penjelasan yang dapat dibaca oleh teknologi pendukung.

Dengan mengutip panduan formulir, bot menandai tiga perbaikan:

• Nonaktifkan kolom batas gas jika tidak ada estimasi yang tersedia, dan hubungkan teks status yang terlihat ke kolom tersebut agar teknologi pendukung dapat membaca penjelasannya.
• Hubungkan tombol Simpan yang dinonaktifkan ke teks status yang sama agar pembaca layar mengetahui alasan tombol tersebut dinonaktifkan.
• Ubah kolom ke mode input numerik agar pengguna seluler mendapatkan keypad numerik.

Penulis menerapkan ketiga perbaikan di kedua modal setelan dan menggabungkannya ke dalam satu komponen.

Tombol banner yang menyembunyikan URL-nya

Di banner status untuk salah satu fitur perdagangan MetaMask, tindakan "FAQ" dan "hubungi Dukungan MetaMask" inline dibuat sebagai tombol yang membuka tab baru dengan JavaScript, bukan sebagai link. Dalam waktu tiga menit, bot—dengan mengutip panduan HTML dan aksesibilitas—menandai bahwa pembaca layar mengucapkannya sebagai tombol dan pengguna kehilangan kemampuan link seperti menyalin URL atau membukanya di tab baru dari menu konteks. AI ini juga mengarah ke komponen banner yang ada di codebase MetaMask yang sudah merender tindakan ini sebagai link sungguhan.

Dua belas menit kemudian, penulis mengubah kedua tindakan menjadi link. "Saya merasa sangat terbantu karena setelah panduan diadopsi, ulasan di masa mendatang menyebutkannya sebagai contoh referensi," kata Nepomuceno.

Input verifikasi yang labelnya berada di tempat lain

Kemampuan bot untuk membaca berbagai file juga membuahkan hasil pada formulir multi-langkah. Linter statis hanya melihat kolom teks dengan teks placeholder di dalam setiap langkah dan tidak dapat mengetahui bahwa judul dan petunjuk yang terlihat berada di komponen tata letak induk. Dengan mengutip panduan formulir dan aksesibilitas, bot mendeteksi bahwa placeholder adalah satu-satunya label kolom, bahwa judul langkah dan petunjuk dalam tata letak induk tidak terkait dengan input, dan bahwa pesan error dan "kode dikirim ulang" tidak diumumkan ke pembaca layar. Lima belas menit kemudian, ketiganya diperbaiki, dan pengodean aksesibilitas tersebut tetap utuh saat permintaan pull lanjutan mengubah gaya input kode menjadi enam kotak digit visual.

Beberapa hal lain yang ditemukan bot

Lima temuan lainnya dari pengujian lima minggu yang sama:

• Detail CSS yang terlewat oleh engineer di balik bot: Permintaan pull Nepomuceno sendiri untuk tab beranda melekat menyarangkan kueri scroll-state CSS tanpa memberi nama penampungnya dan mengalihkan batas dengan cara yang menggeser tata letak di tengah scroll. Bot mengutip panduan header melekat berbasis status, dan dia memperbaiki keduanya. Dia merasa ulasan tersebut bermanfaat untuk kueri pemosisian anchor dan status scroll.
• Slippage dibatasi di tengah pengetikan: Input slippage kustom (pergerakan harga yang akan ditoleransi pengguna dalam perdagangan) membatasi nilai di atas 100% pada setiap pengetikan, mengubah 101 menjadi 100 saat pengguna masih mengetik. Dengan mengikuti panduan formulir, perbaikan memindahkan validasi ke saat kolom kehilangan fokus dan menambahkan banner peringatan yang terlihat.
• Indikator pemuatan yang tidak dapat digunakan oleh pembaca layar: Skeleton pemuatan daftar token menempatkan label "pemuatan" pada elemen umum tanpa peran, yang dilarang oleh ARIA. Bot tersebut mengarah ke dua komponen dalam codebase yang sudah menggunakan pola khusus pembaca layar MetaMask (keduanya diperbarui setelah peninjauan Modern Web Guidance enam hari sebelumnya), dan penulis menyelaraskan skeleton dengan pola tersebut delapan menit kemudian.
• Tindakan asinkron yang tidak terlindungi: Tombol asinkron "Lihat di penyedia" tidak memiliki perlindungan dalam proses, sehingga klik dua kali dapat membuka tab duplikat dan pemantau latar belakang. Penulis menambahkan guard kurang dari empat menit setelah komentar.
• Validasi penekanan tombol tanpa formulir: Halaman Impor NFT divalidasi pada setiap penekanan tombol dan tidak memiliki elemen <form> untuk semantik pengiriman. Keduanya diperbaiki 19 menit setelah peninjauan.

Setiap ulasan bersifat publik. Komentar lengkap bot ada di setiap permintaan pull yang ditautkan, dan Anda dapat menjelajahi semuanya di GitHub.

Masalah yang tidak diperbaiki, dan seberapa mengganggu masalah tersebut

Tidak semua temuan berhasil. Tabel berikut menunjukkan cara MetaMask menghitung 102 temuan pada permintaan pull fitur dan perbaikan (20 temuan lainnya mendarat di 7 permintaan pull rilis dan sinkronisasi, yang ulasannya tidak diharapkan mengubah kode):

Dikelompokkan berdasarkan tema di semua 122 temuan (termasuk 20 temuan pada permintaan pull rilis dan sinkronisasi):

Beberapa pola dalam angka tersebut:

• Perbaikan yang tetap berada di dalam satu komponen jauh lebih sering diterapkan daripada perubahan aksesibilitas lintas fungsi. Perbaikan formulir dan HTML tetap berada di dalam komponen yang sedang ditinjau, sehingga penulis biasanya langsung menerapkannya (19 dari 31 diperbaiki). Aksesibilitas memiliki temuan terbanyak (38), tetapi hanya 12 yang diperbaiki, biasanya karena perbaikan berada di luar cakupan permintaan pull atau memerlukan komponen sistem desain bersama yang belum ada.
• "Lainnya" adalah tempat yang menyimpang dari panduan platform web. Enam belas temuan mencakup konsistensi sistem desain, bug logika, teks, kualitas pengujian, mode gelap, dan kebersihan kode; 3 di antaranya ditindaklanjuti, salah satunya adalah regresi nyata (perubahan daftar jaringan yang merusak pengisian otomatis formulir). Sebagian besar dari 16 perubahan tersebut mudah diabaikan, tetapi menemukan regresi tersebut membuat perubahan tersebut layak untuk dilihat sekilas.
• Positif palsu berasal dari cara agen menerapkan panduan, dan sebagian besar gangguan dapat diperbaiki dalam penyiapan. Karena bot peninjauan adalah agen yang membaca diff, bukan linter statis, positif palsunya berasal dari kesalahan pembacaan kode di sekitarnya atau penerapan aturan yang lebih ketat daripada panduan yang ditautkan. Melewati cabang rilis dan sinkronisasi serta memperketat perintah agar agen mematuhi aturan yang dinyatakan secara eksplisit dalam panduan adalah penyesuaian berikutnya yang jelas.

Nepomuceno menjelaskan efek yang lebih luas pada tim dan waktu penyelesaian peninjauan:

Engineer MetaMask, David Murdoch, juga telah berkontribusi kembali pada panduan itu sendiri: Saat panduan tata letak CSS mengalami error di salah satu contohnya, ia mengajukan masalah, dan tim Modern Web Guidance menggabungkan koreksi dua hari kemudian.

Saran MetaMask untuk tim yang mempertimbangkannya

• Baca panduan sebelum menulis apa pun. Jalankan npx modern-web-guidance@latest search "accordion find in page" untuk melihat panduan yang akan diambil agen untuk suatu tugas. Anda juga dapat menjelajahi kumpulan lengkap panduan Modern Web Guidance.
• Mulailah dengan perintah tiga baris dan agen yang sudah Anda jalankan. Instal kemampuan (npx modern-web-guidance@latest install, atau perintah plugin agen), arahkan apa pun yang dapat berjalan pada permintaan pull ke kemampuan tersebut, dan beri tahu kemampuan tersebut untuk memberikan komentar hanya jika ada sesuatu yang dapat ditindaklanjuti dan untuk mematuhi aturan yang dinyatakan secara eksplisit dalam panduan. Membuat bot tetap diam saat tidak ada masalah adalah alasan engineer MetaMask masih membaca komentarnya.
• Perkirakan beberapa temuan tidak akan ditangani. Dari 102 temuan pada permintaan pull fitur dan perbaikan, 43 diperbaiki dan 36 ditolak atau tidak ditangani. Rasio tersebut berfungsi dengan baik untuk bot peninjauan yang bersifat saran, sedangkan akan mengganggu jika digunakan sebagai pemeriksaan pemblokiran.
• Terus lakukan peninjauan manual. Bot ini menguasai semantik platform web, CSS modern, dan pola interaksi, tetapi tidak mengetahui produknya.

Ada juga hal yang belum diukur MetaMask: setelah lima minggu, tim belum melacak biaya per permintaan pull, runtime, perbandingan model, atau perilaku bot peninjauan di luar codebase React.

Dengan tiga baris konfigurasi, MetaMask mendapatkan bot peninjauan yang mengutip panduan khusus untuk sebagian besar temuan (dan contoh dalam repo yang ada jika ada). Saran yang diterima biasanya diperbaiki dalam waktu satu jam.