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