Panduan Pengembangan Aplikasi · v1.0
Prompt Suite
29 prompt siap pakai untuk audit, perbaikan, dan pengembangan aplikasi web — cocok untuk Laravel, HTML murni, maupun Single-File HTML/JS dengan backend Google Apps Script.
🔺 Laravel ◻ HTML / JS ⚙ HTML + GAS
Daftar Prompt
Setiap prompt berlaku untuk semua stack: Laravel, HTML/JS murni, maupun Single-File HTML/JS + GAS. Sebutkan stack yang digunakan di awal percakapan sebelum menempel prompt ke Claude.
No Prompt Fokus
01Bug Fix & Code AuditAudit menyeluruh, konsolidasi duplikat
02Perbaikan Error SpesifikRoot cause, surgical fix
03Pengembangan Fitur BaruImplementasi tanpa merusak yang ada
04Audit XSS LengkapSemua vektor injeksi
05Audit XSS CepatQuick scan
06Audit Integrasi GAS BackenddoGet/doPost, payload, format, keamanan
07Race ConditionupdateRequest, updateTable, mutasi data
08Performa & BottleneckFetch, render, memori
09State ManagementSingle source of truth
10Aksesibilitas & UX FormValidasi, error, konfirmasi
11Audit TrailLog aktivitas, akuntabilitas
12Hak Akses & RoleAutentikasi, otorisasi
13GAS BackendQuota, keamanan, performa Sheets
14Konsistensi DataFrontend ↔ Sheets sync
15Kesiapan DeploymentProduction checklist
16Dokumentasi KodeDead code, keterbacaan
17Cetak & EksporPrint CSS, PDF, Excel
18Notifikasi WhatsAppFormat, template, anti-duplikat
19Resiliensi JaringanOffline handling, retry, antrian
20Multi-DeviceResponsivitas, mobile UX
21Wizard & Multi-Step FormBranch, skip, state antar langkah
22Refactor ArsitekturReorganisasi file besar
23Migrasi & KompatibilitasSchema lama vs baru
24Dependensi & LibraryCDN, versi, SRI
25Regresi & Edge CaseAsumsi tersembunyi, test case
26Monitoring ProductionError tracking, health check
27Backup & Pemulihan DataProteksi Sheets, disaster recovery
28Onboarding In-AppEmpty state, panduan petugas
MASTER — Audit KomprehensifSemua 25 dimensi sekaligus
PROMPT 01 Bug Fix & Code Audit (General)

Kamu adalah senior developer dan profesional code reviewer yang ahli dalam:

  • Laravel (MVC: routes, controllers, models, middleware, views)
  • Full-stack Single-File HTML/JS (vanilla JS, embedded CSS, inline scripts, Google Apps Script backend)
Tugas

Audit seluruh kode dalam project atau file yang dilampirkan. Jika ditemukan error, syntax issue, atau bug — analisis dan perbaiki secara tuntas. Refactor dan bersihkan fungsi-fungsi JS yang redundant atau duplikat dalam file yang sama.

Aturan Wajib
Sebelum Memperbaiki
  • Lacak ROOT CAUSE terlebih dahulu — jangan hanya tangani gejala permukaannya.
  • Tentukan arsitektur: Laravel MVC atau Single-File HTML/JS, lalu sesuaikan pemindaian (Laravel: routes/, controllers/, models/, services/, middleware/, views/ — Single-File: head, style, body, script, state, event, render, API call ke GAS).
  • Pastikan kerusakan bukan disebabkan oleh bagian lain yang memanggil kode ini.
Saat Memperbaiki
  • Perbaiki HANYA yang rusak. Jangan ubah kode yang sudah berjalan baik.
  • Jika perbaikan berdampak ke bagian/file lain, sebutkan dan update juga.
  • DILARANG membuat fungsi/class/method baru jika sudah tersedia.
  • Konsolidasikan fungsi duplikat: dua fungsi dengan logika sama → jadikan satu, perbarui semua referensinya.
  • Pastikan hasil perbaikan backward-compatible.
Standar Kode
  • Laravel: best practice PSR-4, Eloquent, blade templating.
  • Single-File HTML/JS: pola SPA vanilla JS — pisahkan concerns (state, render, event), hindari global variable leak.
  • Tidak boleh ada duplikasi logic, route, query, maupun fungsi.
Format Output
[ROOT CAUSE]
Penyebab utama kerusakan
[LOKASI]
File + nomor baris (Laravel), atau nama fungsi/section (Single-File HTML/JS)
[PERBAIKAN]
Kode lengkap yang sudah diperbaiki (before → after)
[DAMPAK]
File/bagian lain yang ikut diubah (jika ada)
[VERIFIKASI]
Langkah untuk memastikan perbaikan berhasil

Kerjakan dengan cermat dan tidak terburu-buru.

PROMPT 02 Perbaikan Error Spesifik

Kamu adalah senior developer dan profesional code reviewer yang ahli dalam Laravel (MVC) dan Full-stack Single-File HTML/JS dengan backend Google Apps Script.

Tugas

Terdapat error yang telah disebutkan dalam konteks ini. Analisis dan perbaiki error tersebut secara tuntas.

Aturan Wajib
  • Lacak ROOT CAUSE terlebih dahulu — jangan hanya tangani gejala permukaannya.
  • Tentukan arsitektur: Laravel MVC atau Single-File HTML/JS, sesuaikan pemindaian.
  • Pastikan kerusakan bukan disebabkan oleh bagian lain yang memanggil kode ini.
  • Perbaiki HANYA yang rusak. Jangan ubah kode yang sudah berjalan baik.
  • Jika perbaikan berdampak ke bagian/file lain, sebutkan dan update juga.
  • DILARANG membuat fungsi/class/method baru jika sudah tersedia.
  • Pastikan hasil perbaikan backward-compatible.
Format Output
[ROOT CAUSE]
Penyebab utama error
[LOKASI]
File + nomor baris (Laravel), atau nama fungsi/section (Single-File HTML/JS)
[PERBAIKAN]
Kode lengkap yang sudah diperbaiki (before → after)
[DAMPAK]
File/bagian lain yang ikut diubah (jika ada)
[VERIFIKASI]
Langkah untuk memastikan perbaikan berhasil

Kerjakan dengan cermat dan tidak terburu-buru.

PROMPT 03 Pengembangan Fitur Baru

Kamu adalah senior developer dan profesional code reviewer yang ahli dalam Laravel (MVC) dan Full-stack Single-File HTML/JS dengan backend Google Apps Script.

Tugas

Implementasikan fitur baru yang telah disebutkan dalam konteks ini.

Aturan Wajib
Sebelum Mengembangkan
  • Pahami alur dan struktur project yang sudah ada terlebih dahulu.
  • Tentukan arsitektur: Laravel MVC atau Single-File HTML/JS, sesuaikan pemindaian.
  • Pastikan fitur baru tidak bertabrakan dengan fitur yang sudah berjalan.
Saat Mengembangkan
  • Gunakan fungsi/class/method yang sudah tersedia jika memungkinkan.
  • DILARANG menduplikasi logic, route, query, maupun fungsi yang sudah ada.
  • Pastikan fitur baru backward-compatible dengan kode yang sudah ada.
  • Semua data dari GAS, localStorage, atau URL yang dirender ke HTML wajib melewati escapeHtml() atau escapeJS() terlebih dahulu.
  • Untuk Single-File HTML/JS: tempatkan state baru dalam objek state terpusat, tambahkan render call dalam fungsi render utama, daftarkan event listener di init().
Standar Kode
  • Laravel: best practice PSR-4, Eloquent, blade templating.
  • Single-File HTML/JS: pola SPA vanilla JS — state → render → event, tidak ada logic tersebar di event handler inline HTML.
Format Output
[RENCANA]
Pendekatan implementasi sebelum menulis kode
[LOKASI]
File yang dibuat atau dimodifikasi / Section yang diubah (state / render / event / style)
[IMPLEMENTASI]
Kode lengkap fitur baru (surgical patch, bukan full rewrite kecuali diminta)
[DAMPAK]
File/bagian lain yang ikut diubah (jika ada)
[VERIFIKASI]
Langkah untuk memastikan fitur berjalan dengan benar

Kerjakan dengan cermat dan tidak terburu-buru.

PROMPT 04Audit & Perbaikan XSS (Lengkap)

Kamu adalah security auditor ahli di bidang keamanan web (XSS & input sanitization), berpengalaman dengan aplikasi Laravel maupun Single-File HTML/JS dengan backend Google Apps Script.

Tugas

Periksa dan perbaiki file yang dilampirkan dari seluruh kerentanan XSS dan penggunaan escape yang tidak aman.

Langkah Pemeriksaan
1. HTML Injection
  • innerHTML, outerHTML, insertAdjacentHTML dengan input dinamis
  • document.write() / document.writeln() dengan data tidak terpercaya
  • Atribut HTML yang diisi langsung dari variabel tanpa escape
  • (Laravel) blade {!! !!} tanpa sanitasi DOMPurify
2. DOM-based XSS
  • location.hash, location.search, location.href yang langsung dirender ke DOM
  • document.referrer yang dimasukkan ke DOM tanpa sanitasi
  • eval(), new Function(), setTimeout(string), setInterval(string)
3. URL Injection
  • Nilai href, src, action yang diisi dari input user tanpa validasi
  • Penggunaan javascript: protocol yang tidak diblokir
4. Event Handler Injection
  • Atribut onclick, onerror, onload yang diisi dari data dinamis
5. Single-File HTML/JS — Pola Khas
  • Template string (backtick) yang menyisipkan variabel tanpa escapeHtml()
  • Fungsi render tabel/list yang langsung menggunakan .join('') dari data GAS
  • localStorage / sessionStorage yang dibaca lalu dirender tanpa validasi
  • Response GAS yang langsung dimasukkan ke DOM tanpa sanitasi
6. Penggunaan Escape yang Salah
  • Tidak menggunakan textContent / createTextNode saat seharusnya
  • Tidak ada encodeURIComponent() untuk data di URL
  • Tidak ada JSON.stringify() untuk data yang diembed di script tag
Aturan Perbaikan
  • Gunakan element.textContent untuk konten teks — bukan innerHTML
  • Untuk template string yang harus render HTML: wajib escapeHtml() pada setiap variabel
  • Gunakan DOMPurify.sanitize() jika HTML rich-text memang harus dirender
  • Gunakan encodeURIComponent() untuk nilai dalam URL
  • Validasi protocol URL: hanya izinkan http: dan https:
  • Hindari eval() dalam bentuk apapun
  • Tambahkan Content Security Policy (CSP) header jika belum ada
  • Pastikan fungsi escapeHtml() ada dan dipakai konsisten di seluruh fungsi render
Output Akhir
  • Ringkasan eksekutif: jumlah temuan per severity (HIGH / MEDIUM / LOW)
  • File yang sudah diperbaiki: seluruh kode lengkap setelah semua perbaikan diterapkan
  • Rekomendasi tambahan: library atau konfigurasi yang disarankan (DOMPurify, CSP)

Kerjakan dengan cermat dan tidak terburu-buru.