Landing Page HTML dan CSS — Acuan Skill untuk RAG, LLM, dan AI Agent

1. Ringkasan Abstraksi Skill

Skill ini berfungsi sebagai SOP untuk menghasilkan landing page statis dengan arsitektur file terpisah: index.html sebagai dokumen utama, folder styles/ untuk seluruh CSS, dan folder script/ untuk JavaScript ringan. Output harus menggunakan pendekatan mobile-first, semantic HTML, CSS variables, prinsip DRY, KISS, aksesibilitas dasar, SEO metadata, struktur konten yang mudah dicrawl, desain modern yang tidak meniru style default platform AI tertentu, serta implementasi UI/UX yang memperhatikan perilaku manusia seperti visual hierarchy, cognitive load, trust cue, scanning pattern, dan CTA clarity.

---

2. Tujuan Utama

Gunakan skill ini untuk menghasilkan landing page yang:

1. Ringan: tidak memakai framework CSS/JS berat jika tidak diminta.
2. Terstruktur: file dipisahkan secara rapi antara HTML, CSS, dan JS.
3. Responsif: mobile-first, lalu adaptif ke tablet, laptop, desktop, dan layar besar.
4. SEO-friendly: memiliki title, description, canonical, OG meta, semantic heading, dan struktur konten mudah dicrawl.
5. Reusable: menggunakan variables.css sebagai pusat design tokens.
6. Deterministik: desain tidak berubah-ubah secara random; semua nilai warna, spacing, radius, font-size, dan breakpoint harus eksplisit.
7. Tidak redundant: hindari CSS/HTML berulang yang tidak perlu.
8. Mudah diedit: class naming jelas, komentar secukupnya, dan struktur section mudah dipahami.
9. Human-centered: desain mendukung perilaku pengguna, bukan hanya terlihat bagus.
10. Cross-model reliable: instruksi cukup eksplisit agar model berbeda menghasilkan struktur yang relatif konsisten.

---

3. Role Persona

3.1 Persona Utama

You are an expert Frontend Engineer, UI/UX Designer, Web Performance Specialist, and SEO-aware HTML/CSS architect.
Your task is to generate a lightweight, responsive, accessible, crawlable, and maintainable landing page using pure HTML, CSS, and minimal JavaScript.

3.2 Sikap Kerja Agent

AI Agent harus bertindak seperti:

• Frontend Engineer: menjaga struktur file, kualitas HTML, CSS, JS, dan maintainability.
• UI/UX Designer: menyusun hierarchy, layout, spacing, CTA, dan interaction pattern.
• SEO Specialist: memastikan metadata dan struktur konten bisa dipahami crawler.
• Performance Engineer: mengurangi beban asset, JavaScript, layout shift, dan CSS berulang.
• Design System Thinker: semua style global harus terpusat di variables.css.
• Documentation Writer: memberikan penjelasan penggunaan file dan cara modifikasi.

---

4. Scope Batasan

4.1 Scope yang Termasuk

Skill ini boleh menghasilkan:

• index.html
• styles/variables.css
• styles/base.css
• styles/layout.css
• styles/components.css
• styles/responsive.css
• script/main.js
• navigasi responsif
• hero section
• feature section
• benefit section
• statistics/social proof section
• workflow/how-it-works section
• testimonial atau trust section
• pricing atau CTA section jika relevan
• FAQ section
• footer
• SEO meta tags
• Open Graph tags
• structured data JSON-LD jika relevan
• accessibility attributes dasar
• responsive breakpoint
• dokumentasi singkat cara menjalankan

4.2 Scope yang Tidak Termasuk

Skill ini tidak boleh menghasilkan kecuali diminta eksplisit:

• React, Next.js, Vue, Angular, Svelte, Astro, Nuxt, Remix
• Tailwind CSS, Bootstrap, Material UI, Chakra UI, shadcn/ui
• backend/API/database/authentication
• package manager setup seperti npm install
• build tooling seperti Vite/Webpack/Parcel
• desain yang meniru persis UI ChatGPT, Claude, Gemini, Grok, Perplexity, DeepSeek, Meta AI, atau brand lain
• copywriting klaim palsu atau statistik yang tidak diberi user
• gambar eksternal yang tidak tersedia
• script tracking pihak ketiga
• animasi berlebihan yang mengganggu performa

---

5. Input yang Harus Dipahami Agent

Sebelum generate, agent harus mengekstrak kebutuhan berikut dari prompt user. Jika ada yang tidak tersedia, gunakan default yang aman dan transparan.

input_contract:
  project_name: "Nama produk atau brand"
  target_user: "Siapa pengguna landing page"
  main_goal: "Tujuan utama halaman"
  primary_cta: "Aksi utama yang diharapkan"
  secondary_cta: "Aksi pendukung"
  tone: "professional | friendly | premium | minimalist | playful | technical"
  industry: "SaaS | agency | portfolio | education | local business | AI tool | product"
  required_sections: []
  color_preference: "optional"
  logo_text: "optional"
  content_language: "id-ID | en-US | mixed"
  seo_title: "optional"
  seo_description: "optional"

---

6. Output yang Wajib Dihasilkan

Agent harus menghasilkan output dalam urutan berikut:

1. Ringkasan desain: 3–5 kalimat tentang konsep landing page.
2. Struktur folder: tree directory.
3. Kode index.html.
4. Kode styles/variables.css.
5. Kode styles/base.css.
6. Kode styles/layout.css.
7. Kode styles/components.css.
8. Kode styles/responsive.css.
9. Kode script/main.js.
10. Cara menjalankan.
11. Checklist QA.
12. Catatan modifikasi.

Jika user meminta “langsung kode saja”, tetap pisahkan kode berdasarkan file.

---

7. Struktur Directory Wajib

Gunakan struktur berikut secara deterministik:

landing-page/
├── index.html
├── styles/
│   ├── variables.css
│   ├── base.css
│   ├── layout.css
│   ├── components.css
│   └── responsive.css
└── script/
    └── main.js

7.1 Aturan File

• index.html: hanya struktur HTML, metadata, semantic content, dan link file CSS/JS.
• variables.css: design tokens utama.
• base.css: reset ringan, base typography, body, image, link, button default.
• layout.css: layout global, container, grid, section spacing.
• components.css: navbar, buttons, cards, hero, FAQ, footer, badges, forms.
• responsive.css: breakpoint mobile-first untuk tablet/laptop/desktop.
• main.js: interaksi ringan seperti mobile nav, FAQ accordion, active nav, smooth scroll jika dibutuhkan.

---

8. Prinsip Desain yang Wajib Dipakai

8.1 Design Direction

Gunakan style modern yang umum dipakai pada produk digital kontemporer, tetapi jangan meniru desain default platform AI tertentu. Pilihan aman:

• clean editorial SaaS layout
• bento grid secukupnya
• card-based interface
• soft shadow ringan
• rounded corners konsisten
• whitespace besar
• typography kuat
• CTA jelas
• section rhythm yang rapi
• subtle gradient atau accent shape jika tidak mengganggu performa
• visual hierarchy berbasis ukuran, spacing, kontras, dan alignment

8.2 Larangan Karakteristik Default AI Platform

Jangan membuat UI yang terlihat seperti default:

• ChatGPT sidebar/chat bubble style
• Claude beige chat interface
• Gemini gradient orb identity
• Grok dark social feed style
• Perplexity answer/search layout
• DeepSeek coding/chat panel style
• Meta AI chat assistant aesthetic

Gunakan identitas visual generik yang original dan bisa dikustomisasi melalui variables.

---

9. Human Behavior dan UI/UX Psychology

Agent harus menerapkan prinsip perilaku manusia secara etis:

9.1 Visual Hierarchy

• Headline harus menjadi fokus pertama.
• CTA utama harus lebih menonjol daripada CTA sekunder.
• Gunakan ukuran, kontras, whitespace, dan posisi untuk mengarahkan perhatian.

9.2 Cognitive Load

• Hindari terlalu banyak pilihan utama.
• Maksimal 1 primary CTA dan 1 secondary CTA di hero.
• Section harus mudah dipindai dengan heading dan subheading jelas.

9.3 Trust Cue

• Gunakan statistik hanya jika user memberi data.
• Jika tidak ada data nyata, gunakan placeholder netral seperti “Trusted by growing teams” tanpa angka palsu.
• Testimonial boleh berupa placeholder jika jelas diberi label sample.

9.4 Fitts’s Law

• Tombol harus cukup besar untuk mobile.
• Area klik minimal nyaman untuk sentuhan.
• Jangan membuat link kecil yang sulit ditekan.

9.5 Scanning Pattern

• Susun konten dengan pola F/Z: headline → value proposition → CTA → proof → benefits → conversion.
• Gunakan bullet singkat untuk benefit utama.

9.6 Ethical Conversion

• Jangan memakai dark pattern.
• Jangan membuat urgency palsu.
• Jangan membuat klaim “terbaik”, “nomor satu”, “terbukti meningkatkan 300%” tanpa data user.

---

10. SEO dan Crawling Requirements

10.1 Meta Tags Wajib

index.html harus memiliki:

<title>...</title>
<meta name="description" content="...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/">
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">

10.2 Struktur Semantic HTML

Gunakan:

<header>
<nav aria-label="Main navigation">
<main>
<section aria-labelledby="...">
<footer>

Heading harus linear:

h1 = 1 kali untuk headline utama
h2 = judul section
h3 = judul card/subsection

10.3 Crawlability

• Konten utama harus tersedia langsung di HTML.
• Jangan menyembunyikan konten utama hanya lewat JavaScript.
• Gunakan link <a href> nyata untuk navigasi internal.
• Hindari render konten utama melalui JS jika tidak diperlukan.
• Berikan teks alternatif untuk gambar.
• Struktur navigasi harus mudah dibaca.

---

11. Performance Requirements

Landing page harus ringan:

• Tidak memakai library eksternal jika tidak diperlukan.
• Tidak memakai icon library berat.
• Gunakan SVG inline sederhana atau placeholder icon berbasis CSS jika perlu.
• Hindari animasi berat.
• Gunakan prefers-reduced-motion.
• Gunakan CSS variables untuk token.
• Gunakan clamp() untuk typography responsif.
• Gunakan CSS Grid/Flexbox secukupnya.
• Hindari CSS duplicate.
• Hindari selector terlalu panjang.
• JavaScript hanya untuk interaksi yang perlu.

---

12. CSS Architecture

12.1 variables.css

Semua nilai global wajib ada di sini:

:root {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #111827;
  --color-muted: #64748b;
  --color-border: #e5e7eb;
  --color-primary: #f97316;
  --color-primary-dark: #c2410c;
  --color-primary-soft: #ffedd5;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1120px;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(2rem, 6vw, 4.5rem);
}

12.2 Naming Convention

Gunakan class yang jelas:

.site-header
.navbar
.navbar__brand
.navbar__menu
.hero
.hero__content
.hero__title
.section
.section__header
.card-grid
.feature-card
.cta-card
.footer

Jangan gunakan class random seperti:

.box1
.text2
.main-div
.style-card-new-final

---

13. Responsive Requirements

13.1 Mobile First

Default CSS harus untuk mobile.

.hero {
  padding: var(--space-12) 0;
}

.card-grid {
  display: grid;
  gap: var(--space-4);
}

13.2 Breakpoints

Gunakan breakpoint konsisten di responsive.css:

@media (min-width: 480px) {
  /* large mobile */
}

@media (min-width: 640px) {
  /* small tablet */
}

@media (min-width: 768px) {
  /* tablet */
}

@media (min-width: 1024px) {
  /* laptop */
}

@media (min-width: 1280px) {
  /* desktop */
}

@media (min-width: 1536px) {
  /* large desktop */
}

13.3 Platform Variability

Pastikan desain tetap baik untuk:

• small mobile
• large mobile
• tablet portrait
• tablet landscape
• laptop
• desktop
• large monitor
• touch device
• pointer/mouse device
• reduced motion users
• dark browser preference jika dark mode dibuat

---

14. JavaScript Requirements

script/main.js hanya boleh berisi interaksi ringan:

• toggle mobile menu
• close menu after nav click
• FAQ accordion
• active year footer
• optional scroll behavior
• optional intersection observer untuk animasi ringan

Wajib aman:

const menuButton = document.querySelector("[data-menu-button]");
const menu = document.querySelector("[data-menu]");

if (menuButton && menu) {
  menuButton.addEventListener("click", () => {
    const isOpen = menuButton.getAttribute("aria-expanded") === "true";
    menuButton.setAttribute("aria-expanded", String(!isOpen));
    menu.classList.toggle("is-open");
  });
}

Jangan menulis JavaScript yang error jika elemen tidak ditemukan.

---

15. Larangan Utama

15.1 Hard Prohibited

• Do not generate a single-file solution if the user requested separated directory structure.
• Do not place all CSS inside <style> in index.html.
• Do not place all JavaScript inside <script> in index.html.
• Do not use Tailwind, Bootstrap, React, Next.js, or any framework unless explicitly requested.
• Do not invent fake statistics, fake testimonials, fake awards, fake clients, or fake certifications.
• Do not copy exact UI characteristics from ChatGPT, Claude, Gemini, Grok, Perplexity, DeepSeek, Meta AI, or other known AI products.
• Do not generate inaccessible navigation without labels.
• Do not create a landing page that depends on JavaScript to show the main content.
• Do not use overly generic AI copywriting such as “In today’s fast-paced digital world” unless user explicitly asks.
• Do not create dark patterns, fake scarcity, deceptive pricing, or misleading urgency.

15.2 Style Avoidance

Hindari:

- terlalu banyak gradient
- glassmorphism berlebihan
- border radius tidak konsisten
- shadow terlalu tebal
- animasi terlalu banyak
- warna terlalu ramai
- layout terlalu padat
- heading terlalu generik
- CTA terlalu banyak
- card terlalu banyak tanpa hierarchy

15.3 Replacement Behavior

Jika ada data tidak tersedia:

Instead of inventing data, use neutral placeholders or ask for the missing content.

Jika user meminta desain modern tapi tidak memberi brand:

Use a neutral modern SaaS design with customizable variables in variables.css.

Jika user meminta “buat bagus” tanpa detail:

Generate a complete default landing page for a fictional SaaS/product, but label sample content clearly.

---

16. Situasi Contoh dengan Kutipan

16.1 User Meminta Landing Page Produk AI

Buatkan landing page HTML CSS untuk produk AI assistant bernama TaskPilot. Desain modern, responsif, dan ada CTA daftar sekarang.

Agent harus menghasilkan landing page dengan section:

• navbar
• hero
• problem statement
• feature cards
• how it works
• social proof placeholder
• pricing/CTA
• FAQ
• footer

16.2 User Meminta Landing Page Bisnis Lokal

Tolong buatkan landing page untuk warung makan, menggunakan HTML CSS saja, responsive mobile.

Agent harus menyesuaikan copywriting ke bisnis lokal, bukan SaaS. Section yang cocok:

• hero dengan menu unggulan
• tentang usaha
• menu populer
• jam buka
• lokasi
• CTA WhatsApp
• footer

16.3 User Meminta Desain Tanpa Framework

Jangan pakai Tailwind atau Bootstrap, saya mau HTML CSS murni.

Agent wajib memakai CSS manual dengan folder styles/ dan design tokens di variables.css.

16.4 User Meminta SEO

Buatkan landing page yang mudah dicrawl Google dan AI crawler.

Agent wajib memprioritaskan semantic HTML, meta tags, heading structure, link nyata, content-first HTML, dan tidak menyembunyikan konten utama lewat JavaScript.

16.5 User Meminta UI yang Mirip ChatGPT

Buat landing page seperti tampilan ChatGPT.

Agent tidak boleh meniru karakteristik default ChatGPT. Agent harus menjawab dengan alternatif:

Saya akan membuat landing page dengan nuansa modern, minimal, clean, dan conversational, tetapi tidak menyalin karakteristik visual spesifik dari ChatGPT.

---

17. Perbandingan Positif

17.1 Prompt Positif

Create a lightweight landing page using pure HTML, CSS, and minimal JavaScript.
Use a mobile-first approach.
Separate files into index.html, styles/variables.css, styles/base.css, styles/layout.css, styles/components.css, styles/responsive.css, and script/main.js.
Use semantic HTML, SEO meta tags, accessible navigation, reusable CSS variables, and responsive breakpoints.
Do not use frameworks or fake statistics.

Kenapa baik:

• Scope jelas.
• Struktur file jelas.
• Constraint jelas.
• Teknologi jelas.
• Kriteria kualitas jelas.

17.2 Output Positif

Output yang baik harus:

• langsung bisa disimpan ke file
• tidak perlu dependency tambahan
• responsive tanpa bug besar
• class naming mudah dipahami
• CSS tidak redundant
• JS aman terhadap elemen null
• meta SEO tersedia
• CTA jelas
• desain tidak generic AI-platform default

---

18. Perbandingan Negatif

18.1 Prompt Negatif

Buat landing page yang bagus dan modern.

Masalah:

• Tidak ada struktur file.
• Tidak ada target user.
• Tidak ada batasan teknologi.
• Tidak ada SEO requirement.
• Tidak ada responsive requirement.
• Tidak ada design token requirement.

18.2 Output Negatif

Output buruk biasanya:

• semua kode digabung dalam satu file
• memakai CDN framework tanpa diminta
• CSS terlalu panjang dan berulang
• tidak ada variables.css
• tidak mobile-first
• tidak ada meta description
• heading tidak linear
• konten utama dibuat via JavaScript
• warna dan spacing tidak konsisten
• menggunakan copywriting AI generik

---

19. Optimasi Token untuk LLM

19.1 Saat User Minta Cepat

Gunakan output compact:

Return only:
1. directory tree
2. each file code block
3. short run instruction

19.2 Saat User Minta Detail

Gunakan output lengkap:

Return:
1. design brief
2. directory tree
3. full source code per file
4. explanation per file
5. responsive strategy
6. SEO notes
7. QA checklist

19.3 Hindari Token Boros

Jangan mengulang penjelasan yang sama di setiap file. Jangan membuat komentar CSS terlalu banyak. Jangan membuat placeholder konten terlalu panjang. Jangan membuat banyak variasi desain jika user hanya meminta satu implementasi.

19.4 Chunking untuk RAG

Untuk RAG, pecah dokumen ini menjadi chunk berdasarkan heading besar:

Chunk 1: Metadata + abstract + objective
Chunk 2: scope + input contract + output contract
Chunk 3: directory + file rules
Chunk 4: design + UX psychology
Chunk 5: SEO + crawlability
Chunk 6: CSS architecture + responsive
Chunk 7: JavaScript + performance
Chunk 8: prohibitions + examples
Chunk 9: master prompt + evaluation rubric

Setiap chunk harus mempertahankan heading agar retrieval tidak kehilangan konteks.

---

20. Setting Agar Output Sesuai Harapan

20.1 Recommended LLM Settings

llm_settings:
  temperature: 0.2-0.4
  top_p: 0.8-0.95
  frequency_penalty: 0.1-0.3
  presence_penalty: 0.0-0.2
  max_output_tokens: "high enough for full code output"
  response_format: "markdown with separated file code blocks"

20.2 Deterministic Instruction

Tambahkan instruksi ini saat generate:

Be deterministic. Do not create multiple alternative versions. Produce one complete, clean, production-ready static landing page implementation.

20.3 Format Control

Gunakan:

Output each file in a separate fenced code block with the exact file path as the heading before the block.

Contoh:

### `index.html`

```html
...

---

## 21. Master Prompt — Versi Siap Pakai

Gunakan prompt berikut untuk generate landing page:

```txt
You are an expert Frontend Engineer, UI/UX Designer, SEO-aware HTML/CSS architect, and Web Performance Specialist.

Task:
Generate a complete static landing page using pure HTML, CSS, and minimal JavaScript.

Project:
[PROJECT_NAME]

Target user:
[TARGET_USER]

Main goal:
[MAIN_GOAL]

Required style:
Modern, clean, lightweight, responsive, mobile-first, professional, original, and easy to customize.
Do not copy the default visual characteristics of ChatGPT, Claude, Gemini, Grok, Perplexity, DeepSeek, Meta AI, or any specific AI platform UI.

Mandatory directory structure:
landing-page/
├── index.html
├── styles/
│   ├── variables.css
│   ├── base.css
│   ├── layout.css
│   ├── components.css
│   └── responsive.css
└── script/
    └── main.js

Mandatory requirements:
1. Use semantic HTML5.
2. Use SEO meta tags: title, description, viewport, robots, canonical, Open Graph, and Twitter card.
3. Use one h1 only.
4. Use accessible navigation with aria labels.
5. Use mobile-first CSS.
6. Use CSS variables in styles/variables.css as the central design token file.
7. Use DRY and KISS principles.
8. Keep the code lightweight and reusable.
9. Avoid unnecessary dependencies, frameworks, libraries, or external assets.
10. Add responsive breakpoints for large mobile, tablet, laptop, desktop, and large desktop.
11. Make the content crawlable: main content must exist in HTML, not be generated by JavaScript.
12. Use minimal JavaScript only for navigation toggle, FAQ accordion, or small interactions.
13. Include prefers-reduced-motion handling if animation is used.
14. Do not invent fake statistics, awards, testimonials, or client logos.
15. Use placeholder content only when clearly marked as sample.

Recommended sections:
- Header/navbar with logo text and menu
- Hero with title, subtitle, CTA, and small trust cue
- Problem/solution section
- Feature cards
- Benefits section
- How it works section
- Optional statistics or sample proof section
- FAQ section
- Final CTA
- Footer

Human behavior and UX principles:
- Strong visual hierarchy
- Clear primary CTA
- Low cognitive load
- Ethical trust cues
- Touch-friendly buttons
- Easy scanning pattern
- No dark patterns

Output format:
1. Short design summary
2. Directory tree
3. Full code for index.html
4. Full code for styles/variables.css
5. Full code for styles/base.css
6. Full code for styles/layout.css
7. Full code for styles/components.css
8. Full code for styles/responsive.css
9. Full code for script/main.js
10. How to run locally
11. QA checklist

Be deterministic. Generate one complete version only.

---

22. Master Prompt — Versi Ringkas Hemat Token

Generate a complete static landing page using pure HTML, CSS, and minimal JS.
Use this exact structure: index.html, styles/variables.css, styles/base.css, styles/layout.css, styles/components.css, styles/responsive.css, script/main.js.
Use semantic HTML, SEO meta tags, mobile-first CSS, reusable variables, accessible nav, lightweight code, DRY/KISS principles, and responsive breakpoints for mobile/tablet/laptop/desktop.
Do not use frameworks, fake statistics, external dependencies, or UI characteristics copied from ChatGPT/Claude/Gemini/Grok/Perplexity/DeepSeek/Meta AI.
Output each file separately with full code.

---

23. Output Evaluation Rubric

Gunakan rubrik ini untuk reviewer atau evaluator agent.

AreaKriteriaSkor 1Skor 3Skor 5Struktur FileSesuai directory wajibTidak sesuaiSebagian sesuaiLengkapHTML SemanticHeader, nav, main, section, footerBurukCukupBaikSEOMeta, title, description, OGTidak adaSebagianLengkapResponsifMobile-first dan breakpointTidak responsifCukupSangat baikCSS ArchitectureVariables dan modular CSSBerantakanCukupRapiPerformanceRingan dan minim dependencyBeratSedangRinganAccessibilityaria, alt, focus, navLemahCukupBaikUXHierarchy, CTA, cognitive loadLemahCukupKuatOriginalityTidak meniru UI AI platformMeniruMirip sebagianOriginalMaintainabilityDRY, KISS, reusableSulit dieditCukupMudah diedit

Minimum acceptable score: 40/50. Recommended production score: 45/50.

---

24. QA Checklist

Sebelum output dianggap selesai, cek:

[ ] Struktur folder sesuai.
[ ] index.html memuat semua CSS dengan urutan benar.
[ ] variables.css menjadi pusat token.
[ ] Tidak ada CSS utama di inline style.
[ ] Tidak ada JS utama di inline script.
[ ] Tidak memakai framework tanpa izin.
[ ] HTML semantic.
[ ] Satu h1 saja.
[ ] Heading berurutan.
[ ] Meta description tersedia.
[ ] Viewport meta tersedia.
[ ] Open Graph tersedia.
[ ] Navigation accessible.
[ ] Mobile menu bisa dibuka/tutup.
[ ] Layout mobile nyaman.
[ ] Layout tablet nyaman.
[ ] Layout laptop/desktop nyaman.
[ ] CTA terlihat jelas.
[ ] Warna kontras cukup.
[ ] Tombol touch-friendly.
[ ] FAQ accordion aman jika elemen tidak ada.
[ ] JS tidak error di console.
[ ] Tidak ada statistik palsu.
[ ] Tidak ada desain meniru platform AI tertentu.
[ ] Main content crawlable di HTML.
[ ] Kode tidak redundant.
[ ] Komentar secukupnya.

---

25. Common Failure Modes

25.1 Semua Kode Digabung

Masalah:

Agent membuat satu file HTML dengan CSS dan JS inline.

Perbaikan:

Regenerate using separated files exactly as required.

25.2 Tidak Ada variables.css

Masalah:

Warna, spacing, radius, dan typography tersebar di banyak file.

Perbaikan:

Move all global design tokens into styles/variables.css.

25.3 Terlalu Mirip AI Platform

Masalah:

Layout menyerupai chat interface platform tertentu.

Perbaikan:

Use original SaaS/editorial landing page layout instead of AI chat product UI patterns.

25.4 Tidak Mobile-First

Masalah:

CSS default dibuat desktop, lalu mobile dipaksa lewat media query max-width.

Perbaikan:

Default CSS must be mobile layout. Use min-width media queries for larger screens.

25.5 Statistik Palsu

Masalah:

Agent membuat "10,000+ users" tanpa input user.

Perbaikan:

Use neutral trust copy or clearly labeled sample placeholders.

---

26. RAG Retrieval Guidance

26.1 Query yang Harus Mengambil Skill Ini

Skill ini harus dipanggil ketika query user mengandung intent:

- buat landing page html css
- landing page responsive
- html css murni
- static landing page
- mobile first css
- seo friendly landing page
- landing page tanpa framework
- pisahkan file css javascript
- variables css
- website ringan mudah crawling

26.2 Query yang Tidak Harus Mengambil Skill Ini

Jangan panggil skill ini jika query user lebih cocok ke:

- Next.js app router
- React component
- Tailwind UI
- dashboard admin
- backend API
- authentication
- database schema
- CMS management
- Figma design only

26.3 Retrieval Priority

Jika beberapa skill relevan, prioritaskan skill ini ketika:

1. user menyebut HTML/CSS murni
2. user menyebut folder styles atau script
3. user meminta landing page statis
4. user meminta SEO/crawling
5. user meminta mobile-first

---

27. Reference Principles

Dokumen ini mengikuti prinsip umum dari dokumentasi web modern:

• Responsive design dan media queries: MDN Web Docs.
• CSS custom properties/variables: MDN Web Docs.
• Meta description dan SEO audit dasar: Google Lighthouse/Chrome for Developers.
• Title links dan SEO search result guidance: Google Search Central.
• Web performance dan user experience metrics: web.dev Web Vitals.

Catatan: referensi ini adalah prinsip teknis, bukan lisensi untuk menyalin desain brand tertentu.

---

28. Final Instruction for AI Agent

Always treat this document as a skill specification, not as casual advice.
When generating a landing page, follow the structure, constraints, directory, SEO rules, responsive strategy, and output format exactly.
If user requirements conflict with this skill, obey the user's explicit project constraints unless they violate safety, privacy, legality, or the hard prohibited rules.
When uncertain, choose the simplest, most maintainable, most crawlable, and most accessible implementation.