AI Skill Report Card
HTML5 Coding Assistant
Markdown--- name: html5-coding-assistant description: Membuat, memodifikasi, dan memvalidasi kode HTML5 agar semantik, valid W3C, dan bebas error/warning. Digunakan saat user meminta pembuatan struktur HTML (form, nav, table, section, dll), meminta perbaikan/modifikasi file HTML yang diunggah, atau saat workflow web development seperti prototyping dan debugging halaman sedang berlangsung. ---
Quick Start13 / 15
Instruksi: "buat form login HTML5 dengan username dan password"
Output langsung:
HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <form action="#" method="post"> <label for="username">Username</label> <input type="text" id="username" name="username" required> <label for="password">Password</label> <input type="password" id="password" name="password" required> <button type="submit">Login</button> </form> </body> </html>
Validasi: PASSED (0 error, 0 warning)
Recommendation▾
Description is written in Indonesian while most Claude skill ecosystems expect English; consider providing an English version or at least ensuring third-person phrasing is unambiguous across languages.
Workflow13 / 15
Progress:
- Step 1: Parse instruksi → petakan ke elemen/atribut HTML5 yang relevan
- Step 2: Jika ada file input, lakukan pre-check (parse struktur existing, cek doctype/head/body)
- Step 3: Generate/modifikasi kode sesuai instruksi (tambah/ubah, jangan hapus tanpa perintah eksplisit)
- Step 4: Jalankan validasi HTML5 (cek doctype, tag tertutup, atribut wajib, nesting)
- Step 5: Jika ada error/warning → perbaiki dan validasi ulang sebelum lanjut
- Step 6: Susun laporan (snippet before/after, elemen diubah, alasan teknis, hasil validasi)
- Step 7: Kirim hasil (file HTML + laporan) hanya jika validasi PASSED
Aturan pemetaan instruksi umum:
- "form login/register" →
<form>+<label>+<input>sesuai jenis field +<button> - "navbar/menu" →
<nav><ul><li><a>...</a></li></ul></nav> - "tabel data" →
<table><thead><tr><th>...</th></tr></thead><tbody>...</tbody></table> - "halaman lengkap" →
<header><main><section>/<article></section></main><footer> - "gambar" →
<img src="..." alt="...">— alt wajib diisi (deskriptif atau placeholder jika tidak disebutkan, dokumentasikan sebagai asumsi)
Recommendation▾
Add an example showing a FAILED validation scenario and the corrective loop (Step 5) in action, not just PASSED outcomes.
Examples14 / 20
Example 1:
Input: "buat form login HTML5 dengan username dan password"
Output: File HTML5 lengkap dengan <form>, <input type="text">, <input type="password">, <button>Login</button>. Laporan: elemen ditambahkan, validasi PASSED.
Example 2:
Input: "ubah title halaman jadi 'Dashboard'"
Before: <title>Home</title>
After: <title>Dashboard</title>
Output: Laporan menunjukkan diff title lama vs baru, validasi PASSED.
Example 3: Input: "tambahkan navbar dengan link Home, About, Contact" Output:
HTML<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>
Asumsi didokumentasikan: href diisi anchor placeholder karena target link tidak disebutkan. Validasi PASSED.
Recommendation▾
Include a concrete example of modifying an uploaded/existing file with a more complex before/after diff (e.g., adding ARIA attributes to a dropdown) to demonstrate Step 2/3 more fully.
Format Laporan (wajib disertakan setiap delivery)
Laporan Perubahan
- Elemen ditambahkan/diubah: [daftar]
- Alasan teknis: [singkat, per elemen]
- Asumsi (jika instruksi ambigu): [daftar, atau "tidak ada"]
- Snippet Before: [kode lama atau "N/A - file baru"]
- Snippet After: [kode baru]
- Hasil Validasi: PASSED / FAILED (detail error jika FAILED)
Best Practices
- Gunakan elemen semantik:
header,nav,main,section,article,aside,footer— hindari<div>berlebihan. - Selalu isi
altpada<img>; jika tidak ada instruksi teks alt, gunakan deskripsi kontekstual dan catat sebagai asumsi. - Navigasi selalu dalam struktur
<ul><li>. - Gunakan
<label for="">yang terhubung denganidinput pada semua form field untuk aksesibilitas. - Tambahkan
aria-*saat elemen interaktif kompleks (modal, tab, dropdown) diminta. - CSS/JS eksternal lebih diutamakan daripada inline kecuali user secara eksplisit minta inline.
- Selalu sertakan
<!DOCTYPE html>,<html lang="...">,<meta charset="UTF-8">pada file baru.
Common Pitfalls
- Jangan mengirim hasil jika validator masih menunjukkan error/warning — perbaiki dulu.
- Jangan menghapus atau mengubah elemen/atribut yang tidak diminta user.
- Jangan membiarkan instruksi ambigu tanpa mendokumentasikan asumsi yang diambil.
- Jangan lupa menutup tag atau menyusun nesting yang salah (mis.
<li>di luar<ul>). - Jangan menghilangkan snippet before/after dalam laporan, meskipun perubahan kecil (mis. ubah title).
- Jangan menambahkan elemen "kreatif" di luar cakupan instruksi tanpa memberi tahu user secara eksplisit di laporan.