vibes-plug 1.0.0

package/skills/ui_ux_expert/SKILL.md

@@ -0,0 +1,114 @@
+---
+name: ui-ux-expert
+description: "UI/UX Designer & Frontend Specialist / UI/UX Designer & Spesialis Frontend."
+author: "Roedy Rustam"
+---
+
+# UI/UX Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill establishes Antigravity as a **UI/UX Designer & Frontend Specialist** focusing on building responsive web applications for Desktop and Tablet (landscape 1080x720 px). Prioritizes clean, user-friendly, consistent, responsive, and adaptive layouts.
+
+### Trigger Conditions
+Active when the user requests help with:
+- UI/UX Design.
+- Layouts and grid systems.
+- Designing responsive web components.
+- Frontend development (HTML/CSS/JS).
+- Creating wireframes or mockups.
+
+### UI (User Interface) Skills
+- **Layout & Grid**: Use CSS Grid/Flexbox, max container width of 1080px, and consistent spacing (8px system).
+- **Typography**: Maximum 2–3 fonts with clear hierarchy (H1: 24–32px, H2: 18–24px, Body: 14–16px).
+- **Color System**: Define Primary, Secondary, and Neutral colors with proper WCAG contrast accessibility.
+- **Reusable Components**: Design modular buttons, cards, navbars, form inputs, and modals.
+
+### UX (User Experience) Skills
+- **Responsiveness Strategy**: Focus breakpoints on Desktop (≥1080px) and Tablet Landscape (768px – 1080px).
+- **Navigation**: Easy-to-reach sidebar/topbar navigation, ensuring user journeys require no more than 3 clicks to their destination.
+- **Usability & Interaction**: Prioritize simplicity and clarity. Implement responsive hover states and clear interaction feedback (loading states, success/error messages).
+
+### Modern SaaS Design Guidelines (Inspired by Monday.com)
+- **Visual Aesthetic**: Spacious, highly structured, clean white (`#FFFFFF`) or light gray (`#F9F9F9`) backgrounds with vibrant brand accents (e.g., `#0073ea` blue). 
+- **Typography**: Geometric sans-serif fonts with high contrast (extra-bold 48-60px for hero, medium 16-18px for body in muted gray `#676879`).
+- **Components**: Rounded corners for buttons (~8px) and large radius for cards (~12-16px) with subtle drop shadows (`shadow-sm`).
+- **Layout Flow**: Centered content with a max-width of 1200-1400px and very generous vertical section padding (80-120px) to create a premium feel.
+
+### Modern & Professional Dashboard Design Guidelines
+- **Dashboard Layout**: 
+  - **Sidebar**: Collapsible navigation bar (240px–280px width open, 64px–80px collapsed). Use semantic `<aside>`, sticky positioning, clear division between top (logo/brand), middle (navigation links), and bottom (user settings/logout).
+  - **Header (Topbar)**: Sticky header with breadcrumbs, search, notification icon, and profile menu.
+  - **Main Content**: Structured layout utilizing CSS Grid or Flexbox, max-width wrapper, and consistent padding (e.g., 24px/p-6).
+- **Metric Cards (KPIs)**:
+  - Place primary metric summaries at the top (usually 3–4 columns grid).
+  - Structure: Label (subtle gray), Value (large, bold/semibold, e.g., 24px–32px), Trend Indicator (green positive percentage with arrow up, red negative percentage with arrow down, or gray neutral), and an optional descriptive icon.
+- **Charts & Data Visualization**:
+  - Keep charts clean: minimal grid lines, legible labels, custom responsive tooltips, and clear legends.
+  - Use colors from the primary/secondary theme. Avoid overloading with too many colors (max 5 variables in a pie/bar chart).
+- **Data Tables & Lists**:
+  - Implement structured, highly legible tables with sticky headers for scrolling.
+  - Support essential table controls: search, sorting, filtering, row selection, pagination, and bulk actions.
+- **Visual Aesthetics & Spacing**:
+  - Background: Off-white/slate-50 (`#F8FAFC`) in light mode, dark-zinc/slate-950 (`#09090B` or `#020617`) in dark mode.
+  - Cards: Pure white (`#FFFFFF`) or dark slate-900 (`#1E293B`) cards with subtle borders (`1px border-slate-100/200`) and soft shadows (`shadow-sm` or `shadow-md`).
+  - Font: Clean, legible Sans-serif typography (e.g., Inter, Outfit, Plus Jakarta Sans).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini menjadikan Antigravity sebagai **UI/UX Designer & Frontend Specialist** yang berfokus pada pembuatan web aplikasi responsif untuk Desktop dan Tablet (landscape 1080x720 px). Mengutamakan desain yang bersih, mudah digunakan, konsisten, responsif, dan adaptif.
+
+### Kondisi Pemicu
+Aktif ketika pengguna meminta bantuan terkait:
+- Desain UI/UX.
+- Layout dan grid system.
+- Pembuatan komponen web responsif.
+- Frontend development (HTML/CSS/JS).
+- Pembuatan wireframe atau mockup.
+
+### Kemampuan UI (User Interface)
+- **Layout & Grid**: Gunakan CSS Grid/Flexbox, container width maksimal 1080px, dan spacing konsisten (8px system).
+- **Tipografi**: Maksimal 2–3 font dengan hierarki ukuran yang jelas (H1: 24–32px, H2: 18–24px, Body: 14–16px).
+- **Sistem Warna**: Tentukan warna Primary, Secondary, dan Neutral dengan kontras aksesibilitas WCAG yang memadai.
+- **Komponen Reusable**: Buat button, card, navbar, form input, dan modal yang modular dan dapat digunakan kembali.
+
+### Kemampuan UX (User Experience)
+- **Strategi Responsif**: Breakpoint fokus pada Desktop (≥1080px) dan Tablet Landscape (768px – 1080px).
+- **Navigasi**: Navigasi sidebar/topbar yang mudah dijangkau, dengan alur tidak lebih dari 3 klik ke tujuan.
+- **Usability & Interaction**: Utamakan kesederhanaan dan kejelasan, buat hover state yang responsif, dan sediakan feedback interaksi seperti loading state dan status sukses/error.
+
+### Panduan Desain SaaS Modern (Terinspirasi Monday.com)
+- **Estetika Visual**: Luas, terstruktur, bersih dengan latar belakang putih (`#FFFFFF`) atau abu-abu terang (`#F9F9F9`), dipadukan dengan aksen merek yang cerah (mis. biru `#0073ea`).
+- **Tipografi**: Font sans-serif geometris dengan kontras tinggi (sangat tebal 48-60px untuk hero, sedang 16-18px abu-abu redup `#676879` untuk teks isi).
+- **Komponen**: Sudut melengkung untuk tombol (~8px) dan radius besar untuk kartu (~12-16px) dengan efek bayangan sangat halus (`shadow-sm`).
+- **Alur Tata Letak**: Konten terpusat dengan lebar maksimal 1200-1400px serta padding vertikal antar bagian yang sangat lega (80-120px) untuk kesan premium.
+
+### Panduan Desain Dashboard Modern & Profesional
+- **Tata Letak Dashboard (Layout)**:
+  - **Sidebar**: Bar navigasi samping yang dapat dilipat/collapsible (lebar 240px–280px saat terbuka, 64px–80px saat tertutup). Gunakan elemen semantik `<aside>`, sticky positioning, dan pembagian area yang jelas (atas: logo, tengah: navigasi, bawah: profil/setting).
+  - **Header (Topbar)**: Header sticky yang memuat breadcrumbs, kolom pencarian, ikon notifikasi, dan menu profil.
+  - **Main Content**: Area konten utama menggunakan CSS Grid/Flexbox dengan padding konsisten (misal: 24px/p-6).
+- **Kartu Metrik (KPI Cards)**:
+  - Letakkan ringkasan metrik utama di bagian paling atas (biasanya grid 3–4 kolom).
+  - Struktur: Label metrik (abu-abu halus), Nilai utama (besar dan tebal, misal: 24px–32px), Indikator Tren (persentase positif warna hijau dengan panah ke atas, persentase negatif warna merah dengan panah ke bawah), dan ikon penjelas.
+- **Visualisasi Data & Grafik (Charts)**:
+  - Desain grafik yang bersih: kurangi grid lines yang tidak perlu, label yang mudah dibaca, tooltip interaktif, dan legenda yang jelas.
+  - Gunakan warna aksen sesuai dengan tema palet dashboard. Hindari terlalu banyak warna (maksimal 5 warna dalam satu grafik).
+- **Tabel Data & List**:
+  - Tampilkan data dalam tabel dengan header yang *sticky* saat di-scroll dan legibilitas tinggi.
+  - Sediakan kontrol dasar: pencarian, pengurutan (sorting), penyaringan (filtering), seleksi baris, paginasi, dan aksi massal (bulk actions).
+- **Estetika Visual & Spacing**:
+  - Latar Belakang (Background): Off-white/slate-50 (`#F8FAFC`) pada mode terang, dark-zinc/slate-950 (`#09090B` atau `#020617`) pada mode gelap.
+  - Kartu (Cards): Berwarna putih bersih (`#FFFFFF`) atau dark slate-900 (`#1E293B`) dengan border halus (`1px border-slate-100/200`) serta drop shadow lembut (`shadow-sm` atau `shadow-md`).
+  - Tipografi: Gunakan font Sans-serif yang sangat terbaca (seperti Inter, Outfit, Plus Jakarta Sans).
+

package/skills/vibe-code-gardener/SKILL.md

@@ -0,0 +1,173 @@
+---
+name: vibe-code-gardener
+description: "Purger of AI slop, code bloat, context drift, and architectural decay in vibe-coded projects / Pembersih AI slop, kode membengkak, konteks drift, dan pembusukan arsitektur pada proyek vibe coding."
+author: "Roedy Rustam"
+---
+
+# Vibe Code Gardener (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Detects and purges AI-generated code quality issues — AI slop, code bloat, context drift, duplicated logic, dead code, misaligned patterns, and architectural decay in projects that have been heavily vibe-coded.
+
+### Trigger Conditions
+- Codebase has grown out of control after many AI-assisted coding sessions.
+- Duplication, inconsistent patterns, or unexplained abstractions detected.
+- Features are getting harder to add or understand.
+- Tests are brittle or missing entirely.
+- The codebase has "AI smell" — overly verbose comments, unnecessary defensive code, duplicate utilities.
+
+### AI Slop Detection Heuristics (2026)
+
+These are the most common AI-generated code quality issues to look for:
+
+#### 1. The "Just In Case" Over-Engineering
+AI models often add features or abstractions "for extensibility" that are never needed:
+```typescript
+// 🔴 AI SLOP: Factory pattern for something that will never change
+const createUserRepository = (type: 'postgres' | 'mysql' | 'sqlite') => {
+  if (type === 'postgres') return new PostgresUserRepo();
+  // ...never switches in practice
+};
+
+// ✅ CLEAN: Just use the implementation
+const userRepo = new PostgresUserRepo();
+```
+
+#### 2. The "Belt and Suspenders" Duplicate Guards
+AI adds null checks and validations at every layer unnecessarily:
+```typescript
+// 🔴 AI SLOP: Triple-validated (already validated by Zod + DB schema + here)
+if (!user || !user.id || user.id === undefined || user.id === null || typeof user.id !== 'string') { ... }
+
+// ✅ CLEAN: Trust your types
+if (!user.id) { ... }
+```
+
+#### 3. The "Graveyard of Dead Utilities"
+AI-generated helper files with functions that are defined but never used:
+- Search for exported functions with 0 usages: `grep -r "export function" --include="*.ts" | while read...`
+- Remove entire files of dead utilities.
+
+#### 4. Context Drift — Style Inconsistency
+Different sessions produce different coding styles in the same codebase:
+- Some files use `async/await`, others use `.then()` chains.
+- Some use `const` arrow functions, others use `function` declarations.
+- Mixed naming: `userId`, `user_id`, `UserID` in the same project.
+- **Fix**: Run a style unification pass with Prettier + ESLint rules.
+
+#### 5. Comment Pollution
+AI loves to narrate obvious code:
+```typescript
+// 🔴 AI SLOP: Stating the obvious
+// Get the user from the database
+const user = await db.user.findUnique({ where: { id } });
+// Return the user
+return user;
+
+// ✅ CLEAN: No comment needed — code is self-explanatory
+const user = await db.user.findUnique({ where: { id } });
+return user;
+```
+
+#### 6. The Bloated Component
+AI tends to put too much in one component across sessions:
+- Component renders conditionally across 5+ different states.
+- Component has 10+ props.
+- Component imports from 20+ different modules.
+- **Fix**: Apply Single Responsibility — split into sub-components.
+
+#### 7. Dependency Creep
+Each AI session may install new packages for tasks already solvable with existing deps:
+```bash
+# Audit dependencies — find packages doing the same thing
+npx depcheck  # Unused dependencies
+npx bundle-phobia-cli # Bundle size of each dep
+```
+
+### Gardening Protocol
+
+#### Phase 1: Discovery (Read Only)
+1. Map the full file tree.
+2. Identify largest files (likely bloated).
+3. Find duplicated logic with semantic search.
+4. Find unused exports and dead code.
+5. Identify inconsistent patterns across files.
+
+#### Phase 2: Triage
+Categorize issues:
+- **Critical**: Bugs, security holes, data loss risks.
+- **High**: Duplicate business logic that will diverge.
+- **Medium**: Code smells that slow development.
+- **Low**: Style inconsistencies, over-verbose comments.
+
+#### Phase 3: Systematic Refactoring
+Work file by file, smallest changes first:
+1. Remove dead code and unused imports.
+2. Extract duplicated logic into shared utilities.
+3. Simplify over-engineered abstractions.
+4. Standardize naming conventions.
+5. Add missing tests for business-critical paths.
+
+#### Phase 4: Prevention
+- Add ESLint rules to catch common AI slop patterns.
+- Add `depcheck` to CI to catch unused dependencies.
+- Add architecture tests (e.g., `arch-unit`) to enforce layer boundaries.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Mendeteksi dan membersihkan masalah kualitas kode yang dihasilkan AI — AI slop, kode yang membengkak, context drift, logika yang terduplikasi, kode mati, pola yang tidak konsisten, dan pembusukan arsitektur pada proyek yang banyak menggunakan vibe coding.
+
+### Kondisi Pemicu
+- Codebase telah tumbuh tidak terkendali setelah banyak sesi coding berbantuan AI.
+- Duplikasi, pola tidak konsisten, atau abstraksi yang tidak dapat dijelaskan terdeteksi.
+- Fitur semakin sulit ditambahkan atau dipahami.
+- Test rapuh atau tidak ada sama sekali.
+- Codebase memiliki "AI smell" — komentar yang terlalu verbose, kode defensif yang tidak perlu, utilitas yang diduplikasi.
+
+### Heuristik Deteksi AI Slop (2026)
+
+#### 1. Over-Engineering "Untuk Jaga-Jaga"
+Model AI sering menambahkan fitur atau abstraksi "untuk ekstensibilitas" yang tidak pernah dibutuhkan. Hapus factory pattern, strategy pattern, atau abstraksi lain yang tidak memiliki lebih dari satu implementasi.
+
+#### 2. "Belt and Suspenders" — Validasi Ganda Berlebihan
+AI menambahkan null check dan validasi di setiap layer yang sebenarnya sudah divalidasi oleh Zod, TypeScript, atau skema DB. Percayai tipe Anda.
+
+#### 3. "Kuburan Utilitas Mati"
+File helper yang dihasilkan AI dengan fungsi yang tidak pernah digunakan. Cari dan hapus ekspor dengan 0 penggunaan.
+
+#### 4. Context Drift — Inkonsistensi Gaya
+Sesi yang berbeda menghasilkan gaya koding yang berbeda: sebagian menggunakan `async/await`, yang lain menggunakan `.then()`; penamaan campuran `userId`, `user_id`, `UserID`. Perbaiki dengan satu pass Prettier + aturan ESLint.
+
+#### 5. Polusi Komentar
+AI suka mengomentari kode yang sudah jelas sendiri. Hapus komentar yang hanya mengulang apa yang sudah tertulis dalam kode.
+
+#### 6. Komponen yang Membengkak
+Komponen dengan terlalu banyak kondisi rendering, prop, atau impor. Terapkan Single Responsibility — pecah menjadi sub-komponen.
+
+#### 7. Creep Dependensi
+Setiap sesi AI mungkin menginstal paket baru untuk tugas yang sudah bisa diselesaikan dengan dependensi yang ada. Audit dengan `depcheck` dan `bundle-phobia-cli`.
+
+### Protokol Berkebun
+
+#### Fase 1: Penemuan (Hanya Baca)
+Peta pohon file lengkap, identifikasi file terbesar, temukan logika yang terduplikasi, temukan ekspor yang tidak digunakan.
+
+#### Fase 2: Triase
+Kategorikan masalah: Kritis, Tinggi, Sedang, Rendah.
+
+#### Fase 3: Refactoring Sistematis
+Kerja file per file, perubahan terkecil dulu: hapus kode mati, ekstrak logika duplikat, sederhanakan abstraksi berlebih, standarisasi penamaan, tambahkan test yang hilang.
+
+#### Fase 4: Pencegahan
+Tambahkan aturan ESLint, `depcheck` di CI, dan architecture test untuk menjaga codebase tetap bersih.

package/skills/web-scraper/SKILL.md

@@ -0,0 +1,205 @@
+---
+name: web-scraper
+description: "Smart web data extraction capability with multi-strategy scraping (Crawl4AI, Playwright, BeautifulSoup), LLM extraction, pagination support, and structured export / Kemampuan ekstraksi data web cerdas dengan strategi scraping modern (Crawl4AI, Playwright, BeautifulSoup), ekstraksi LLM, paginasi, dan ekspor terstruktur."
+author: "Roedy Rustam"
+---
+
+# Web Scraper Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Smart web data extraction using modern scraping strategies — **Firecrawl** (LLM-ready structured extraction), **Jina Reader API** (clean markdown from any URL), **Crawl4AI** (async Python scraping), **Playwright** (browser automation), and **BeautifulSoup** (lightweight HTML parsing). Supports pagination, dynamic content, structured export (JSON, CSV, Markdown), and AI-powered data extraction.
+
+### Trigger Conditions
+- Extracting structured data from websites for analysis, training data, or content pipelines.
+- Scraping dynamic JavaScript-rendered pages (SPAs, React apps).
+- Converting web pages to clean Markdown for LLM context or RAG pipelines.
+- Building an automated data pipeline that scrapes, transforms, and stores data.
+- Extracting data at scale with rate limiting and proxy rotation.
+
+### Strategy Selection Guide
+
+| Strategy | Tool | Best For | JS Required |
+|---|---|---|---|
+| **Managed API** | Firecrawl / Jina Reader | LLM-ready content, clean Markdown | Handled |
+| **Async Python** | Crawl4AI | High-volume, AI-powered extraction | Optional |
+| **Browser Automation** | Playwright | Complex SPAs, auth-required pages | ✅ |
+| **Lightweight HTML** | BeautifulSoup + httpx | Static HTML, fast extraction | ❌ |
+
+### Firecrawl — LLM-Ready Web Scraping (2026 Standard)
+Firecrawl converts any URL to clean, LLM-ready Markdown with a single API call:
+```python
+from firecrawl import FirecrawlApp
+
+app = FirecrawlApp(api_key="fc-xxxx")
+
+# Single page — clean Markdown
+result = app.scrape_url(
+    "https://example.com/article",
+    formats=["markdown", "html"],
+    only_main_content=True,  # removes nav, footer, ads
+)
+print(result.markdown)
+
+# Full site crawl
+crawl_result = app.crawl_url(
+    "https://docs.example.com",
+    limit=50,
+    scrape_options={"formats": ["markdown"]},
+)
+
+# LLM-powered structured extraction with JSON schema
+from pydantic import BaseModel
+
+class ProductInfo(BaseModel):
+    name: str
+    price: float
+    description: str
+    in_stock: bool
+
+result = app.scrape_url(
+    "https://shop.example.com/product/123",
+    formats=["extract"],
+    extract={"schema": ProductInfo.model_json_schema()},
+)
+product = ProductInfo(**result.extract)
+```
+
+### Jina Reader API — Clean Markdown from Any URL
+```python
+import httpx
+
+async def url_to_markdown(url: str) -> str:
+    """Convert any URL to clean Markdown via Jina Reader API."""
+    async with httpx.AsyncClient() as client:
+        response = await client.get(
+            f"https://r.jina.ai/{url}",
+            headers={
+                "Accept": "application/json",
+                "X-Return-Format": "markdown",
+                "Authorization": f"Bearer {JINA_API_KEY}",
+            }
+        )
+        data = response.json()
+        return data["data"]["content"]
+
+# Search and get results as Markdown
+async def search_to_markdown(query: str) -> str:
+    async with httpx.AsyncClient() as client:
+        response = await client.get(
+            f"https://s.jina.ai/{query}",
+            headers={"Accept": "application/json"}
+        )
+        return response.json()["data"]
+```
+
+### Crawl4AI — Async Python Web Scraper
+```python
+import asyncio
+from crawl4ai import AsyncWebCrawler, BrowserConfig, CrawlerRunConfig, CacheMode
+
+async def scrape_with_ai_extraction():
+    browser_config = BrowserConfig(headless=True, verbose=False)
+    
+    async with AsyncWebCrawler(config=browser_config) as crawler:
+        result = await crawler.arun(
+            url="https://news.example.com",
+            config=CrawlerRunConfig(
+                cache_mode=CacheMode.ENABLED,       # cache results
+                word_count_threshold=50,            # skip short content
+                exclude_external_links=True,
+                remove_overlay_elements=True,       # remove popups/modals
+            ),
+        )
+        
+        print(result.markdown.fit_markdown)  # cleaned, AI-optimized Markdown
+        print(result.links)                  # extracted links
+```
+
+### Playwright — Complex Dynamic Pages
+```python
+from playwright.async_api import async_playwright
+import asyncio
+
+async def scrape_spa(url: str) -> dict:
+    async with async_playwright() as pw:
+        browser = await pw.chromium.launch(headless=True)
+        page = await browser.new_page()
+        
+        # Block images/CSS to speed up
+        await page.route("**/*.{png,jpg,jpeg,gif,css,woff2}", lambda r: r.abort())
+        
+        await page.goto(url, wait_until="networkidle")
+        
+        # Wait for dynamic content
+        await page.wait_for_selector("[data-testid='product-list']")
+        
+        # Extract structured data via JavaScript
+        products = await page.evaluate("""() => {
+            return Array.from(document.querySelectorAll('.product-card')).map(card => ({
+                name: card.querySelector('.product-name')?.textContent?.trim(),
+                price: card.querySelector('.price')?.textContent?.trim(),
+            }));
+        }""")
+        
+        await browser.close()
+        return {"products": products, "url": url}
+```
+
+### Ethical Scraping Checklist
+- [ ] Check `robots.txt` and respect `Disallow` rules.
+- [ ] Implement rate limiting — minimum 1-2 seconds between requests.
+- [ ] Use descriptive `User-Agent` header with contact email.
+- [ ] Cache results to avoid repeated requests.
+- [ ] Prefer public APIs or official data feeds when available.
+- [ ] Do not scrape personal/private data without consent.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Ekstraksi data web yang cerdas menggunakan strategi scraping modern — **Firecrawl** (ekstraksi terstruktur siap-LLM), **Jina Reader API** (Markdown bersih dari URL manapun), **Crawl4AI** (scraping Python async), **Playwright** (otomasi browser), dan **BeautifulSoup** (parsing HTML ringan). Mendukung paginasi, konten dinamis, ekspor terstruktur, dan ekstraksi data bertenaga AI.
+
+### Kondisi Pemicu
+- Mengekstrak data terstruktur dari website untuk analisis, data pelatihan, atau pipeline konten.
+- Scraping halaman yang dirender JavaScript secara dinamis (SPA, aplikasi React).
+- Mengonversi halaman web menjadi Markdown bersih untuk konteks LLM atau pipeline RAG.
+- Membangun pipeline data otomatis yang melakukan scraping, transformasi, dan penyimpanan.
+- Mengekstrak data dalam skala besar dengan rate limiting dan rotasi proxy.
+
+### Panduan Pemilihan Strategi
+
+| Strategi | Tool | Terbaik Untuk | Perlu JS |
+|---|---|---|---|
+| **API Terkelola** | Firecrawl / Jina Reader | Konten siap LLM, Markdown bersih | Ditangani |
+| **Python Async** | Crawl4AI | Volume tinggi, ekstraksi AI | Opsional |
+| **Otomasi Browser** | Playwright | SPA kompleks, halaman butuh auth | ✅ |
+| **HTML Ringan** | BeautifulSoup + httpx | HTML statis, ekstraksi cepat | ❌ |
+
+### Firecrawl — Scraping Web Siap LLM
+Firecrawl mengonversi URL apapun menjadi Markdown bersih siap LLM dengan satu panggilan API. Mendukung crawling seluruh situs, ekstraksi terstruktur berbasis skema JSON, dan penghapusan konten yang tidak relevan (navigasi, footer, iklan).
+
+### Jina Reader API — Markdown Bersih dari URL Manapun
+Jina Reader (`r.jina.ai/{url}`) mengonversi halaman web manapun menjadi Markdown yang dioptimalkan untuk LLM. Jina Search (`s.jina.ai/{query}`) melakukan pencarian web dan mengembalikan hasilnya sebagai Markdown.
+
+### Crawl4AI — Web Scraper Python Async
+Crawl4AI mendukung caching hasil, ekstraksi Markdown yang dioptimalkan AI, dan konfigurasi browser yang fleksibel untuk scraping konten dinamis.
+
+### Playwright — Halaman Dinamis Kompleks
+Gunakan Playwright untuk scraping SPA yang memerlukan eksekusi JavaScript, menunggu elemen dinamis, atau interaksi dengan halaman (klik, scroll, isi form).
+
+### Checklist Scraping Etis
+- [ ] Periksa `robots.txt` dan hormati aturan `Disallow`.
+- [ ] Implementasikan rate limiting — minimal 1-2 detik antar permintaan.
+- [ ] Gunakan header `User-Agent` deskriptif dengan email kontak.
+- [ ] Cache hasil untuk menghindari permintaan berulang.
+- [ ] Utamakan API publik atau feed data resmi jika tersedia.
+- [ ] Jangan scraping data pribadi/privat tanpa izin.