vibes-plug 2.14.1 → 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 (151) hide show
  1. package/.claude/rules/vibes-plug-core.md +5 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +7 -2
  3. package/.cursorrules +8 -2
  4. package/AGENTS.md +23 -2
  5. package/CHANGELOG.md +114 -0
  6. package/CLAUDE.md +10 -3
  7. package/README.md +216 -611
  8. package/bin/vibes.mjs +1104 -0
  9. package/package.json +11 -3
  10. package/plugin.json +4 -3
  11. package/scripts/check-anti-slop.mjs +53 -0
  12. package/scripts/install.js +3 -1
  13. package/scripts/update_skills.js +1 -1
  14. package/scripts/update_skills.mjs +86 -0
  15. package/scripts/validate-skills.mjs +111 -0
  16. package/skills/accessibility-testing-expert/SKILL.md +117 -116
  17. package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
  18. package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
  19. package/skills/agentic-memory-architect/SKILL.md +52 -0
  20. package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
  21. package/skills/ai-llm-integration-expert/SKILL.md +330 -194
  22. package/skills/ai-media-generation-expert/SKILL.md +173 -172
  23. package/skills/ai-prompt-engineering-expert/SKILL.md +204 -134
  24. package/skills/ai-safety-governance-expert/SKILL.md +223 -0
  25. package/skills/angular-expert/SKILL.md +149 -148
  26. package/skills/anti-slop/SKILL.md +134 -133
  27. package/skills/api-design-expert/SKILL.md +4 -3
  28. package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
  29. package/skills/app-analyzer-optimizer/SKILL.md +4 -3
  30. package/skills/apple-ecosystem-expert/SKILL.md +6 -5
  31. package/skills/astro-framework-expert/SKILL.md +201 -200
  32. package/skills/async-queue-temporal-expert/SKILL.md +218 -217
  33. package/skills/authentication-identity-expert/SKILL.md +174 -173
  34. package/skills/autonomous-red-teamer/SKILL.md +338 -203
  35. package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
  36. package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
  37. package/skills/blockchain-web3-expert/SKILL.md +116 -115
  38. package/skills/brainstorming/SKILL.md +392 -377
  39. package/skills/browser-automation-expert/SKILL.md +260 -222
  40. package/skills/bun-runtime-expert/SKILL.md +5 -4
  41. package/skills/chatbot-messaging-expert/SKILL.md +115 -114
  42. package/skills/ci-cd-devops-architect/SKILL.md +3 -2
  43. package/skills/cloud-hosting-expert/SKILL.md +5 -4
  44. package/skills/coderabbit/SKILL.md +5 -4
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
  46. package/skills/composable-mach-architect/SKILL.md +338 -0
  47. package/skills/cron-scheduler-expert/SKILL.md +5 -4
  48. package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
  49. package/skills/data-telemetry-expert/SKILL.md +5 -4
  50. package/skills/data-visualization-expert/SKILL.md +155 -154
  51. package/skills/database-orm-expert/SKILL.md +166 -165
  52. package/skills/deep-research-analyst/SKILL.md +182 -136
  53. package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
  54. package/skills/design-system-architect/SKILL.md +4 -3
  55. package/skills/desktop-electron-expert/SKILL.md +129 -128
  56. package/skills/documentation-site-expert/SKILL.md +60 -59
  57. package/skills/doku-mcp-server/SKILL.md +5 -4
  58. package/skills/doku-payment-gateway/SKILL.md +250 -232
  59. package/skills/domain-driven-design-expert/SKILL.md +3 -2
  60. package/skills/e2e-testing-expert/SKILL.md +5 -4
  61. package/skills/ecommerce-expert/SKILL.md +88 -87
  62. package/skills/email-notification-expert/SKILL.md +5 -4
  63. package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
  64. package/skills/error-resilience-expert/SKILL.md +14 -13
  65. package/skills/event-driven-architect/SKILL.md +5 -4
  66. package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
  67. package/skills/file-upload-media-expert/SKILL.md +5 -4
  68. package/skills/firebase-security-expert/SKILL.md +5 -4
  69. package/skills/form-validation-expert/SKILL.md +7 -6
  70. package/skills/frontier-ai-models-expert/SKILL.md +116 -0
  71. package/skills/fullstack-expert/SKILL.md +185 -184
  72. package/skills/gemini-agent-booster/SKILL.md +248 -172
  73. package/skills/geospatial-maps-expert/SKILL.md +81 -80
  74. package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
  75. package/skills/glsl-shader-expert/SKILL.md +191 -190
  76. package/skills/go-programming-expert/SKILL.md +5 -4
  77. package/skills/graph-rag-knowledge-expert/SKILL.md +201 -200
  78. package/skills/graphql-apollo-expert/SKILL.md +5 -4
  79. package/skills/headless-cms-expert/SKILL.md +182 -181
  80. package/skills/hig/SKILL.md +5 -4
  81. package/skills/js-backend-expert/SKILL.md +219 -218
  82. package/skills/legacy-code-translator/SKILL.md +6 -5
  83. package/skills/llm-finops-router/SKILL.md +52 -0
  84. package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
  85. package/skills/logging-error-tracking-expert/SKILL.md +5 -4
  86. package/skills/mcp-server-architect/SKILL.md +315 -307
  87. package/skills/micro-frontend-architect/SKILL.md +5 -4
  88. package/skills/mobile-expo-expert/SKILL.md +5 -4
  89. package/skills/modern-css-native-expert/SKILL.md +190 -189
  90. package/skills/monorepo-architect/SKILL.md +5 -4
  91. package/skills/mpa-orchestrator/SKILL.md +41 -4
  92. package/skills/multi-agent-orchestration/SKILL.md +388 -254
  93. package/skills/mvc-expert/SKILL.md +5 -4
  94. package/skills/n8n-automation-expert/SKILL.md +90 -89
  95. package/skills/nextjs-app-router-expert/SKILL.md +3 -2
  96. package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
  97. package/skills/payment-gateway-expert/SKILL.md +131 -128
  98. package/skills/pdf-document-generation-expert/SKILL.md +92 -91
  99. package/skills/performance-web-vitals/SKILL.md +5 -4
  100. package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
  101. package/skills/prd-architect/SKILL.md +183 -182
  102. package/skills/proactive-background-watcher/SKILL.md +5 -4
  103. package/skills/production-ready-hardener/SKILL.md +10 -9
  104. package/skills/pwa-offline-first-expert/SKILL.md +227 -226
  105. package/skills/pydantic-ai-expert/SKILL.md +162 -161
  106. package/skills/python-programming-expert/SKILL.md +5 -4
  107. package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
  108. package/skills/realtime-collaboration-expert/SKILL.md +3 -2
  109. package/skills/rich-text-editor-expert/SKILL.md +178 -177
  110. package/skills/rust-programming-expert/SKILL.md +5 -4
  111. package/skills/saas-architect/SKILL.md +155 -154
  112. package/skills/saas-billing/SKILL.md +394 -382
  113. package/skills/saas-multi-tenant/SKILL.md +7 -6
  114. package/skills/scalability-clean-code/SKILL.md +5 -4
  115. package/skills/search-engine-expert/SKILL.md +90 -89
  116. package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
  117. package/skills/senior-frontend/SKILL.md +14 -9
  118. package/skills/seo/SKILL.md +4 -4
  119. package/skills/session-memory-manager/SKILL.md +129 -128
  120. package/skills/solidjs-expert/SKILL.md +81 -80
  121. package/skills/spa-orchestrator/SKILL.md +5 -4
  122. package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
  123. package/skills/state-management-expert/SKILL.md +5 -4
  124. package/skills/supabase-security-expert/SKILL.md +5 -4
  125. package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
  126. package/skills/svg-animation-motion-expert/SKILL.md +3 -2
  127. package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -155
  128. package/skills/tailwind-expert/SKILL.md +62 -5
  129. package/skills/tanstack-query-expert/SKILL.md +5 -4
  130. package/skills/tauri-expert/SKILL.md +5 -4
  131. package/skills/typescript-expert/SKILL.md +5 -4
  132. package/skills/ui-ux-pro-max/SKILL.md +7 -6
  133. package/skills/vector-db-rag-expert/SKILL.md +209 -208
  134. package/skills/vercel-ai-sdk-expert/SKILL.md +226 -181
  135. package/skills/voice-ai-realtime-agent/SKILL.md +243 -242
  136. package/skills/vue-frontend-expert/SKILL.md +5 -4
  137. package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
  138. package/skills/web-3d-graphics-expert/SKILL.md +314 -313
  139. package/skills/web-game-engine-expert/SKILL.md +330 -329
  140. package/skills/web-scraper/SKILL.md +158 -157
  141. package/skills/website-design-cloner/SKILL.md +5 -4
  142. package/skills/webxr-ar-vr-expert/SKILL.md +163 -162
  143. package/skills/wordpress-headless-expert/SKILL.md +145 -144
  144. package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
  145. package/skills/zero-to-prod-orchestrator/SKILL.md +281 -229
  146. package/skills/zero-trust-secret-vault/SKILL.md +3 -2
  147. package/BLUEPRINT.md +0 -319
  148. package/skills/bootstrap-to-modern/SKILL.md +0 -94
  149. package/skills/multiple-entry-points/SKILL.md +0 -91
  150. package/skills/secure-fuzz-testing/SKILL.md +0 -207
  151. package/skills/visual-qa-vision-agent/SKILL.md +0 -71
@@ -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.