Skill This
AI Skill Report Card

Coding HTML5

C+62·Sep 3, 2026·Source: Web
Quick Start12 / 15

Berikan instruksi natural language, contoh: "buat form login HTML5 dengan username dan password". Skill akan:

  1. Generate kode HTML5 semantik
  2. Validasi terhadap standar W3C (harus 0 error/warning)
  3. Kembalikan file + laporan before/after

Jika ada file HTML existing, unggah dulu — skill akan memodifikasi in-place, bukan menulis ulang dari nol.

Recommendation▾
Description is well-formed but written in Indonesian while grading/best-practice conventions expect clear third-person phrasing without ambiguity — verify it reads naturally as 'Writes, modifies, and validates...' without implied second person elsewhere in the doc (e.g., 'Berikan instruksi' in Quick Start addresses the user directly, which is inconsistent with the skill being Claude-facing).
Workflow12 / 15
Progress:
- [ ] 1. Parse instruksi → identifikasi elemen/atribut HTML5 target
- [ ] 2. Pre-check file input (doctype, struktur dasar) jika ada
- [ ] 3. Generate/modifikasi kode HTML5
- [ ] 4. Validasi (MUST 0 error/warning) — jika gagal, kembali ke step 3
- [ ] 5. Susun laporan (before/after snippet, asumsi, log)
- [ ] 6. Deliver hasil (hanya jika validasi sukses)

Detail tiap step:

  1. Parse instruksi — Ekstrak intent (tambah/ubah/hapus), target elemen, dan konten/atribut yang diminta. Jika ambigu (misal "tambahkan navbar" tanpa detail link), buat asumsi wajar dan catat di laporan.

  2. Pre-check — Jika ada file input: cek <!DOCTYPE html>, struktur <html><head><body>. Jika tidak lengkap, perbaiki struktur dasar sebelum lanjut.

  3. Generate kode — Gunakan elemen semantik yang tepat (lihat Best Practices). Jangan hapus/ubah elemen di luar scope instruksi.

  4. Validasi — Cek terhadap aturan HTML5 W3C: nesting tag valid, atribut required ada (alt, type, name, dll), tidak ada tag tak tertutup. Jika ada error/warning, perbaiki dan validasi ulang sampai bersih.

  5. Laporan — Wajib berisi: snippet before/after, daftar asumsi (jika ada), status validasi.

  6. Delivery — Kirim patched_output.zip (file HTML + originals + report + logs), patch_report.txt, metadata.json. Jika validasi gagal setelah beberapa iterasi, laporkan kegagalan — jangan kirim hasil tidak valid.

Recommendation▾
The delivery step mentions concrete file outputs (patched_output.zip, patch_report.txt, metadata.json) but never explains how these are generated or what tools/scripts create them — this is a completeness gap since it references infrastructure not defined in the skill.
Examples13 / 20

Example 1: Input: "buat form login HTML5 dengan username dan password" Output:

HTML
<form>
  <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>

Laporan: elemen <label> ditambahkan untuk aksesibilitas meski tidak diminta eksplisit (asumsi wajar, dicatat).

Example 2: Input: "ubah title halaman jadi 'Dashboard'" Before: <title>My Page</title> After: <title>Dashboard</title>

Example 3: Input: "tambahkan navbar dengan link Home, About, Contact" Output:

HTML
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
Recommendation▾
Examples are decent but shallow — none show a validation failure/fix cycle (step 4's core value prop) or a realistic 'before' HTML file being modified in-place; add an example demonstrating the error-detection-and-correction loop.
Best Practices
  • Gunakan elemen semantik: <header>, <nav>, <main>, <section>, <article>, <footer> — bukan <div> generik jika ada elemen semantik yang cocok.
  • Semua <img> MUST punya atribut alt.
  • Navigasi selalu dalam struktur <nav><ul><li>.
  • Form input selalu punya <label> terkait (via for/id) untuk aksesibilitas.
  • Gunakan atribut type yang spesifik pada <input> (email, password, tel, dst) bukan default text jika konteksnya jelas.
  • Indentasi konsisten (2 spasi) untuk keterbacaan, kecuali preferred_style diset minimal.
  • Preservasi urutan dan gaya kode existing saat memodifikasi file, jangan reformat keseluruhan file tanpa diminta.
Common Pitfalls
  • Jangan hapus atribut/elemen yang tidak disebutkan dalam instruksi — hanya ubah yang diminta.
  • Jangan kirim hasil jika validator masih menunjukkan error/warning — perbaiki dulu.
  • Jangan gunakan tag deprecated (<center>, <font>, <marquee>).
  • Jangan lupa dokumentasikan asumsi ketika instruksi ambigu (misal jumlah link navbar, isi placeholder).
  • Jangan buat nested interactive elements (misal <button> di dalam <a>) — invalid di HTML5.
  • Jangan lewatkan <!DOCTYPE html> atau atribut lang pada <html>.
0
Grade C+AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
12/15
Workflow
12/15
Examples
13/20
Completeness
14/20
Format
11/15
Conciseness
12/15
Save to My Skills