vibes-plug 2.11.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (181) hide show
  1. package/.claude/rules/vibes-plug-core.md +5 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +8 -3
  3. package/.cursorrules +9 -3
  4. package/AGENTS.md +25 -4
  5. package/CHANGELOG.md +151 -0
  6. package/CLAUDE.md +15 -8
  7. package/README.md +216 -641
  8. package/bin/vibes.mjs +1104 -0
  9. package/index.js +1 -1
  10. package/package.json +11 -3
  11. package/plugin.json +4 -3
  12. package/scripts/check-anti-slop.js +53 -0
  13. package/scripts/check-anti-slop.mjs +53 -0
  14. package/scripts/generate_swarm_gif.py +2 -2
  15. package/scripts/install.js +3 -1
  16. package/scripts/update_skills.js +1 -1
  17. package/scripts/update_skills.mjs +86 -0
  18. package/scripts/validate-skills.mjs +111 -0
  19. package/skills/accessibility-testing-expert/SKILL.md +117 -116
  20. package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
  21. package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
  22. package/skills/agentic-memory-architect/SKILL.md +52 -0
  23. package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
  24. package/skills/ai-llm-integration-expert/SKILL.md +330 -187
  25. package/skills/ai-media-generation-expert/SKILL.md +173 -172
  26. package/skills/ai-prompt-engineering-expert/SKILL.md +170 -50
  27. package/skills/ai-safety-governance-expert/SKILL.md +223 -0
  28. package/skills/angular-expert/SKILL.md +149 -148
  29. package/skills/anti-slop/SKILL.md +134 -0
  30. package/skills/api-design-expert/SKILL.md +4 -3
  31. package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
  32. package/skills/app-analyzer-optimizer/SKILL.md +4 -3
  33. package/skills/apple-ecosystem-expert/SKILL.md +6 -5
  34. package/skills/astro-framework-expert/SKILL.md +201 -200
  35. package/skills/async-queue-temporal-expert/SKILL.md +218 -240
  36. package/skills/authentication-identity-expert/SKILL.md +79 -184
  37. package/skills/autonomous-red-teamer/SKILL.md +338 -203
  38. package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
  39. package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
  40. package/skills/blockchain-web3-expert/SKILL.md +116 -115
  41. package/skills/brainstorming/SKILL.md +392 -377
  42. package/skills/browser-automation-expert/SKILL.md +260 -222
  43. package/skills/bun-runtime-expert/SKILL.md +5 -4
  44. package/skills/chatbot-messaging-expert/SKILL.md +115 -114
  45. package/skills/ci-cd-devops-architect/SKILL.md +3 -2
  46. package/skills/cloud-hosting-expert/SKILL.md +5 -4
  47. package/skills/coderabbit/SKILL.md +5 -4
  48. package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
  49. package/skills/composable-mach-architect/SKILL.md +338 -0
  50. package/skills/cron-scheduler-expert/SKILL.md +5 -4
  51. package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
  52. package/skills/data-telemetry-expert/SKILL.md +5 -4
  53. package/skills/data-visualization-expert/SKILL.md +155 -154
  54. package/skills/database-orm-expert/SKILL.md +102 -240
  55. package/skills/deep-research-analyst/SKILL.md +182 -0
  56. package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
  57. package/skills/design-system-architect/SKILL.md +34 -3
  58. package/skills/desktop-electron-expert/SKILL.md +129 -128
  59. package/skills/documentation-site-expert/SKILL.md +60 -59
  60. package/skills/doku-mcp-server/SKILL.md +5 -4
  61. package/skills/doku-payment-gateway/SKILL.md +250 -232
  62. package/skills/domain-driven-design-expert/SKILL.md +3 -2
  63. package/skills/e2e-testing-expert/SKILL.md +5 -4
  64. package/skills/ecommerce-expert/SKILL.md +88 -87
  65. package/skills/email-notification-expert/SKILL.md +35 -7
  66. package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
  67. package/skills/error-resilience-expert/SKILL.md +26 -4
  68. package/skills/event-driven-architect/SKILL.md +5 -4
  69. package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
  70. package/skills/file-upload-media-expert/SKILL.md +5 -4
  71. package/skills/firebase-security-expert/SKILL.md +5 -4
  72. package/skills/form-validation-expert/SKILL.md +7 -6
  73. package/skills/frontier-ai-models-expert/SKILL.md +116 -0
  74. package/skills/fullstack-expert/SKILL.md +68 -144
  75. package/skills/gemini-agent-booster/SKILL.md +248 -172
  76. package/skills/geospatial-maps-expert/SKILL.md +81 -80
  77. package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
  78. package/skills/glsl-shader-expert/SKILL.md +155 -71
  79. package/skills/go-programming-expert/SKILL.md +5 -4
  80. package/skills/graph-rag-knowledge-expert/SKILL.md +201 -159
  81. package/skills/graphql-apollo-expert/SKILL.md +5 -4
  82. package/skills/headless-cms-expert/SKILL.md +182 -181
  83. package/skills/hig/SKILL.md +5 -4
  84. package/skills/js-backend-expert/SKILL.md +219 -218
  85. package/skills/legacy-code-translator/SKILL.md +6 -5
  86. package/skills/llm-finops-router/SKILL.md +52 -0
  87. package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
  88. package/skills/logging-error-tracking-expert/SKILL.md +5 -4
  89. package/skills/mcp-server-architect/SKILL.md +316 -294
  90. package/skills/micro-frontend-architect/SKILL.md +5 -4
  91. package/skills/mobile-expo-expert/SKILL.md +5 -4
  92. package/skills/modern-css-native-expert/SKILL.md +190 -189
  93. package/skills/monorepo-architect/SKILL.md +5 -4
  94. package/skills/mpa-orchestrator/SKILL.md +41 -4
  95. package/skills/multi-agent-orchestration/SKILL.md +388 -254
  96. package/skills/mvc-expert/SKILL.md +5 -4
  97. package/skills/n8n-automation-expert/SKILL.md +90 -89
  98. package/skills/nextjs-app-router-expert/SKILL.md +3 -2
  99. package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
  100. package/skills/payment-gateway-expert/SKILL.md +131 -128
  101. package/skills/pdf-document-generation-expert/SKILL.md +92 -91
  102. package/skills/performance-web-vitals/SKILL.md +5 -4
  103. package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
  104. package/skills/prd-architect/SKILL.md +85 -109
  105. package/skills/proactive-background-watcher/SKILL.md +5 -4
  106. package/skills/production-ready-hardener/SKILL.md +25 -27
  107. package/skills/pwa-offline-first-expert/SKILL.md +227 -185
  108. package/skills/pydantic-ai-expert/SKILL.md +162 -0
  109. package/skills/python-programming-expert/SKILL.md +5 -4
  110. package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
  111. package/skills/realtime-collaboration-expert/SKILL.md +3 -2
  112. package/skills/rich-text-editor-expert/SKILL.md +178 -177
  113. package/skills/rust-programming-expert/SKILL.md +5 -4
  114. package/skills/saas-architect/SKILL.md +155 -0
  115. package/skills/saas-billing/SKILL.md +394 -382
  116. package/skills/saas-multi-tenant/SKILL.md +7 -6
  117. package/skills/scalability-clean-code/SKILL.md +5 -4
  118. package/skills/search-engine-expert/SKILL.md +90 -89
  119. package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
  120. package/skills/senior-frontend/SKILL.md +21 -18
  121. package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
  122. package/skills/seo/SKILL.md +4 -4
  123. package/skills/session-memory-manager/SKILL.md +129 -0
  124. package/skills/solidjs-expert/SKILL.md +81 -80
  125. package/skills/spa-orchestrator/SKILL.md +5 -4
  126. package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
  127. package/skills/state-management-expert/SKILL.md +5 -4
  128. package/skills/supabase-security-expert/SKILL.md +5 -4
  129. package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
  130. package/skills/svg-animation-motion-expert/SKILL.md +3 -2
  131. package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -0
  132. package/skills/tailwind-expert/SKILL.md +62 -5
  133. package/skills/tanstack-query-expert/SKILL.md +5 -4
  134. package/skills/tauri-expert/SKILL.md +5 -4
  135. package/skills/typescript-expert/SKILL.md +5 -4
  136. package/skills/ui-ux-pro-max/SKILL.md +7 -4
  137. package/skills/vector-db-rag-expert/SKILL.md +209 -208
  138. package/skills/vercel-ai-sdk-expert/SKILL.md +226 -0
  139. package/skills/voice-ai-realtime-agent/SKILL.md +243 -202
  140. package/skills/vue-frontend-expert/SKILL.md +5 -4
  141. package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
  142. package/skills/web-3d-graphics-expert/SKILL.md +259 -82
  143. package/skills/web-game-engine-expert/SKILL.md +278 -50
  144. package/skills/web-scraper/SKILL.md +158 -157
  145. package/skills/website-design-cloner/SKILL.md +5 -4
  146. package/skills/webxr-ar-vr-expert/SKILL.md +105 -65
  147. package/skills/wordpress-headless-expert/SKILL.md +145 -144
  148. package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
  149. package/skills/zero-to-prod-orchestrator/SKILL.md +281 -227
  150. package/skills/zero-trust-secret-vault/SKILL.md +3 -2
  151. package/BLUEPRINT.md +0 -309
  152. package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
  153. package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
  154. package/skills/asisten-ramah/SKILL.md +0 -47
  155. package/skills/auto-doc-updater/SKILL.md +0 -220
  156. package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
  157. package/skills/background-jobs-queue-expert/SKILL.md +0 -235
  158. package/skills/bootstrap-to-modern/SKILL.md +0 -94
  159. package/skills/database-migration-versioning-expert/SKILL.md +0 -90
  160. package/skills/edge-serverless-db-expert/SKILL.md +0 -99
  161. package/skills/mcp-client-orchestrator/SKILL.md +0 -76
  162. package/skills/mobile-push-notification-expert/SKILL.md +0 -71
  163. package/skills/monday-design-aesthetic/SKILL.md +0 -73
  164. package/skills/multiple-entry-points/SKILL.md +0 -91
  165. package/skills/project-context-mapper/SKILL.md +0 -85
  166. package/skills/saas-mvp-launcher/SKILL.md +0 -260
  167. package/skills/saas-transformer/SKILL.md +0 -500
  168. package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
  169. package/skills/secure-fuzz-testing/SKILL.md +0 -207
  170. package/skills/self-evolving-memory-graph/SKILL.md +0 -91
  171. package/skills/session-context-loader/SKILL.md +0 -83
  172. package/skills/session-handoff-resume/SKILL.md +0 -164
  173. package/skills/skill-baru/SKILL.md +0 -178
  174. package/skills/supabase-migration/SKILL.md +0 -91
  175. package/skills/token-saver/SKILL.md +0 -119
  176. package/skills/ui-components-expert/SKILL.md +0 -166
  177. package/skills/vibe-code-gardener/SKILL.md +0 -181
  178. package/skills/visual-qa-vision-agent/SKILL.md +0 -71
  179. /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
  180. /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
  181. /package/skills/{saas-transformer → saas-architect}/scripts/saas_transformation_scanner.py +0 -0
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: api-design-expert
3
3
  description: "Expert guide for designing robust APIs: REST best practices, GraphQL, gRPC, tRPC, OpenAPI/Swagger, API versioning, rate limiting, and contract-first design / Panduan ahli untuk merancang API yang kuat: praktik terbaik REST, GraphQL, gRPC, tRPC, OpenAPI/Swagger, versioning API, rate limiting, dan desain contract-first."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # API Design Expert
@@ -283,7 +284,7 @@ components:
283
284
  ## Bahasa Indonesia
284
285
 
285
286
  ### Integrasi Orkestrasi
286
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
287
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
287
288
 
288
289
  ### Deskripsi
289
290
  Panduan ahli untuk merancang, mendokumentasikan, dan mengembangkan API berkualitas produksi. Mencakup pemodelan resource **REST** dan semantik HTTP, desain skema **GraphQL**, **gRPC** dengan protobuf, dan **tRPC** untuk API end-to-end type-safe di TypeScript. Termasuk dokumentasi OpenAPI 3.1, strategi versioning API, rate limiting, idempotency, dan alur kerja contract-first.
@@ -314,4 +315,4 @@ Panduan ahli untuk merancang, mendokumentasikan, dan mengembangkan API berkualit
314
315
 
315
316
 
316
317
  ## Orchestration & Integration
317
- - Connects to other backend skills as part of the orchestration flow.
318
+ - Connects to other backend skills as part of the orchestration flow.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: api-gateway-proxy-expert
3
3
  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."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # API Gateway & Reverse Proxy Expert
@@ -78,4 +79,4 @@ Jangan biarkan klien (frontend/mobile) memanggil microservices secara langsung.
78
79
 
79
80
  ## Integrasi Orkestrasi
80
81
  - Berada di depan service yang dibangun dengan `js-backend-expert`, `go-programming-expert`, atau `rust-programming-expert`.
81
- - Bekerja sama dengan `ci-cd-devops-architect` untuk konfigurasi Ingress Kubernetes atau Docker Compose.
82
+ - Bekerja sama dengan `ci-cd-devops-architect` untuk konfigurasi Ingress Kubernetes atau Docker Compose.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: app-analyzer-optimizer
3
3
  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."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # App Analyzer & Optimizer (2026 Edition)
@@ -147,7 +148,7 @@ go tool pprof -http=:8080 profile.out
147
148
  ## Bahasa Indonesia
148
149
 
149
150
  ### Integrasi Orkestrasi
150
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
151
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
151
152
 
152
153
  ### Deskripsi
153
154
  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.
@@ -193,4 +194,4 @@ Gunakan CodeRabbit untuk review PR otomatis, Sourcegraph Cody untuk pencarian se
193
194
 
194
195
 
195
196
  ## Orchestration & Integration
196
- - Integrates with performance-web-vitals and production-ready-hardener.
197
+ - Integrates with performance-web-vitals and production-ready-hardener.
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  name: apple-ecosystem-expert
3
3
  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)."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
5
6
  ---
6
7
 
7
8
  # Apple Ecosystem Expert — vibes-plug Skill
@@ -89,7 +90,7 @@ This skill works best when combined with:
89
90
  - `hig` — For detailed implementation of Apple Human Interface Guidelines styling.
90
91
  - `mobile-expo-expert` — When building React Native/Expo apps for iOS.
91
92
  - `tailwind-expert` — To apply CSS adjustments like `dvh` and safe-areas using Tailwind utility classes.
92
- - `ui-components-expert` — To ensure UI components are sized correctly for iOS touch targets (44x44).
93
+ - `design-system-architect, senior-frontend` — To ensure UI components are sized correctly for iOS touch targets (44x44).
93
94
 
94
95
  ### Referenced By Orchestrators (MANDATORY)
95
96
 
@@ -104,7 +105,7 @@ This skill should be referenced by the following orchestrators:
104
105
  ## Bahasa Indonesia
105
106
 
106
107
  ### Integrasi Orkestrasi
107
- Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
108
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
108
109
 
109
110
  ### Deskripsi
110
111
  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.
@@ -141,5 +142,5 @@ Skill ini harus direferensikan oleh orchestrator berikut:
141
142
 
142
143
 
143
144
  ## Orchestration & Integration
144
- - Integrates with: `hig`, `mobile-expo-expert`, `tailwind-expert`, `ui-components-expert`.
145
- - Orchestrated by: `brainstorming`, `zero-to-prod-orchestrator`, `production-ready-hardener`.
145
+ - Integrates with: `hig`, `mobile-expo-expert`, `tailwind-expert`, `design-system-architect, senior-frontend`.
146
+ - Orchestrated by: `brainstorming`, `zero-to-prod-orchestrator`, `production-ready-hardener`.
@@ -1,200 +1,201 @@
1
- ---
2
- name: astro-framework-expert
3
- 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."
4
- author: "Roedy Rustam"
5
- ---
6
-
7
- # Astro Framework Expert (2026 Edition)
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Orchestration & Integration
17
- - **`seo`**: Astro's built-in SEO capabilities, sitemaps, and structured data.
18
- - **`performance-web-vitals`**: Astro's zero-JS-by-default performance optimization.
19
- - **`tailwind-expert`**: Tailwind CSS v4 integration with Astro.
20
- - **`headless-cms-expert`**: Content fetching from Sanity/Payload/Strapi in Astro.
21
- - **`ci-cd-devops-architect`**: Deploying Astro to Vercel, Cloudflare Pages, or Netlify.
22
-
23
- ### Description
24
- 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).
25
-
26
- ### Trigger Conditions
27
- - Building content-heavy websites (blogs, docs, marketing pages, portfolios).
28
- - Choosing between Astro and Next.js for a content-first project.
29
- - Implementing partial hydration or Islands Architecture.
30
- - Creating documentation sites or landing pages optimized for performance.
31
- - Using multiple UI frameworks (React + Vue + Svelte) in one project.
32
-
33
- ---
34
-
35
- ### Core Concepts
36
-
37
- #### Astro vs Next.js Decision Guide
38
-
39
- | Criteria | Astro 5 | Next.js 15 |
40
- |----------|---------|------------|
41
- | Primary Focus | Content sites | Full-stack apps |
42
- | Default JS Shipped | 0 KB | React runtime |
43
- | Rendering | Static-first, opt-in SSR | SSR-first, opt-in static |
44
- | Multi-framework | ✅ React, Vue, Svelte, Solid | React only |
45
- | Content Collections | ✅ Built-in, type-safe | Manual with MDX |
46
- | Server Islands | ✅ Deferred rendering | PPR (similar) |
47
- | **Choose When** | Content, SEO, speed critical | Complex interactivity |
48
-
49
- **Recommendation:** Choose **Astro** for content-driven sites where performance and SEO are top priorities. Choose **Next.js** for interactive web applications with complex state.
50
-
51
- #### 1. Project Setup
52
-
53
- ```bash
54
- # Create new Astro project
55
- npm create astro@latest ./my-site -- --template blog --typescript strict
56
-
57
- # Add integrations
58
- npx astro add tailwind react mdx sitemap
59
- ```
60
-
61
- #### 2. Content Collections (Type-Safe Content)
62
-
63
- ```typescript
64
- // src/content/config.ts
65
- import { defineCollection, z } from 'astro:content';
66
-
67
- const blog = defineCollection({
68
- type: 'content', // Markdown/MDX files
69
- schema: z.object({
70
- title: z.string(),
71
- description: z.string(),
72
- pubDate: z.coerce.date(),
73
- heroImage: z.string().optional(),
74
- tags: z.array(z.string()).default([]),
75
- draft: z.boolean().default(false),
76
- }),
77
- });
78
-
79
- const authors = defineCollection({
80
- type: 'data', // JSON/YAML files
81
- schema: z.object({
82
- name: z.string(),
83
- avatar: z.string(),
84
- bio: z.string(),
85
- }),
86
- });
87
-
88
- export const collections = { blog, authors };
89
- ```
90
-
91
- ```astro
92
- ---
93
- // src/pages/blog/[...slug].astro
94
- import { getCollection } from 'astro:content';
95
-
96
- export async function getStaticPaths() {
97
- const posts = await getCollection('blog', ({ data }) => !data.draft);
98
- return posts.map((post) => ({
99
- params: { slug: post.slug },
100
- props: { post },
101
- }));
102
- }
103
-
104
- const { post } = Astro.props;
105
- const { Content } = await post.render();
106
- ---
107
-
108
- <article>
109
- <h1>{post.data.title}</h1>
110
- <time>{post.data.pubDate.toLocaleDateString()}</time>
111
- <Content />
112
- </article>
113
- ```
114
-
115
- #### 3. Islands Architecture (Partial Hydration)
116
-
117
- ```astro
118
- ---
119
- // Only hydrate interactive components — rest ships as 0 JS
120
- import Newsletter from '../components/Newsletter.tsx';
121
- import Counter from '../components/Counter.vue';
122
- import Chart from '../components/Chart.svelte';
123
- ---
124
-
125
- <!-- Static by default — no JS shipped -->
126
- <h1>My Blog Post</h1>
127
- <p>This is static HTML with zero JavaScript.</p>
128
-
129
- <!-- Hydrate only when visible (lazy loading) -->
130
- <Newsletter client:visible />
131
-
132
- <!-- Hydrate on page load -->
133
- <Counter client:load />
134
-
135
- <!-- Hydrate only on interaction (click, hover) -->
136
- <Chart client:idle />
137
-
138
- <!-- Hydrate only on specific media query -->
139
- <MobileMenu client:media="(max-width: 768px)" />
140
- ```
141
-
142
- #### 4. View Transitions
143
-
144
- ```astro
145
- ---
146
- // src/layouts/BaseLayout.astro
147
- import { ViewTransitions } from 'astro:transitions';
148
- ---
149
- <html>
150
- <head>
151
- <ViewTransitions />
152
- </head>
153
- <body>
154
- <nav transition:persist><!-- Persists across pages --></nav>
155
- <main transition:animate="slide">
156
- <slot />
157
- </main>
158
- </body>
159
- </html>
160
- ```
161
-
162
- #### 5. Server Islands (Deferred Rendering)
163
-
164
- ```astro
165
- ---
166
- // Renders on the server, deferred from the initial page load
167
- // Great for personalized content in otherwise static pages
168
- ---
169
- <UserGreeting server:defer>
170
- <p slot="fallback">Loading...</p>
171
- </UserGreeting>
172
- ```
173
-
174
- ### Production Checklist
175
- - [ ] Content Collections with strict Zod schemas.
176
- - [ ] Sitemap integration enabled (`@astrojs/sitemap`).
177
- - [ ] Image optimization with `astro:assets`.
178
- - [ ] View Transitions for smooth page navigation.
179
- - [ ] Hybrid rendering (static + SSR where needed).
180
- - [ ] Deploy adapter configured (Vercel, Cloudflare, Node).
181
-
182
- ---
183
-
184
- <a name="bahasa-indonesia"></a>
185
- ## Bahasa Indonesia
186
-
187
- ### Integrasi Orkestrasi
188
- - **`seo`**: Kemampuan SEO bawaan Astro, sitemap, dan data terstruktur.
189
- - **`performance-web-vitals`**: Optimasi performa zero-JS-by-default Astro.
190
- - **`tailwind-expert`**: Integrasi Tailwind CSS v4 dengan Astro.
191
- - **`headless-cms-expert`**: Pengambilan konten dari Sanity/Payload/Strapi di Astro.
192
-
193
- ### Deskripsi
194
- 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).
195
-
196
- ### Kondisi Pemicu
197
- - Membangun website berat konten (blog, docs, halaman marketing, portfolio).
198
- - Memilih antara Astro dan Next.js untuk proyek konten.
199
- - Mengimplementasikan partial hydration atau Islands Architecture.
200
- - Membuat situs dokumentasi atau landing page yang dioptimalkan untuk performa.
1
+ ---
2
+ name: astro-framework-expert
3
+ 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."
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # Astro Framework Expert (2026 Edition)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Orchestration & Integration
18
+ - **`seo`**: Astro's built-in SEO capabilities, sitemaps, and structured data.
19
+ - **`performance-web-vitals`**: Astro's zero-JS-by-default performance optimization.
20
+ - **`tailwind-expert`**: Tailwind CSS v4 integration with Astro.
21
+ - **`headless-cms-expert`**: Content fetching from Sanity/Payload/Strapi in Astro.
22
+ - **`ci-cd-devops-architect`**: Deploying Astro to Vercel, Cloudflare Pages, or Netlify.
23
+
24
+ ### Description
25
+ 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).
26
+
27
+ ### Trigger Conditions
28
+ - Building content-heavy websites (blogs, docs, marketing pages, portfolios).
29
+ - Choosing between Astro and Next.js for a content-first project.
30
+ - Implementing partial hydration or Islands Architecture.
31
+ - Creating documentation sites or landing pages optimized for performance.
32
+ - Using multiple UI frameworks (React + Vue + Svelte) in one project.
33
+
34
+ ---
35
+
36
+ ### Core Concepts
37
+
38
+ #### Astro vs Next.js Decision Guide
39
+
40
+ | Criteria | Astro 5 | Next.js 15 |
41
+ |----------|---------|------------|
42
+ | Primary Focus | Content sites | Full-stack apps |
43
+ | Default JS Shipped | 0 KB | React runtime |
44
+ | Rendering | Static-first, opt-in SSR | SSR-first, opt-in static |
45
+ | Multi-framework | ✅ React, Vue, Svelte, Solid | React only |
46
+ | Content Collections | ✅ Built-in, type-safe | Manual with MDX |
47
+ | Server Islands | ✅ Deferred rendering | PPR (similar) |
48
+ | **Choose When** | Content, SEO, speed critical | Complex interactivity |
49
+
50
+ **Recommendation:** Choose **Astro** for content-driven sites where performance and SEO are top priorities. Choose **Next.js** for interactive web applications with complex state.
51
+
52
+ #### 1. Project Setup
53
+
54
+ ```bash
55
+ # Create new Astro project
56
+ npm create astro@latest ./my-site -- --template blog --typescript strict
57
+
58
+ # Add integrations
59
+ npx astro add tailwind react mdx sitemap
60
+ ```
61
+
62
+ #### 2. Content Collections (Type-Safe Content)
63
+
64
+ ```typescript
65
+ // src/content/config.ts
66
+ import { defineCollection, z } from 'astro:content';
67
+
68
+ const blog = defineCollection({
69
+ type: 'content', // Markdown/MDX files
70
+ schema: z.object({
71
+ title: z.string(),
72
+ description: z.string(),
73
+ pubDate: z.coerce.date(),
74
+ heroImage: z.string().optional(),
75
+ tags: z.array(z.string()).default([]),
76
+ draft: z.boolean().default(false),
77
+ }),
78
+ });
79
+
80
+ const authors = defineCollection({
81
+ type: 'data', // JSON/YAML files
82
+ schema: z.object({
83
+ name: z.string(),
84
+ avatar: z.string(),
85
+ bio: z.string(),
86
+ }),
87
+ });
88
+
89
+ export const collections = { blog, authors };
90
+ ```
91
+
92
+ ```astro
93
+ ---
94
+ // src/pages/blog/[...slug].astro
95
+ import { getCollection } from 'astro:content';
96
+
97
+ export async function getStaticPaths() {
98
+ const posts = await getCollection('blog', ({ data }) => !data.draft);
99
+ return posts.map((post) => ({
100
+ params: { slug: post.slug },
101
+ props: { post },
102
+ }));
103
+ }
104
+
105
+ const { post } = Astro.props;
106
+ const { Content } = await post.render();
107
+ ---
108
+
109
+ <article>
110
+ <h1>{post.data.title}</h1>
111
+ <time>{post.data.pubDate.toLocaleDateString()}</time>
112
+ <Content />
113
+ </article>
114
+ ```
115
+
116
+ #### 3. Islands Architecture (Partial Hydration)
117
+
118
+ ```astro
119
+ ---
120
+ // Only hydrate interactive components — rest ships as 0 JS
121
+ import Newsletter from '../components/Newsletter.tsx';
122
+ import Counter from '../components/Counter.vue';
123
+ import Chart from '../components/Chart.svelte';
124
+ ---
125
+
126
+ <!-- Static by default — no JS shipped -->
127
+ <h1>My Blog Post</h1>
128
+ <p>This is static HTML with zero JavaScript.</p>
129
+
130
+ <!-- Hydrate only when visible (lazy loading) -->
131
+ <Newsletter client:visible />
132
+
133
+ <!-- Hydrate on page load -->
134
+ <Counter client:load />
135
+
136
+ <!-- Hydrate only on interaction (click, hover) -->
137
+ <Chart client:idle />
138
+
139
+ <!-- Hydrate only on specific media query -->
140
+ <MobileMenu client:media="(max-width: 768px)" />
141
+ ```
142
+
143
+ #### 4. View Transitions
144
+
145
+ ```astro
146
+ ---
147
+ // src/layouts/BaseLayout.astro
148
+ import { ViewTransitions } from 'astro:transitions';
149
+ ---
150
+ <html>
151
+ <head>
152
+ <ViewTransitions />
153
+ </head>
154
+ <body>
155
+ <nav transition:persist><!-- Persists across pages --></nav>
156
+ <main transition:animate="slide">
157
+ <slot />
158
+ </main>
159
+ </body>
160
+ </html>
161
+ ```
162
+
163
+ #### 5. Server Islands (Deferred Rendering)
164
+
165
+ ```astro
166
+ ---
167
+ // Renders on the server, deferred from the initial page load
168
+ // Great for personalized content in otherwise static pages
169
+ ---
170
+ <UserGreeting server:defer>
171
+ <p slot="fallback">Loading...</p>
172
+ </UserGreeting>
173
+ ```
174
+
175
+ ### Production Checklist
176
+ - [ ] Content Collections with strict Zod schemas.
177
+ - [ ] Sitemap integration enabled (`@astrojs/sitemap`).
178
+ - [ ] Image optimization with `astro:assets`.
179
+ - [ ] View Transitions for smooth page navigation.
180
+ - [ ] Hybrid rendering (static + SSR where needed).
181
+ - [ ] Deploy adapter configured (Vercel, Cloudflare, Node).
182
+
183
+ ---
184
+
185
+ <a name="bahasa-indonesia"></a>
186
+ ## Bahasa Indonesia
187
+
188
+ ### Integrasi Orkestrasi
189
+ - **`seo`**: Kemampuan SEO bawaan Astro, sitemap, dan data terstruktur.
190
+ - **`performance-web-vitals`**: Optimasi performa zero-JS-by-default Astro.
191
+ - **`tailwind-expert`**: Integrasi Tailwind CSS v4 dengan Astro.
192
+ - **`headless-cms-expert`**: Pengambilan konten dari Sanity/Payload/Strapi di Astro.
193
+
194
+ ### Deskripsi
195
+ 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).
196
+
197
+ ### Kondisi Pemicu
198
+ - Membangun website berat konten (blog, docs, halaman marketing, portfolio).
199
+ - Memilih antara Astro dan Next.js untuk proyek konten.
200
+ - Mengimplementasikan partial hydration atau Islands Architecture.
201
+ - Membuat situs dokumentasi atau landing page yang dioptimalkan untuk performa.