AI Skill Report Card
Crafting HTML5 Web Apps
Quick Start12 / 15
Ketika pengguna meminta web app (misal "buatkan to-do list app"), jangan langsung menulis kode. Ikuti alur:
- Analisis kebutuhan → identifikasi ambiguitas → tanyakan jika krusial (fitur inti tidak jelas), lanjutkan dengan asumsi wajar jika ambiguitas minor.
- Ajukan 3 pendekatan desain/arsitektur berbeda, bandingkan, pilih satu.
- Tulis kode HTML5 semantik + CSS3 + JS vanilla, berkomentar jelas.
- Jalankan checklist validasi internal sebelum menyajikan hasil.
- Sajikan output dalam tiga blok kode terpisah + penjelasan + saran pengembangan.
Recommendation▾
Description is in Indonesian while best practice examples in official docs use English; consider whether target audience/consistency matters, and ensure description remains third-person (it currently is, which is good) — but tighten it: it's a bit long-winded and could be more concise about triggers.
Workflow14 / 15
Progress:
- Langkah 1: Klarifikasi kebutuhan (fitur wajib, target pengguna, gaya visual, batasan teknis)
- Langkah 2: Brainstorm 3 pendekatan (misal: SPA vanilla JS vs multi-page vs component-based tanpa framework)
- Langkah 3: Pilih pendekatan optimal dengan justifikasi singkat
- Langkah 4: Tulis HTML semantik (header, main, nav, section, footer sesuai konteks)
- Langkah 5: Tulis CSS3 responsif (mobile-first, flexbox/grid, media queries, custom properties)
- Langkah 6: Tulis JavaScript murni (event delegation, error handling, state management sederhana)
- Langkah 7: Validasi HTML (tag tertutup, atribut wajib:
lang,alt,type,for/idpairing) - Langkah 8: Cek aksesibilitas (ARIA roles/labels, kontras warna WCAG AA minimum 4.5:1, navigasi keyboard/tab order, focus states)
- Langkah 9: Uji edge case JS (input kosong, input ekstrem, localStorage penuh/tidak tersedia, race condition async)
- Langkah 10: Cek kompatibilitas lintas browser (fallback untuk fitur CSS/JS modern, vendor prefix bila perlu)
- Langkah 11: Sajikan hasil akhir dengan penjelasan fitur, cara kerja, dan saran pengembangan lanjutan
Recommendation▾
The two examples in 'Contoh Interaksi' describe outputs abstractly (e.g., 'Kode HTML (form input, tabel...)') rather than showing actual concrete code snippets; add at least one fully realized code example with real HTML/CSS/JS to demonstrate the expected output format.
Contoh Interaksi
Contoh 1: Input: "Buatkan aplikasi pencatat pengeluaran harian sederhana." Output:
- Klarifikasi singkat: "Apakah perlu penyimpanan data (localStorage) atau cukup sesi sekali pakai? Apakah perlu kategori pengeluaran?"
- 3 pendekatan: (a) Single-page form + tabel dinamis + localStorage, (b) Dashboard dengan grafik ringkas via Canvas API, (c) Multi-tab (harian/mingguan/bulanan) dengan filter.
- Pilihan: (a) karena paling sesuai untuk kebutuhan "sederhana" dan cepat diimplementasi.
- Kode HTML (form input, tabel semantik
<table>dengan<thead>/<tbody>, tombol hapus per baris) + CSS (grid layout, warna kontras tinggi) + JS (fungsi tambah/hapus/hitung total, validasi input angka, simpan ke localStorage dengan try-catch). - Checklist validasi dilaporkan singkat: "✓ HTML valid, ✓ ARIA label pada tombol hapus, ✓ Kontras 7:1, ✓ Tested edge case: input kosong/negatif ditolak."
- Saran lanjutan: tambah kategori, ekspor CSV, grafik pie.
Contoh 2:
Input: "Buat landing page untuk kedai kopi."
Output: Klarifikasi (gaya: minimalis/rustic? perlu form reservasi?), 3 pendekatan (single-scroll storytelling, tab-based menu showcase, hero+parallax minimal JS), pilih single-scroll untuk landing page (SEO & load time lebih baik), kode lengkap dengan <header>, <nav> sticky, <section> hero/menu/testimoni/kontak, CSS animasi scroll ringan tanpa library, JS untuk smooth scroll dan validasi form kontak, laporan validasi, saran (integrasi peta, lazy-load gambar).
Best Practices
- Selalu gunakan elemen semantik (
<header>,<nav>,<main>,<article>,<section>,<footer>) alih-alih<div>generik. - Tulis komentar penjelas di setiap blok logika penting, bukan di setiap baris trivial.
- Gunakan CSS custom properties (
:root { --primary-color: ... }) untuk konsistensi tema dan kemudahan maintenance. - Terapkan mobile-first dengan
min-widthmedia queries. - Sertakan
altdeskriptif pada gambar,aria-label/aria-livepada elemen dinamis, dan pastikan urutan tab logis. - Gunakan
try-catchuntuk operasi yang bisa gagal (localStorage, JSON.parse, fetch). - Uji kontras warna secara eksplisit (sebutkan rasio perkiraan) sebelum finalisasi palet warna.
- Jika permintaan ambigu pada aspek non-kritis (misal warna, jumlah item demo), buat asumsi wajar dan sebutkan asumsi tersebut alih-alih menghentikan proses.
- Batasi jumlah pendekatan alternatif pada 3 agar analisis tetap fokus dan tidak membingungkan pengguna.
Common Pitfalls
- Jangan langsung menulis kode tanpa menyebutkan analisis kebutuhan dan pilihan pendekatan, meski singkat — ini menghilangkan nilai proses berlapis.
- Jangan gunakan library eksternal (jQuery, Bootstrap, dll.) kecuali pengguna secara eksplisit memintanya.
- Jangan lupa menutup tag, memberi
id/foryang berpasangan pada label-input, atau mengabaikan atributlangpada<html>. - Jangan mengklaim "sudah divalidasi lintas browser" tanpa benar-benar menjelaskan potensi masalah kompatibilitas (misal
:has(),backdrop-filter) dan fallback-nya. - Jangan menyajikan kode dalam satu blok campur aduk — pisahkan HTML, CSS, JS secara jelas kecuali diminta dalam satu file.
- Jangan mengabaikan edge case JS seperti input kosong, karakter khusus, atau kegagalan localStorage (mode private browsing).
- Jangan berlebihan bertanya klarifikasi untuk hal-hal trivial yang bisa diasumsikan secara wajar — ini memperlambat tanpa menambah nilai.