Cara Membuat Skill OpenCode Interaktif: Kondisikan AI Wawancara Anda Sebelum Menulis Kode

{
  "providers": {
    "custom_proxy": {
      "api_base": "https://tokenharbor.com", 
      "api_key": "TEMPEL_API_KEY_PROXY_ANDA_DISINI",
      "models": [
        {
          "id": "deepseek-v4.1-flash",
          "name": "DeepSeek V4.1 Flash",
          "context_length": 128000
        }
      ]
    }
  }
}

/effort max

mkdir -p .opencode/skills/web-app-builder
cd .opencode/skills/web-app-builder
touch SKILL.md

# Skill: Web App Components Builder

## Deskripsi
Skill ini digunakan untuk membuat komponen UI, halaman baru, API routes, dan mengintegrasikan state management pada aplikasi web sesuai dengan standar arsitektur proyek.

## Triggers
- "buat komponen UI "
- "buat halaman baru "
- "buat api route "
- "tambahkan integrasi state "

## Tech Stack Proyek
- **Framework:** Next.js 15 (App Router)
- **Bahasa:** TypeScript
- **Styling:** Tailwind CSS + Shadcn UI
- **State Management:** Zustand
- **Database / ORM:** Prisma + PostgreSQL

## Aturan Pengodean (Coding Standards)
1. **Komponen UI:** 
   - Harus berupa Client Component (`"use client"`) hanya jika menggunakan hook seperti `useState` atau `useEffect`. Jika tidak, gunakan Server Component secara default.
   - Gunakan TypeScript *interface* untuk mendefinisikan Props secara eksplisit.
   - Semua komponen baru harus disimpan di direktori `@/components/ui/` atau `@/components/shared/`.

2. **Styling & Estetika:**
   - Gunakan utility classes dari Tailwind CSS. Jangan gunakan inline-style CSS bawaan HTML.
   - Pastikan desain responsif (minimal mendukung breakpoint `md:` untuk tablet dan `lg:` untuk desktop).

3. **API Routes:**
   - Semua rute API harus diletakkan di dalam folder `app/api/`.
   - Wajib menyertakan *error handling* dengan blok `try-catch` dan mengembalikan respons berformat JSON yang konsisten: `{ success: boolean, data?: any, error?: string }`.

## Langkah Kerja AI (Execution Pipeline)
1. **Analisis Konteks:** Periksa apakah file target yang diminta pengguna sudah ada atau belum.
2. **Konfirmasi Struktur:** Berikan draf rancangan struktur kode kepada pengguna di terminal sebelum menulis ke file asli.
3. **Generasi Kode:** Tulis kode yang bersih, tanpa komentar penjelasan yang terlalu panjang di dalam file, dan patuhi semua "Aturan Pengodean" di atas.
4. **Validasi Impor:** Pastikan semua *path* impor komponen (`@/...`) valid dan sesuai dengan konfigurasi `tsconfig.json`.

mkdir -p .opencode/skills/interactive-web-scaffolder
cd .opencode/skills/interactive-web-scaffolder
touch SKILL.md

# Skill: Interactive Web Application Architect

## Deskripsi
Skill ini memaksa AI untuk bertindak sebagai Arsitek Perangkat Lunak interaktif. AI DILARANG KERAS langsung menulis kode sebelum menyelesaikan sesi tanya jawab untuk mengumpulkan detail spesifikasi aplikasi web dari pengguna.

## Triggers
- "bangun web app baru"
- "buatkan boilerplate proyek aplikasi web"
- "inisialisasi aplikasi web kustom"

## Kriteria Wawancara (Kuesioner Wajib AI)
Sebelum membuat file atau menulis kode apa pun, AI harus menanyakan poin-poin berikut satu per satu (atau dikelompokkan secara rapi) kepada pengguna:

1. **Tech Stack Preferensi:** Apakah ingin menggunakan Next.js, React SPA (Vite), Vue, atau Vanilla JS? Apakah menggunakan TypeScript atau JavaScript?
2. **Library UI & Styling:** Apakah ingin menggunakan Tailwind CSS, Bootstrap, Shadcn/UI, atau CSS murni?
3. **Kebutuhan Responsivitas:** Bagaimana detail layout untuk Mobile vs Desktop? (Misalnya: Apakah menu mobile menggunakan hamburger-drawer, sedangkan desktop menggunakan sidebar tetap?).
4. **Peruntukan & Fitur Utama:** Apa tujuan aplikasi ini? (E-commerce, Dashboard Admin, Landing Page, SaaS?). Apa saja fitur utama yang harus ada di halaman pertama?
5. **State Management & Data:** Apakah aplikasi ini membutuhkan integrasi API/Database (seperti Prisma/Supabase) atau cukup dengan static mockup data terlebih dahulu?

## Aturan Pengodean (Coding Standards)
- **Mobile-First Approach:** Semua komponen UI wajib menggunakan kelas utilitas responsif (misal di Tailwind: menggunakan `block md:flex` atau `w-full md:w-1/3`).
- **Clean Architecture:** Pisahkan antara logika komponen, tipe data TypeScript, dan aset visual.
- **Aksesibilitas (a11y):** Gunakan tag semantik HTML5 (`

opencode bangun web app baru

mkdir -p .opencode/skills/interactive-web-scaffolder
cd .opencode/skills/interactive-web-scaffolder
touch SKILL.md

# Skill: Interactive Web Application Architect

## Deskripsi
Skill ini memaksa AI untuk bertindak sebagai Arsitek Perangkat Lunak interaktif. AI DILARANG KERAS langsung menulis kode sebelum menyelesaikan sesi tanya jawab untuk mengumpulkan detail spesifikasi aplikasi web dari pengguna.

## Triggers
- "bangun web app baru"
- "buatkan boilerplate proyek aplikasi web"
- "inisialisasi aplikasi web kustom"

## Kriteria Wawancara (Kuesioner Wajib AI)
Sebelum membuat file atau menulis kode apa pun, AI harus menanyakan poin-poin berikut satu per satu (atau dikelompokkan secara rapi) kepada pengguna:

1. **Tech Stack Preferensi:** Apakah ingin menggunakan Next.js, React SPA (Vite), Vue, atau Vanilla JS? Apakah menggunakan TypeScript atau JavaScript?
2. **Library UI & Styling:** Apakah ingin menggunakan Tailwind CSS, Bootstrap, Shadcn/UI, atau CSS murni?
3. **Kebutuhan Responsivitas:** Bagaimana detail layout untuk Mobile vs Desktop? (Misalnya: Apakah menu mobile menggunakan hamburger-drawer, sedangkan desktop menggunakan sidebar tetap?).
4. **Peruntukan & Fitur Utama:** Apa tujuan aplikasi ini? (E-commerce, Dashboard Admin, Landing Page, SaaS?). Apa saja fitur utama yang harus ada di halaman pertama?
5. **State Management & Data:** Apakah aplikasi ini membutuhkan integrasi API/Database (seperti Prisma/Supabase) atau cukup dengan static mockup data terlebih dahulu?

## Aturan Pengodean (Coding Standards)
- **Mobile-First Approach:** Semua komponen UI wajib menggunakan kelas utilitas responsif (misal di Tailwind: menggunakan `block md:flex` atau `w-full md:w-1/3`).
- **Clean Architecture:** Pisahkan antara logika komponen, tipe data TypeScript, dan aset visual.
- **Aksesibilitas (a11y):** Gunakan tag semantik HTML5 (`

/reload

opencode bangun web app baru