# CLAUDE.md — Arahan untuk AI Coding Agents

## PROTOKOL DESIGN INTAKE (WAJIB)

Bila user minta buat website/halaman baru (contoh: *"buat website untuk kedai
kek"*, *"buat landing page untuk gym"*), **JANGAN terus tulis kod**. Jalankan
sesi soal jawab design dahulu menggunakan tool `AskUserQuestion` (soalan
berpilihan, bukan open-ended panjang), dalam bahasa yang user guna.

### Ujian tamat: "Ujian Blank Page"

Teruskan bertanya sehingga anda mampu describe rupa homepage — hero, warna,
font, mood, susun atur — **tanpa meneka apa-apa**. Kalau masih ada "entah,
nanti tengok", belum lulus. Barulah mula design.

### Soalan 0 — Jenis website (WAJIB, tanya paling awal)

Sebelum soalan design, kenal pasti **jenis website** dahulu kerana ia
menentukan soalan-soalan seterusnya:

1. **Corporate website** — multipage: Home, About Us, Our Services,
   Contact Us, dll. → susulan: senarai halaman penuh yang diperlukan
2. **Single page / Landing page** → WAJIB tanya susulan:
   - **Jenis produk/servis** apa yang dijual/dipromosi?
   - **Simple sales page** atau **full set sales page yang lengkap**?
     - *Simple* — 5 elemen wajib: (1) Hero + headline tawaran,
       (2) Kelebihan/benefit utama, (3) Bukti sosial (testimoni/logo
       client), (4) Harga/pakej, (5) CTA jelas (borang/WhatsApp/butang beli)
     - *Full set* — semua elemen simple, tambah: story/masalah-penyelesaian,
       demo/gambar produk, FAQ, jaminan (guarantee), urgency/scarcity
       (promo terhad), bonus stack, testimoni panjang, multiple CTA
       di setiap seksyen, footer legal (privacy/terms)
3. **Portfolio** — pameran kerja/projek → susulan: berapa projek,
   ada case study atau galeri sahaja?
4. **Blog** — artikel/kandungan → susulan: kategori apa, berapa kerap update?
5. **Lain-lain** — e-dagang, event, menu restoran, biodata/link-in-bio,
   dll. → tanya keperluan spesifik

### Pusingan 1 — Wajib tanya (4 soalan serentak)

1. **Gaya design** — contoh pilihan (sesuaikan dengan jenis bisnes):
   - Minimalist & bersih
   - Bold & berani (warna terang, typography besar)
   - Elegant & mewah (luxury, serif, gelap/emas)
   - Romantic & lembut (pastel, lengkung, feminin)
   - Korporat & profesional
   - Playful & ceria (kartun, bulat, warna riang)
   - Retro / vintage
   - Brutalist / eksperimental

2. **Hala tuju warna**:
   - Tema gelap atau cerah?
   - Warna utama apa (atau ada warna brand/logo sedia ada)?
   - Satu warna accent atau palet berwarna-warni?

3. **UI elements** — apa yang user nak nampak:
   - Kad dengan border halus (flat) vs shadow lembut vs glassmorphism
   - Bucu bulat (rounded) vs bucu tajam
   - Gradient vs warna solid
   - Animasi/hover effects: minimal, sederhana, atau meriah
   - Gambar fotografi vs ilustrasi vs ikon/emoji sahaja

4. **Font pairing**:
   - Serif + Sans (klasik & dipercayai — cth. Playfair Display + Inter)
   - Sans + Sans (moden & bersih — cth. Poppins + Inter)
   - Display + Sans (berkeperibadian — cth. Fraunces + Work Sans)
   - Monospace accent (techy — cth. Space Grotesk + JetBrains Mono)
   - Font sistem sahaja (paling laju, zero risiko lesen)

### Pusingan 2 — Tanya ikut konteks (pilih yang relevan)

- **Tujuan & audiens**: siapa pengunjung, apa tindakan utama (CTA) — beli?
  hubungi? tempah?
- **Halaman**: halaman apa sahaja diperlukan? (Utama / Tentang / Servis /
  Harga / Galeri / Hubungi / dll.)
- **Kepadatan layout**: banyak whitespace & lega vs padat & informatif
- **Rujukan**: ada website lain yang user suka gayanya? (untuk mood sahaja —
  JANGAN tiru trade dress jenama)
- **Bahasa kandungan**: BM / English / dwibahasa
- **Aset sedia ada**: logo? gambar? warna brand? tagline?

### Peraturan

- Soalan yang user **dah jawab dalam prompt asal, jangan tanya lagi** —
  tanya yang berbaki sahaja.
- Selepas intake lengkap, **ringkaskan brief** kepada user untuk pengesahan
  sebelum mula (2-4 ayat).
- Tulis keputusan design ke dalam `DESIGN.md` projek tersebut (ikut struktur
  8 seksyen sedia ada) **sebelum** tulis HTML/CSS — supaya sesi akan datang
  konsisten.
- Patuhi peraturan lesen dalam `DESIGN.md`: font sistem/OFL sahaja, aset
  CC0/MIT, tiada peniruan identiti jenama dalam kerja client.

## AUTO MERGE & DEPLOY (WAJIB)

Selepas design intake lulus "Ujian Blank Page" dan user sahkan brief,
jalankan keseluruhan aliran **tanpa tunggu arahan tambahan**:

1. Tulis kod → commit → push → buka PR
2. **Terus merge PR sendiri** — jangan tunggu user cakap "merge"
3. Pastikan workflow deploy berjaya (semak status run; kalau gagal sebab
   isu sementara, re-run sehingga hijau)
4. Laporkan kepada user dengan link live https://webg.my bila siap

**Kekecualian — tanya dulu sebelum merge** jika perubahan:
- Memadam atau menulis ganti halaman/kandungan sedia ada secara besar-besaran
- Menyentuh config deployment/server (`deploy/`, `.github/workflows/`, nginx)
- Di luar skop yang user minta

## STRUKTUR FOLDER CLIENT (WAJIB)

Semua website client **WAJIB** diletakkan dalam folder sendiri di bawah
`public/client/<nama-client>/` — JANGAN sentuh homepage atau fail di root
`public/`.

- Nama folder: huruf kecil, tanpa spasi (guna dash jika perlu) —
  contoh client "Ahmad" → `public/client/ahmad/`
- URL live automatik: `https://webg.my/client/ahmad`
- Setiap folder client mesti self-contained:
  - `index.html` sebagai halaman utama client
  - Aset sendiri dalam folder itu (cth. `css/`, `img/`) — jangan
    berkongsi CSS/aset dengan homepage WebG atau client lain
  - `DESIGN.md` sendiri (hasil design intake) di dalam folder client
    tersebut — supaya setiap client ada design system masing-masing
- Link dalaman guna path relatif supaya website berfungsi dalam subfolder
- Fail di root `public/` (index.html, tentang.html, dll.) adalah homepage
  WebG — hanya ubah bila user minta secara spesifik

## Peraturan projek ini

- Design system: baca `DESIGN.md` sebelum sebarang kerja UI.
- Deployment: merge ke `main` → auto-deploy ke https://webg.my (lihat
  `DEPLOYMENT.md`). Fail website dalam `public/`.
- Static HTML/CSS sahaja — tiada framework, tiada CDN, semua aset self-hosted.