vibes-plug 2.5.0 → 2.14.1

package/skills/api-gateway-proxy-expert/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: api-gateway-proxy-expert
+description: "Expert guide for API Gateways, Reverse Proxies, and Service Mesh. Covers Kong, Traefik, NGINX, Cloudflare Gateway, and load balancing / Panduan ahli untuk API Gateway, Reverse Proxy, dan Service Mesh."
+author: "Roedy Rustam"
+---
+
+# API Gateway & Reverse Proxy Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A comprehensive guide for routing, load balancing, and managing traffic at the perimeter of your microservices architecture. Covers configuring API Gateways (Kong, Tyk), modern reverse proxies (Traefik, Caddy, NGINX), and understanding Service Mesh patterns.
+
+### Trigger Conditions
+- When architecting a microservices backend that needs a unified entry point (BFF - Backend for Frontend).
+- When configuring SSL/TLS termination, rate limiting, or IP allowlisting at the infrastructure level.
+- When the user asks about "Traefik", "NGINX config", "Kong", or "API routing".
+- When implementing blue-green deployments or canary releases via traffic splitting.
+
+### Core Architectural Guidelines
+
+#### 1. API Gateway Pattern
+Instead of client applications calling individual microservices, route all traffic through an API Gateway.
+- **Cross-Cutting Concerns**: Offload authentication (JWT verification), rate limiting, and CORS handling to the Gateway.
+- **Routing**: Use path-based routing (e.g., `/api/users` -> Users Service, `/api/billing` -> Billing Service).
+
+#### 2. Tool Selection
+- **Traefik**: Best for Docker/Kubernetes environments due to its auto-discovery capabilities via labels/annotations.
+- **Caddy**: Best for simplicity and automatic HTTPS (Let's Encrypt provisioning).
+- **Kong API Gateway**: Best for enterprise environments requiring extensive plugins (OIDC, rate limiting, analytics).
+- **Cloudflare (Edge)**: Use Cloudflare rules for edge-level caching, WAF, and DDoS protection before traffic even reaches your origin proxy.
+
+#### 3. Configuration Best Practices
+- **Timeouts**: Always configure strict proxy read/write timeouts to prevent stalled connections from exhausting worker pools.
+- **Health Checks**: Configure active health checks so the proxy can automatically remove failing backend instances from the load balancer pool.
+- **X-Forwarded Headers**: Ensure your proxy correctly sets `X-Forwarded-For` and `X-Forwarded-Proto` so backend services know the client's real IP and protocol.
+
+## Orchestration & Integration
+- Sits in front of `js-backend-expert`, `go-programming-expert`, and `rust-programming-expert` services.
+- Offloads work from `rate-limit-abuse-prevention` by handling rate limits at the L7 proxy layer.
+- Complements `ci-cd-devops-architect` when configuring Docker Compose or Kubernetes Ingress.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan komprehensif untuk routing, load balancing, dan manajemen trafik di lapisan terluar (perimeter) arsitektur microservices. Mencakup konfigurasi API Gateway (Kong), reverse proxy modern (Traefik, Caddy, NGINX), dan Service Mesh.
+
+### Kondisi Pemicu
+- Saat merancang backend microservices yang membutuhkan satu pintu masuk terpadu (BFF).
+- Saat mengonfigurasi terminasi SSL/TLS, rate limiting, atau IP allowlisting di tingkat infrastruktur.
+- Saat menerapkan rilis canary atau blue-green deployment melalui pembagian trafik (traffic splitting).
+
+### Panduan Arsitektur Inti
+
+#### 1. Pola API Gateway
+Jangan biarkan klien (frontend/mobile) memanggil microservices secara langsung.
+- Gunakan Gateway untuk menangani masalah lintas-layanan (cross-cutting) seperti verifikasi JWT, CORS, dan rate limiting.
+- Gunakan routing berbasis *path* (jalur).
+
+#### 2. Pemilihan Tool
+- **Traefik**: Pilihan terbaik untuk lingkungan Docker/Kubernetes karena penemuan layanan otomatis (auto-discovery) melalui label.
+- **Caddy**: Pilihan terbaik untuk kemudahan setup dan HTTPS otomatis (Let's Encrypt).
+- **Kong**: Standar industri untuk kebutuhan Enterprise dengan sistem plugin yang kuat.
+- **Cloudflare**: Lini pertahanan pertama untuk WAF dan perlindungan DDoS di sisi Edge.
+
+#### 3. Praktik Terbaik Konfigurasi
+- **Timeouts**: Selalu tetapkan batas waktu (timeout) koneksi proxy untuk mencegah server kehabisan resource karena koneksi yang menggantung.
+- **Health Checks**: Aktifkan health check agar proxy tidak mengirimkan request ke service yang sedang mati.
+- **Header X-Forwarded**: Pastikan proxy menyertakan header `X-Forwarded-For` agar backend mengetahui IP asli klien.
+
+## Integrasi Orkestrasi
+- Berada di depan service yang dibangun dengan `js-backend-expert`, `go-programming-expert`, atau `rust-programming-expert`.
+- Bekerja sama dengan `ci-cd-devops-architect` untuk konfigurasi Ingress Kubernetes atau Docker Compose.

package/skills/app-analyzer-optimizer/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: app-analyzer-optimizer
 description: "Deeply analyzes application architecture and structure to perform audit, bottleneck detection, and code/performance optimization / Mempelajari arsitektur dan struktur aplikasi secara mendalam untuk melakukan audit, deteksi bottleneck, serta optimasi performa dan kode."
-author: vibes-plug-swarm
+author: "Roedy Rustam"
 ---
 
 # App Analyzer & Optimizer (2026 Edition)
@@ -146,6 +146,9 @@ go tool pprof -http=:8080 profile.out
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
 ### Deskripsi
 Skill analisis dan optimasi aplikasi mendalam. Melakukan audit arsitektur, deteksi bottleneck, analisis bundle, profiling query database, dan code review berbantuan AI di aplikasi Next.js, React, Node.js, Go, Python, dan Rust.
 
@@ -188,6 +191,6 @@ Gunakan CodeRabbit untuk review PR otomatis, Sourcegraph Cody untuk pencarian se
 | Tanpa caching | Data yang sama diambil berulang kali | Redis, React Query staleTime, HTTP cache |
 | Bundle membengkak | Payload JS besar | Tree-shaking, code splitting, lazy imports |
 
-
-## Orchestration & Integration
+
+## Orchestration & Integration
 - Integrates with performance-web-vitals and production-ready-hardener.

package/skills/apple-ecosystem-expert/SKILL.md

@@ -1,142 +1,145 @@
----
-name: apple-ecosystem-expert
-description: "Expert guide for Apple Ecosystem development. Covers iOS support, Safari WebKit compatibility, PWAs (Progressive Web Apps) for iOS, and Human Interface Guidelines (HIG) for web and native apps / Panduan ahli pengembangan ekosistem Apple (iOS & Web)."
-author: vibes-plug-swarm
----
-
-# Apple Ecosystem Expert — vibes-plug Skill
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Expert guide for Apple Ecosystem development. Covers Safari WebKit compatibility, Progressive Web Apps (PWAs) tailored for iOS, touch interactions, `manifest.json` configurations, and applying Human Interface Guidelines (HIG) principles to web and iOS applications.
-
-### Trigger Conditions
-Activate this skill when the user is:
-- Asking for Safari browser compatibility or fixing WebKit bugs.
-- Developing PWAs or web apps targeting iOS/iPadOS devices.
-- Asking about `apple-touch-icon`, `apple-mobile-web-app-capable`, or related meta tags.
-- Building UI elements that need to look and feel native on Apple devices.
-
----
-
-### Core Concepts
-
-#### 1. iOS PWA & Meta Tags
-To ensure a web application looks and acts like a native app on iOS when added to the home screen, include these specific meta tags and configurations:
-
-```html
-<!-- iOS Safari PWA Meta Tags -->
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="apple-mobile-web-app-status-bar-style" content="default" />
-<meta name="apple-mobile-web-app-title" content="App Title" />
-<link rel="apple-touch-icon" href="/icon-192x192.png" />
-<!-- Support for splash screens requires specific sizes, consider using PWA asset generators -->
-```
-
-#### 2. Safari WebKit CSS Quirks
-Safari (WebKit) has distinct behavior for viewport sizing and scrolling.
-
-| CSS Feature | WebKit Problem | Solution / Workaround |
-|---|---|---|
-| `100vh` | Ignores the bottom navigation bar on mobile Safari, causing overflow. | Use `100dvh` (Dynamic Viewport Height) or safe area insets. |
-| Over-scrolling | "Rubber-banding" effect reveals background on scroll limits. | `overscroll-behavior: none;` on `body`. |
-| Safe Area | Notches and Dynamic Islands block content. | Use `env(safe-area-inset-bottom)`, `env(safe-area-inset-top)`. |
-
-```css
-/* Example: Handling safe area and dynamic viewport height */
-.container {
-  height: 100dvh;
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-}
-```
-
-#### 3. Touch and Interactions
-To achieve native feel on iOS, touch interactions must be smooth. Use CSS properties like `-webkit-tap-highlight-color: transparent;` to remove the default grey tap highlight.
-
----
-
-### Best Practices
-
-1. **Always use Dynamic Viewports (`dvh`, `svh`, `lvh`):** Standard `vh` in mobile Safari causes layout shifts or hidden content due to the dynamic browser UI.
-2. **Handle Safe Areas:** Utilize CSS `env()` variables to avoid content overlapping with the iOS notch or home indicator.
-3. **Optimized Touch Targets:** Apple HIG dictates a minimum touch target size of 44x44 pt. Ensure buttons are easily clickable.
-4. **PWA Icons and Manifest:** iOS does not fully respect standard `manifest.json` icons; you must provide `<link rel="apple-touch-icon">` explicitly.
-
----
-
-### Common Pitfalls to Avoid
-
-| Anti-Pattern | Problem | Correct Approach |
-|---|---|---|
-| Using `100vh` for full screen apps | Bottom content gets hidden under Safari's tab bar. | Use `100dvh`. |
-| Ignoring `-webkit-appearance` | Buttons/inputs look like default iOS forms instead of custom UI. | Set `-webkit-appearance: none;` on form elements. |
-| Relying only on `manifest.json` for PWA icons | iOS won't use them for the "Add to Home Screen" icon. | Include `<link rel="apple-touch-icon" href="...">`. |
-
----
-
-### Integration with Other Skills (MANDATORY)
-
-This skill works best when combined with:
-- `hig` — For detailed implementation of Apple Human Interface Guidelines styling.
-- `mobile-expo-expert` — When building React Native/Expo apps for iOS.
-- `tailwind-expert` — To apply CSS adjustments like `dvh` and safe-areas using Tailwind utility classes.
-- `ui-components-expert` — To ensure UI components are sized correctly for iOS touch targets (44x44).
-
-### Referenced By Orchestrators (MANDATORY)
-
-This skill should be referenced by the following orchestrators:
-- `brainstorming` — Add to the "Mobile & Web Ecosystems" row in the Skill Integration & Orchestration Matrix
-- `zero-to-prod-orchestrator` — Add to Phase 4 (Frontend Implementation) & Phase 8 (Production Audit)
-- `production-ready-hardener` — Add to Phase 2 (PWA & Compatibility Audit)
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan ahli untuk pengembangan ekosistem Apple. Mencakup kompatibilitas Safari WebKit, Progressive Web Apps (PWA) khusus iOS, interaksi sentuhan, konfigurasi `manifest.json`, dan penerapan prinsip Human Interface Guidelines (HIG) untuk web dan aplikasi iOS.
-
-### Kondisi Pemicu
-Aktifkan skill ini ketika pengguna sedang:
-- Menanyakan kompatibilitas browser Safari atau memperbaiki bug WebKit.
-- Mengembangkan PWA atau aplikasi web yang menargetkan perangkat iOS/iPadOS.
-- Menanyakan tentang `apple-touch-icon`, meta tag PWA iOS, atau safe area.
-- Membangun elemen UI agar terlihat dan terasa *native* di ekosistem Apple.
-
-### Panduan Singkat
-
-Panduan praktis untuk dukungan Ekosistem Apple (iOS & Web):
-
-- **[Gunakan `100dvh`]:** Jangan pernah gunakan `100vh` di web app iOS, gunakan `100dvh` (Dynamic Viewport Height) agar tidak tertutup navigation bar Safari.
-- **[Meta Tag PWA Khusus]:** Wajib menggunakan `<link rel="apple-touch-icon">` dan `<meta name="apple-mobile-web-app-capable" content="yes">` agar PWA berjalan optimal saat ditambahkan ke Home Screen.
-- **[Safe Area]:** Terapkan padding `env(safe-area-inset-top)` dsb, untuk menghindari notch (poni) dan Dynamic Island iPhone.
-- **[Touch Targets HIG]:** Area sentuh minimum untuk elemen interaktif di iOS adalah 44x44 points.
-
-### Integrasi dengan Skill Lain (WAJIB)
-
-Skill ini bekerja paling baik dikombinasikan dengan:
-- `hig` — Untuk menerapkan struktur dan prinsip desain dari Human Interface Guidelines Apple.
-- `mobile-expo-expert` — Jika menggunakan React Native untuk aplikasi iOS.
-- `tailwind-expert` — Mengatur penyesuaian WebKit seperti `dvh` dan safe-areas dengan utility class.
-
-### Direferensikan oleh Orchestrator (WAJIB)
-
-Skill ini harus direferensikan oleh orchestrator berikut:
-- `brainstorming` — Bagian Mobile & Web Ecosystems.
-- `zero-to-prod-orchestrator` — Fase 4 dan 8 (Kesiapan Produksi).
-- `production-ready-hardener` — Fase 2 (Audit Kompatibilitas Lintas Browser & PWA).
-
-
-## Orchestration & Integration
-- Integrates with: `hig`, `mobile-expo-expert`, `tailwind-expert`, `ui-components-expert`.
+---
+name: apple-ecosystem-expert
+description: "Expert guide for Apple Ecosystem development. Covers iOS support, Safari WebKit compatibility, PWAs (Progressive Web Apps) for iOS, and Human Interface Guidelines (HIG) for web and native apps / Panduan ahli pengembangan ekosistem Apple (iOS & Web)."
+author: "Roedy Rustam"
+---
+
+# Apple Ecosystem Expert — vibes-plug Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for Apple Ecosystem development. Covers Safari WebKit compatibility, Progressive Web Apps (PWAs) tailored for iOS, touch interactions, `manifest.json` configurations, and applying Human Interface Guidelines (HIG) principles to web and iOS applications.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Asking for Safari browser compatibility or fixing WebKit bugs.
+- Developing PWAs or web apps targeting iOS/iPadOS devices.
+- Asking about `apple-touch-icon`, `apple-mobile-web-app-capable`, or related meta tags.
+- Building UI elements that need to look and feel native on Apple devices.
+
+---
+
+### Core Concepts
+
+#### 1. iOS PWA & Meta Tags
+To ensure a web application looks and acts like a native app on iOS when added to the home screen, include these specific meta tags and configurations:
+
+```html
+<!-- iOS Safari PWA Meta Tags -->
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+<meta name="apple-mobile-web-app-title" content="App Title" />
+<link rel="apple-touch-icon" href="/icon-192x192.png" />
+<!-- Support for splash screens requires specific sizes, consider using PWA asset generators -->
+```
+
+#### 2. Safari WebKit CSS Quirks
+Safari (WebKit) has distinct behavior for viewport sizing and scrolling.
+
+| CSS Feature | WebKit Problem | Solution / Workaround |
+|---|---|---|
+| `100vh` | Ignores the bottom navigation bar on mobile Safari, causing overflow. | Use `100dvh` (Dynamic Viewport Height) or safe area insets. |
+| Over-scrolling | "Rubber-banding" effect reveals background on scroll limits. | `overscroll-behavior: none;` on `body`. |
+| Safe Area | Notches and Dynamic Islands block content. | Use `env(safe-area-inset-bottom)`, `env(safe-area-inset-top)`. |
+
+```css
+/* Example: Handling safe area and dynamic viewport height */
+.container {
+  height: 100dvh;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+```
+
+#### 3. Touch and Interactions
+To achieve native feel on iOS, touch interactions must be smooth. Use CSS properties like `-webkit-tap-highlight-color: transparent;` to remove the default grey tap highlight.
+
+---
+
+### Best Practices
+
+1. **Always use Dynamic Viewports (`dvh`, `svh`, `lvh`):** Standard `vh` in mobile Safari causes layout shifts or hidden content due to the dynamic browser UI.
+2. **Handle Safe Areas:** Utilize CSS `env()` variables to avoid content overlapping with the iOS notch or home indicator.
+3. **Optimized Touch Targets:** Apple HIG dictates a minimum touch target size of 44x44 pt. Ensure buttons are easily clickable.
+4. **PWA Icons and Manifest:** iOS does not fully respect standard `manifest.json` icons; you must provide `<link rel="apple-touch-icon">` explicitly.
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Problem | Correct Approach |
+|---|---|---|
+| Using `100vh` for full screen apps | Bottom content gets hidden under Safari's tab bar. | Use `100dvh`. |
+| Ignoring `-webkit-appearance` | Buttons/inputs look like default iOS forms instead of custom UI. | Set `-webkit-appearance: none;` on form elements. |
+| Relying only on `manifest.json` for PWA icons | iOS won't use them for the "Add to Home Screen" icon. | Include `<link rel="apple-touch-icon" href="...">`. |
+
+---
+
+### Integration with Other Skills (MANDATORY)
+
+This skill works best when combined with:
+- `hig` — For detailed implementation of Apple Human Interface Guidelines styling.
+- `mobile-expo-expert` — When building React Native/Expo apps for iOS.
+- `tailwind-expert` — To apply CSS adjustments like `dvh` and safe-areas using Tailwind utility classes.
+- `ui-components-expert` — To ensure UI components are sized correctly for iOS touch targets (44x44).
+
+### Referenced By Orchestrators (MANDATORY)
+
+This skill should be referenced by the following orchestrators:
+- `brainstorming` — Add to the "Mobile & Web Ecosystems" row in the Skill Integration & Orchestration Matrix
+- `zero-to-prod-orchestrator` — Add to Phase 4 (Frontend Implementation) & Phase 8 (Production Audit)
+- `production-ready-hardener` — Add to Phase 2 (PWA & Compatibility Audit)
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Panduan ahli untuk pengembangan ekosistem Apple. Mencakup kompatibilitas Safari WebKit, Progressive Web Apps (PWA) khusus iOS, interaksi sentuhan, konfigurasi `manifest.json`, dan penerapan prinsip Human Interface Guidelines (HIG) untuk web dan aplikasi iOS.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna sedang:
+- Menanyakan kompatibilitas browser Safari atau memperbaiki bug WebKit.
+- Mengembangkan PWA atau aplikasi web yang menargetkan perangkat iOS/iPadOS.
+- Menanyakan tentang `apple-touch-icon`, meta tag PWA iOS, atau safe area.
+- Membangun elemen UI agar terlihat dan terasa *native* di ekosistem Apple.
+
+### Panduan Singkat
+
+Panduan praktis untuk dukungan Ekosistem Apple (iOS & Web):
+
+- **[Gunakan `100dvh`]:** Jangan pernah gunakan `100vh` di web app iOS, gunakan `100dvh` (Dynamic Viewport Height) agar tidak tertutup navigation bar Safari.
+- **[Meta Tag PWA Khusus]:** Wajib menggunakan `<link rel="apple-touch-icon">` dan `<meta name="apple-mobile-web-app-capable" content="yes">` agar PWA berjalan optimal saat ditambahkan ke Home Screen.
+- **[Safe Area]:** Terapkan padding `env(safe-area-inset-top)` dsb, untuk menghindari notch (poni) dan Dynamic Island iPhone.
+- **[Touch Targets HIG]:** Area sentuh minimum untuk elemen interaktif di iOS adalah 44x44 points.
+
+### Integrasi dengan Skill Lain (WAJIB)
+
+Skill ini bekerja paling baik dikombinasikan dengan:
+- `hig` — Untuk menerapkan struktur dan prinsip desain dari Human Interface Guidelines Apple.
+- `mobile-expo-expert` — Jika menggunakan React Native untuk aplikasi iOS.
+- `tailwind-expert` — Mengatur penyesuaian WebKit seperti `dvh` dan safe-areas dengan utility class.
+
+### Direferensikan oleh Orchestrator (WAJIB)
+
+Skill ini harus direferensikan oleh orchestrator berikut:
+- `brainstorming` — Bagian Mobile & Web Ecosystems.
+- `zero-to-prod-orchestrator` — Fase 4 dan 8 (Kesiapan Produksi).
+- `production-ready-hardener` — Fase 2 (Audit Kompatibilitas Lintas Browser & PWA).
+
+
+## Orchestration & Integration
+- Integrates with: `hig`, `mobile-expo-expert`, `tailwind-expert`, `ui-components-expert`.
 - Orchestrated by: `brainstorming`, `zero-to-prod-orchestrator`, `production-ready-hardener`.

package/skills/astro-framework-expert/SKILL.md

@@ -0,0 +1,200 @@
+---
+name: astro-framework-expert
+description: "Expert guide for Astro 5+ framework — Content Collections, Islands Architecture, View Transitions, partial hydration, and MDX integration / Panduan ahli framework Astro 5+ — Content Collections, Islands Architecture, View Transitions, partial hydration, dan integrasi MDX."
+author: "Roedy Rustam"
+---
+
+# Astro Framework Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`seo`**: Astro's built-in SEO capabilities, sitemaps, and structured data.
+- **`performance-web-vitals`**: Astro's zero-JS-by-default performance optimization.
+- **`tailwind-expert`**: Tailwind CSS v4 integration with Astro.
+- **`headless-cms-expert`**: Content fetching from Sanity/Payload/Strapi in Astro.
+- **`ci-cd-devops-architect`**: Deploying Astro to Vercel, Cloudflare Pages, or Netlify.
+
+### Description
+Expert guide for building high-performance, content-first websites with Astro 5+. Covers Content Collections (type-safe content), Islands Architecture (partial hydration), View Transitions, server-side rendering, hybrid rendering, MDX integration, Astro DB, and multi-framework component support (React, Vue, Svelte in one project).
+
+### Trigger Conditions
+- Building content-heavy websites (blogs, docs, marketing pages, portfolios).
+- Choosing between Astro and Next.js for a content-first project.
+- Implementing partial hydration or Islands Architecture.
+- Creating documentation sites or landing pages optimized for performance.
+- Using multiple UI frameworks (React + Vue + Svelte) in one project.
+
+---
+
+### Core Concepts
+
+#### Astro vs Next.js Decision Guide
+
+| Criteria | Astro 5 | Next.js 15 |
+|----------|---------|------------|
+| Primary Focus | Content sites | Full-stack apps |
+| Default JS Shipped | 0 KB | React runtime |
+| Rendering | Static-first, opt-in SSR | SSR-first, opt-in static |
+| Multi-framework | ✅ React, Vue, Svelte, Solid | React only |
+| Content Collections | ✅ Built-in, type-safe | Manual with MDX |
+| Server Islands | ✅ Deferred rendering | PPR (similar) |
+| **Choose When** | Content, SEO, speed critical | Complex interactivity |
+
+**Recommendation:** Choose **Astro** for content-driven sites where performance and SEO are top priorities. Choose **Next.js** for interactive web applications with complex state.
+
+#### 1. Project Setup
+
+```bash
+# Create new Astro project
+npm create astro@latest ./my-site -- --template blog --typescript strict
+
+# Add integrations
+npx astro add tailwind react mdx sitemap
+```
+
+#### 2. Content Collections (Type-Safe Content)
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+  type: 'content', // Markdown/MDX files
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.coerce.date(),
+    heroImage: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    draft: z.boolean().default(false),
+  }),
+});
+
+const authors = defineCollection({
+  type: 'data', // JSON/YAML files
+  schema: z.object({
+    name: z.string(),
+    avatar: z.string(),
+    bio: z.string(),
+  }),
+});
+
+export const collections = { blog, authors };
+```
+
+```astro
+---
+// src/pages/blog/[...slug].astro
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog', ({ data }) => !data.draft);
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+
+<article>
+  <h1>{post.data.title}</h1>
+  <time>{post.data.pubDate.toLocaleDateString()}</time>
+  <Content />
+</article>
+```
+
+#### 3. Islands Architecture (Partial Hydration)
+
+```astro
+---
+// Only hydrate interactive components — rest ships as 0 JS
+import Newsletter from '../components/Newsletter.tsx';
+import Counter from '../components/Counter.vue';
+import Chart from '../components/Chart.svelte';
+---
+
+<!-- Static by default — no JS shipped -->
+<h1>My Blog Post</h1>
+<p>This is static HTML with zero JavaScript.</p>
+
+<!-- Hydrate only when visible (lazy loading) -->
+<Newsletter client:visible />
+
+<!-- Hydrate on page load -->
+<Counter client:load />
+
+<!-- Hydrate only on interaction (click, hover) -->
+<Chart client:idle />
+
+<!-- Hydrate only on specific media query -->
+<MobileMenu client:media="(max-width: 768px)" />
+```
+
+#### 4. View Transitions
+
+```astro
+---
+// src/layouts/BaseLayout.astro
+import { ViewTransitions } from 'astro:transitions';
+---
+<html>
+  <head>
+    <ViewTransitions />
+  </head>
+  <body>
+    <nav transition:persist><!-- Persists across pages --></nav>
+    <main transition:animate="slide">
+      <slot />
+    </main>
+  </body>
+</html>
+```
+
+#### 5. Server Islands (Deferred Rendering)
+
+```astro
+---
+// Renders on the server, deferred from the initial page load
+// Great for personalized content in otherwise static pages
+---
+<UserGreeting server:defer>
+  <p slot="fallback">Loading...</p>
+</UserGreeting>
+```
+
+### Production Checklist
+- [ ] Content Collections with strict Zod schemas.
+- [ ] Sitemap integration enabled (`@astrojs/sitemap`).
+- [ ] Image optimization with `astro:assets`.
+- [ ] View Transitions for smooth page navigation.
+- [ ] Hybrid rendering (static + SSR where needed).
+- [ ] Deploy adapter configured (Vercel, Cloudflare, Node).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`seo`**: Kemampuan SEO bawaan Astro, sitemap, dan data terstruktur.
+- **`performance-web-vitals`**: Optimasi performa zero-JS-by-default Astro.
+- **`tailwind-expert`**: Integrasi Tailwind CSS v4 dengan Astro.
+- **`headless-cms-expert`**: Pengambilan konten dari Sanity/Payload/Strapi di Astro.
+
+### Deskripsi
+Panduan ahli untuk membangun website berperforma tinggi dan berfokus konten dengan Astro 5+. Mencakup Content Collections, Islands Architecture (partial hydration), View Transitions, rendering hybrid, integrasi MDX, Astro DB, dan dukungan multi-framework (React, Vue, Svelte dalam satu proyek).
+
+### Kondisi Pemicu
+- Membangun website berat konten (blog, docs, halaman marketing, portfolio).
+- Memilih antara Astro dan Next.js untuk proyek konten.
+- Mengimplementasikan partial hydration atau Islands Architecture.
+- Membuat situs dokumentasi atau landing page yang dioptimalkan untuk performa.