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.
- package/.claude/rules/vibes-plug-core.md +5 -0
- package/.cursor/rules/vibes-plug-core.mdc +8 -3
- package/.cursorrules +9 -3
- package/AGENTS.md +25 -4
- package/CHANGELOG.md +151 -0
- package/CLAUDE.md +15 -8
- package/README.md +216 -641
- package/bin/vibes.mjs +1104 -0
- package/index.js +1 -1
- package/package.json +11 -3
- package/plugin.json +4 -3
- package/scripts/check-anti-slop.js +53 -0
- package/scripts/check-anti-slop.mjs +53 -0
- package/scripts/generate_swarm_gif.py +2 -2
- 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 -187
- package/skills/ai-media-generation-expert/SKILL.md +173 -172
- package/skills/ai-prompt-engineering-expert/SKILL.md +170 -50
- 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 -0
- 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 -240
- package/skills/authentication-identity-expert/SKILL.md +79 -184
- 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 +102 -240
- package/skills/deep-research-analyst/SKILL.md +182 -0
- package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
- package/skills/design-system-architect/SKILL.md +34 -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 +35 -7
- package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
- package/skills/error-resilience-expert/SKILL.md +26 -4
- 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 +68 -144
- 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 +155 -71
- package/skills/go-programming-expert/SKILL.md +5 -4
- package/skills/graph-rag-knowledge-expert/SKILL.md +201 -159
- 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 +316 -294
- 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 +85 -109
- package/skills/proactive-background-watcher/SKILL.md +5 -4
- package/skills/production-ready-hardener/SKILL.md +25 -27
- package/skills/pwa-offline-first-expert/SKILL.md +227 -185
- package/skills/pydantic-ai-expert/SKILL.md +162 -0
- 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 -0
- 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 +21 -18
- package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
- package/skills/seo/SKILL.md +4 -4
- package/skills/session-memory-manager/SKILL.md +129 -0
- 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 -0
- 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 -4
- package/skills/vector-db-rag-expert/SKILL.md +209 -208
- package/skills/vercel-ai-sdk-expert/SKILL.md +226 -0
- package/skills/voice-ai-realtime-agent/SKILL.md +243 -202
- 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 +259 -82
- package/skills/web-game-engine-expert/SKILL.md +278 -50
- 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 +105 -65
- 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 -227
- package/skills/zero-trust-secret-vault/SKILL.md +3 -2
- package/BLUEPRINT.md +0 -309
- package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
- package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
- package/skills/asisten-ramah/SKILL.md +0 -47
- package/skills/auto-doc-updater/SKILL.md +0 -220
- package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
- package/skills/background-jobs-queue-expert/SKILL.md +0 -235
- package/skills/bootstrap-to-modern/SKILL.md +0 -94
- package/skills/database-migration-versioning-expert/SKILL.md +0 -90
- package/skills/edge-serverless-db-expert/SKILL.md +0 -99
- package/skills/mcp-client-orchestrator/SKILL.md +0 -76
- package/skills/mobile-push-notification-expert/SKILL.md +0 -71
- package/skills/monday-design-aesthetic/SKILL.md +0 -73
- package/skills/multiple-entry-points/SKILL.md +0 -91
- package/skills/project-context-mapper/SKILL.md +0 -85
- package/skills/saas-mvp-launcher/SKILL.md +0 -260
- package/skills/saas-transformer/SKILL.md +0 -500
- package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
- package/skills/secure-fuzz-testing/SKILL.md +0 -207
- package/skills/self-evolving-memory-graph/SKILL.md +0 -91
- package/skills/session-context-loader/SKILL.md +0 -83
- package/skills/session-handoff-resume/SKILL.md +0 -164
- package/skills/skill-baru/SKILL.md +0 -178
- package/skills/supabase-migration/SKILL.md +0 -91
- package/skills/token-saver/SKILL.md +0 -119
- package/skills/ui-components-expert/SKILL.md +0 -166
- package/skills/vibe-code-gardener/SKILL.md +0 -181
- package/skills/visual-qa-vision-agent/SKILL.md +0 -71
- /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
- /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
- /package/skills/{saas-transformer → saas-architect}/scripts/saas_transformation_scanner.py +0 -0
|
@@ -1,231 +1,285 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: zero-to-prod-orchestrator
|
|
3
|
-
description: "Master orchestrator to build an application from scratch to a production-ready release, enforcing strict step-by-step progression and continuous documentation / Orkestrator utama untuk membangun aplikasi dari nol hingga rilis siap produksi dengan dokumentasi bertahap."
|
|
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
|
-
- [ ] Implement
|
|
88
|
-
- [ ]
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
- [ ]
|
|
94
|
-
- [ ]
|
|
95
|
-
- [ ]
|
|
96
|
-
- [ ] Implement
|
|
97
|
-
- [ ] Set up
|
|
98
|
-
- [ ]
|
|
99
|
-
- [ ]
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
- [ ]
|
|
106
|
-
- [ ]
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
- [ ]
|
|
111
|
-
- [ ]
|
|
112
|
-
- [ ]
|
|
113
|
-
- [ ]
|
|
114
|
-
- [ ]
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
- [ ]
|
|
201
|
-
- [ ]
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
- [ ]
|
|
207
|
-
- [ ]
|
|
208
|
-
- [ ]
|
|
209
|
-
|
|
210
|
-
|
|
1
|
+
---
|
|
2
|
+
name: zero-to-prod-orchestrator
|
|
3
|
+
description: "Master orchestrator to build an application from scratch to a production-ready release, enforcing strict step-by-step progression and continuous documentation / Orkestrator utama untuk membangun aplikasi dari nol hingga rilis siap produksi dengan dokumentasi bertahap."
|
|
4
|
+
author: "Roedy Rustam"
|
|
5
|
+
version: "4.0.0"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Zero to Production Orchestrator (2026 Master Edition)
|
|
9
|
+
|
|
10
|
+
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
<a name="english"></a>
|
|
15
|
+
## English
|
|
16
|
+
|
|
17
|
+
### Orchestration & Integration
|
|
18
|
+
Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
|
|
19
|
+
|
|
20
|
+
### Overview
|
|
21
|
+
The **Zero to Production Orchestrator** is the ultimate master skill designed to orchestrate the entire `vibes-plug` ecosystem as a highly interconnected **engineering swarm**. By acting as the central conductor, it ensures that no sub-skill is executed in isolation. It guides fullstack developers through the complete software engineering lifecycle — from concept discovery to AI integration, multi-platform backend architecture, design systems, automated testing, GEO/AEO optimization, and production deployment.
|
|
22
|
+
|
|
23
|
+
### Trigger Conditions
|
|
24
|
+
- Starting any new application development from scratch.
|
|
25
|
+
- Asking for a complete, end-to-end fullstack development roadmap.
|
|
26
|
+
- Orchestrating multiple domain skills across UI, Backend, AI/LLM, Database, Security, and Cloud.
|
|
27
|
+
|
|
28
|
+
### Core Principles & Hard Gates
|
|
29
|
+
1. **Never Skip Phases**: Each phase must be completed and validated before advancing to the next.
|
|
30
|
+
2. **Continuous Auto-Documentation**: Invoke `prd-architect` to log changes in `CHANGELOG.md` and `BLUEPRINT.md` after every major milestone.
|
|
31
|
+
3. **Strict Progress Tracking**: Maintain a `PROGRESS.md` checklist in the repository root.
|
|
32
|
+
4. **State Preservation & Context**: Utilize `session-memory-manager` when pausing work or starting a new session to preserve full context.
|
|
33
|
+
5. **Efficiency**: Keep `anti-slop` active during large refactors to maintain a lean, powerful, and zero-placeholder execution loop.
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
### 🐝 Swarm Execution Topologies & Subagent Delegation Protocols (2026 Master)
|
|
38
|
+
|
|
39
|
+
Whenever executing complex multi-domain phases, the Orchestrator MUST act as **Swarm Director** and delegate to specialized subagents in parallel:
|
|
40
|
+
|
|
41
|
+
#### 1. Topology Selection
|
|
42
|
+
- **Fan-Out / Fan-In**: Used in Phase 4 (APIs + MCP + DB) and Phase 5 (Frontend UI + Mobile + Animations).
|
|
43
|
+
- *Director* dispatches Subagent A (Frontend UI via `senior-frontend`), Subagent B (Backend API via `js-backend-expert`), Subagent C (DB Migration via `database-orm-expert`).
|
|
44
|
+
- Collects results and runs integration verification.
|
|
45
|
+
- **Pipeline Saga**: Sequential execution across Phases 1 to 8. Each phase produces a checkpoint artifact (`CONTEXT_MAP.md`, `BLUEPRINT.md`).
|
|
46
|
+
- **Critic-Validator Gate**: Used in Phase 6. Implementer agent submits code -> Auditor agent (`coderabbit`, `autonomous-red-teamer`) reviews -> Fixer agent (`autonomous-tdd-debugger`) resolves failures.
|
|
47
|
+
|
|
48
|
+
#### 2. Subagent Context Passing Protocol
|
|
49
|
+
When delegating to any subagent, ALWAYS pass:
|
|
50
|
+
1. Exact scope and non-goals.
|
|
51
|
+
2. File paths of relevant schemas (`schema.prisma` / `schema.ts`) and API routes.
|
|
52
|
+
3. Path to `PRD.md` and `BLUEPRINT.md`.
|
|
53
|
+
4. Verification command (e.g. `npm test`, `tsc --noEmit`) to confirm completion before returning.
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
### The 8-Phase Master Fullstack Pipeline
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
PHASE 1 PHASE 2 PHASE 3 PHASE 4
|
|
61
|
+
Discovery/PRD ---> Foundation ---> Database/ORM ---> Backend/APIs
|
|
62
|
+
| |
|
|
63
|
+
v v
|
|
64
|
+
PHASE 8 PHASE 7 PHASE 6 PHASE 5
|
|
65
|
+
Launch/Deploy <--- Security/GEO <--- Testing/QA <--- Frontend/UI
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
#### PHASE 1: Discovery & AI PRD Architectural Planning
|
|
69
|
+
**Orchestrates:** `prd-architect`, `brainstorming`, `deep-research-analyst`, `mcp-server-architect`, `session-memory-manager`, `dependency-upgrade-migrator`, `app-analyzer-optimizer`, `seo`, `saas-architect`, `web-scraper`, `website-design-cloner`, `headless-cms-expert`, `wordpress-headless-expert`, `documentation-site-expert`, `anti-slop`
|
|
70
|
+
- [ ] Conduct structured dialogue to clarify product intent, target audience, and non-functional goals.
|
|
71
|
+
- [ ] Automatically draft a comprehensive Product Requirements Document (PRD.md), Entity Relationship Diagram (ERD.md), and Documentation (DOKUMENTASI.md) alongside the Roadmap (ROADMAP.md).
|
|
72
|
+
- [ ] Plan AI/LLM integration strategy (Vercel AI SDK, MCP Server tools, or Multi-Agent Graph).
|
|
73
|
+
- [ ] For existing projects: audit dependency health and plan upgrades with `dependency-upgrade-migrator`.
|
|
74
|
+
- [ ] Initialize `BLUEPRINT.md` and `PROGRESS.md`.
|
|
75
|
+
|
|
76
|
+
#### PHASE 2: Project Foundation & Monorepo Setup
|
|
77
|
+
**Orchestrates:** `monorepo-architect`, `micro-frontend-architect`, `bun-runtime-expert`, `python-programming-expert`, `go-programming-expert`, `ci-cd-devops-architect`, `spa-orchestrator`, `mpa-orchestrator`, `cloud-hosting-expert`, `mvc-expert`, `scalability-clean-code`, `api-design-expert`, `legacy-code-translator`, `web-3d-graphics-expert`, `web-game-engine-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `rust-programming-expert`, `typescript-expert`, `biome-linter-formatter-expert`, `composable-mach-architect`
|
|
78
|
+
- [ ] Initialize monorepo (Turborepo + pnpm workspaces) or single repo foundation.
|
|
79
|
+
- [ ] Set up language runtimes: Node.js 24 LTS / Bun 1.2+ / Python 3.14+ (uv) / Go 1.25+ / Rust 2024.
|
|
80
|
+
- [ ] Configure `Biome v2` (Rust-based linter + formatter) or `Ruff`, `ESLint`, `Prettier`, and TypeScript strict configurations.
|
|
81
|
+
- [ ] Setup initial CI/CD pipeline template (GitHub Actions, Docker).
|
|
82
|
+
|
|
83
|
+
#### PHASE 3: Database & Multi-Tenant Core Architecture
|
|
84
|
+
**Orchestrates:** `fullstack-expert`, `database-orm-expert`, `domain-driven-design-expert`, `saas-multi-tenant`, `supabase-security-expert`, `data-pipeline-etl-expert`, `search-engine-expert`, `geospatial-maps-expert`, `graph-rag-knowledge-expert`
|
|
85
|
+
- [ ] Design normalized relational schemas, document models, and geospatial PostGIS structures.
|
|
86
|
+
- [ ] Configure ORM layer (Drizzle ORM / Prisma 6 / SQLx / sqlc) and full-text search indexing (Typesense/Meilisearch).
|
|
87
|
+
- [ ] Implement Row-Level Security (RLS) policies and tenant isolation.
|
|
88
|
+
- [ ] Apply initial database migrations and connection poolers (PgBouncer/Supavisor/Neon).
|
|
89
|
+
|
|
90
|
+
#### PHASE 4: Backend APIs, Microservices & AI Agents
|
|
91
|
+
**Orchestrates:** `js-backend-expert`, `go-programming-expert`, `pydantic-ai-expert`, `vercel-ai-sdk-expert`, `frontier-ai-models-expert`, `synthetic-data-finetuning-expert`, `graphql-apollo-expert`, `openapi-swagger-codegen-expert`, `ai-llm-integration-expert`, `ai-prompt-engineering-expert`, `ai-media-generation-expert`, `multi-agent-orchestration`, `mcp-server-architect`, `authentication-identity-expert`, `email-notification-expert`, `cron-scheduler-expert`, `rate-limit-abuse-prevention`, `file-upload-media-expert`, `saas-billing`, `agentic-micro-economy-architect`, `payment-gateway-expert`, `vector-db-rag-expert`, `async-queue-temporal-expert`, `doku-mcp-server`, `event-driven-architect`, `gemini-agent-booster`, `realtime-collaboration-expert`, `api-gateway-proxy-expert`, `wasm-edge-computing-expert`, `sse-websocket-streaming-expert`, `n8n-automation-expert`, `chatbot-messaging-expert`, `pdf-document-generation-expert`, `ecommerce-expert`, `blockchain-web3-expert`, `local-slm-edge-ai-expert`, `voice-ai-realtime-agent`, `affective-computing-emotion-ai`, `graph-rag-knowledge-expert`, `browser-automation-expert`, `agentic-memory-architect`, `llm-finops-router`, `agentic-micro-economy-architect`
|
|
92
|
+
- [ ] Build high-throughput REST / GraphQL / gRPC APIs using Fastify 5, NestJS, Hono, Gin, or Axum.
|
|
93
|
+
- [ ] Implement authentication (Clerk, Auth.js, Supabase Auth) and RBAC middleware.
|
|
94
|
+
- [ ] Build MCP Server tools or stateful LangGraph multi-agent workflows with human-in-the-loop gates.
|
|
95
|
+
- [ ] Integrate AI media generation (Flux/ElevenLabs/Whisper), chatbot platforms (WhatsApp/Telegram/Discord), and n8n automations.
|
|
96
|
+
- [ ] Implement background processing queues (BullMQ + Redis), scheduled jobs, and rate limiters.
|
|
97
|
+
- [ ] Set up transactional email pipeline (Resend/Postmark) and PDF generation.
|
|
98
|
+
- [ ] Implement file upload with presigned URLs (S3/R2) and media processing.
|
|
99
|
+
- [ ] Deploy Computer-Using Agent (CUA) patterns for autonomous browser interactions.
|
|
100
|
+
- [ ] Setup continuous multimodal streaming API for realtime voice and vision.
|
|
101
|
+
- [ ] Orchestrate narrative simulation agents with human-like behavioral modeling.
|
|
102
|
+
- [ ] Integrate episodic memory system for long-term agent context retention.
|
|
103
|
+
|
|
104
|
+
#### PHASE 5: Frontend, Design Systems & Mobile Apps
|
|
105
|
+
**Orchestrates:** `modern-web-guidance`, `design-system-architect`, `senior-frontend`, `vercel-ai-sdk-expert`, `nextjs-app-router-expert`, `vue-frontend-expert`, `astro-framework-expert`, `svelte-sveltekit-expert`, `solidjs-expert`, `angular-expert`, `tailwind-expert`, `tanstack-query-expert`, `spa-orchestrator`, `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `desktop-electron-expert`, `form-validation-expert`, `svg-animation-motion-expert`, `web-3d-graphics-expert`, `web-game-engine-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `visual-qa-vision-agent`, `hig`, `global-a11y-i18n-expert`, `bootstrap-to-modern`, `state-management-expert`, `ui-ux-pro-max`, `affective-computing-emotion-ai`, `data-visualization-expert`, `rich-text-editor-expert`, `documentation-site-expert`, `blockchain-web3-expert`, `modern-css-native-expert`, `pwa-offline-first-expert`, `ephemeral-generative-ui-architect`, \phemeral-generative-ui-architect\`n- [ ] **MANDATORY**: Run `modern-web-guidance` FIRST before implementing any frontend HTML/CSS/JS features to ensure compliance with modern standards.
|
|
106
|
+
- [ ] Implement design tokens (OKLCH) and Tailwind CSS v4 `@theme` directive tokens.
|
|
107
|
+
- [ ] Construct accessible component primitives using Radix UI / Base UI and CVA variants.
|
|
108
|
+
- [ ] Integrate data visualizations (Recharts/Tremor/D3) and rich text editors (Tiptap/Lexical).
|
|
109
|
+
- [ ] Build React 19 / Next.js 15, Vue 3, Astro 5, Svelte 5, SolidJS 2, or Angular 19+ apps with state management and Web3 wallets.
|
|
110
|
+
- [ ] **MANDATORY**: Automatically scaffold standard pages: About, Profile, Contact, Terms of Reference/Service, and Privacy Policy.
|
|
111
|
+
- [ ] Implement complex forms with React Hook Form + Zod validation.
|
|
112
|
+
- [ ] If 3D Web or Web Games: architect with WebGPU (`WebGPURenderer`, PlayCanvas, or Babylon.js), KTX2 Basis Universal texture compression, Meshopt geometry, fixed-timestep physics loops, zero-GC object pooling, and 3D spatial audio.
|
|
113
|
+
- [ ] If SPA architecture — coordinate with `spa-orchestrator` for routing (TanStack Router), state (TanStack Query v5), and decoupled API layer.
|
|
114
|
+
- [ ] Integrate frontend state management with TanStack Query v5.
|
|
115
|
+
|
|
116
|
+
#### PHASE 6: Automated Testing, Error Resilience & Security Audit
|
|
117
|
+
**Orchestrates:** `e2e-testing-expert`, `accessibility-testing-expert`, `autonomous-red-teamer`, `firebase-security-expert`, `error-resilience-expert`, `logging-error-tracking-expert`, `anti-slop`, `coderabbit`, `autonomous-tdd-debugger`, `browser-automation-expert`, `zero-trust-secret-vault`, `post-quantum-crypto-migrator`, `compliance-gdpr-privacy-expert`, `ai-safety-governance-expert`, `agentic-coding-workflow-expert`
|
|
118
|
+
- [ ] Write unit and integration tests with Vitest and pytest.
|
|
119
|
+
- [ ] Write resilient E2E browser tests with Playwright and automated WCAG 2.2 accessibility tests with `@axe-core/playwright` and Pa11y.
|
|
120
|
+
- [ ] Execute security fuzz testing (Atheris / cargo-fuzz / native Go fuzzing).
|
|
121
|
+
- [ ] Implement Error Boundaries, retry patterns, circuit breakers, and graceful degradation.
|
|
122
|
+
- [ ] Set up structured logging (Pino) and error tracking (Sentry) with source map uploads.
|
|
123
|
+
- [ ] Audit CORS, CSP headers, rate-limiting, and input sanitization.
|
|
124
|
+
- [ ] Run code quality audit to purge AI slop and architectural decay with anti-slop.
|
|
125
|
+
|
|
126
|
+
#### PHASE 7: DevOps, Deployment & Proactive Monitoring
|
|
127
|
+
**Orchestrates:** `ci-cd-devops-architect`, `cloud-hosting-expert`, `performance-web-vitals`, `logging-error-tracking-expert`, `production-ready-hardener`, `proactive-background-watcher`, `data-telemetry-expert`, `feature-flag-analytics-expert`, `error-resilience-expert`, `self-healing-cloud-orchestrator`
|
|
128
|
+
- [ ] Perform pre-launch audit across Core Web Vitals (LCP, INP, CLS) and bundle sizes.
|
|
129
|
+
- [ ] Configure production monitoring, alerting rules, and on-call notifications.
|
|
130
|
+
- [ ] Optimize Generative Engine Optimization (GEO) for AI Overviews, Perplexity, ChatGPT Search, and deploy `/llms.txt`.
|
|
131
|
+
- [ ] Generate structured Schema.org JSON-LD markup and AEO conversion landing pages.
|
|
132
|
+
|
|
133
|
+
#### PHASE 8: Launch, Deployment & Handover
|
|
134
|
+
**Orchestrates:** `cloud-hosting-expert`, `saas-billing`, `agentic-micro-economy-architect`, `saas-architect`, `prd-architect`, `ci-cd-devops-architect`, `doku-payment-gateway`, `payment-gateway-expert`
|
|
135
|
+
- [ ] Deploy backend and edge services to Vercel, Cloudflare, AWS, or Railway.
|
|
136
|
+
- [ ] For SaaS applications: deploy Super Admin dashboard on a **separate subdomain** (e.g., `admin.yourdomain.com`) with strict role-based access (`isSuperAdmin` flag).
|
|
137
|
+
- [ ] Configure Stripe / Polar.sh / LemonSqueezy / DOKU SNAP BI billing and webhooks.
|
|
138
|
+
- [ ] Finalize `CHANGELOG.md`, `BLUEPRINT.md`, and `PROGRESS.md`.
|
|
139
|
+
- [ ] Handover the production-grade application to the user.
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
<a name="bahasa-indonesia"></a>
|
|
144
|
+
## Bahasa Indonesia
|
|
145
|
+
|
|
146
|
+
### Integrasi Orkestrasi
|
|
147
|
+
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
|
|
148
|
+
|
|
149
|
+
### Ringkasan
|
|
150
|
+
**Zero to Production Orchestrator** adalah skill master utama yang dirancang untuk mengorkestrasi seluruh ekosistem `vibes-plug` sebagai sebuah **engineering swarm** yang saling terhubung erat. Dengan bertindak sebagai konduktor pusat, skill ini memastikan tidak ada sub-skill yang dieksekusi secara terisolasi. Skill ini memandu pengembang *fullstack* melalui seluruh siklus hidup rekayasa perangkat lunak — mulai dari tahap ide awal hingga integrasi AI, arsitektur backend multi-platform, design system, pengujian otomatis, optimasi GEO/AEO, dan deployment produksi.
|
|
151
|
+
|
|
152
|
+
### Kondisi Pemicu
|
|
153
|
+
- Memulai pengembangan aplikasi baru dari nol.
|
|
154
|
+
- Meminta panduan roadmap pengembangan fullstack end-to-end yang terstruktur.
|
|
155
|
+
- Mengorkestrasi berbagai skill spesialis lintas domain (UI, Backend, AI/LLM, Database, Keamanan, dan Cloud).
|
|
156
|
+
|
|
157
|
+
### Prinsip Inti & Gerbang Ketat
|
|
158
|
+
1. **Jangan Pernah Melewati Fase**: Setiap fase harus diselesaikan dan divalidasi sebelum beralih ke fase berikutnya.
|
|
159
|
+
2. **Otomatisasi Dokumentasi**: Panggil `prd-architect` untuk memperbarui `CHANGELOG.md` dan `BLUEPRINT.md` setelah setiap milestone utama.
|
|
160
|
+
3. **Pelacakan Progres**: Pelihara daftar periksa `PROGRESS.md` di root repositori.
|
|
161
|
+
4. **Preservasi State & Konteks**: Gunakan `session-memory-manager` saat menjeda pekerjaan atau memulai sesi baru untuk menjaga konteks penuh.
|
|
162
|
+
5. **Efisiensi**: Aktifkan `anti-slop` selama refactoring besar-besaran untuk mempertahankan *loop* eksekusi yang ringkas, powerful, dan bebas dari placeholder.
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
### 🐝 Topologi Eksekusi Swarm & Protokol Delegasi Subagent (Master 2026)
|
|
167
|
+
|
|
168
|
+
Saat mengeksekusi fase multi-domain yang kompleks, Orkestrator WAJIB bertindak sebagai **Swarm Director** dan mendelegasikan tugas ke subagent spesialis secara paralel:
|
|
169
|
+
|
|
170
|
+
#### 1. Pemilihan Topologi
|
|
171
|
+
- **Fan-Out / Fan-In**: Digunakan pada Fase 4 (API + MCP + DB) dan Fase 5 (Frontend UI + Mobile + Animasi).
|
|
172
|
+
- *Director* mengirimkan tugas ke Subagent A (Frontend UI via `senior-frontend`), Subagent B (Backend API via `js-backend-expert`), Subagent C (Migrasi DB via `database-orm-expert`).
|
|
173
|
+
- Mengumpulkan hasil dan menjalankan verifikasi integrasi.
|
|
174
|
+
- **Pipeline Saga**: Eksekusi berurutan dari Fase 1 hingga 8. Setiap fase menghasilkan artefak checkpoint (`CONTEXT_MAP.md`, `BLUEPRINT.md`).
|
|
175
|
+
- **Critic-Validator Gate**: Digunakan pada Fase 6. Agen implementor menyerahkan kode -> Agen auditor (`coderabbit`, `autonomous-red-teamer`) mereview -> Agen perbaikan (`autonomous-tdd-debugger`) menuntaskan kegagalan pengujian secara mandiri.
|
|
176
|
+
|
|
177
|
+
#### 2. Protokol Pengiriman Konteks Subagent
|
|
178
|
+
Saat mendelegasikan tugas ke subagent, SELALU berikan:
|
|
179
|
+
1. Ruang lingkup tugas dan non-goals yang tegas.
|
|
180
|
+
2. Path file skema terkait (`schema.prisma` / `schema.ts`) dan route API.
|
|
181
|
+
3. Lokasi dokumen panduan `PRD.md` dan `BLUEPRINT.md`.
|
|
182
|
+
4. Perintah verifikasi (seperti `npm test`, `tsc --noEmit`) untuk memastikan kode tervalidasi sebelum kembali ke Director.
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
### Master Pipeline Fullstack 8-Fase
|
|
187
|
+
|
|
188
|
+
#### FASE 1: Discovery & Perencanaan Arsitektur PRD AI
|
|
189
|
+
**Mengorkestrasi:** `prd-architect`, `brainstorming`, `deep-research-analyst`, `mcp-server-architect`, `session-memory-manager`, `dependency-upgrade-migrator`, `app-analyzer-optimizer`, `seo`, `saas-architect`, `web-scraper`, `website-design-cloner`, `headless-cms-expert`, `wordpress-headless-expert`, `documentation-site-expert`, `anti-slop`
|
|
190
|
+
- [ ] Dialog terstruktur untuk memperjelas tujuan produk, audiens target, dan persyaratan non-fungsional.
|
|
191
|
+
- [ ] Secara otomatis menyusun Product Requirements Document (PRD.md), Entity Relationship Diagram (ERD.md), dan Dokumentasi (DOKUMENTASI.md) yang komprehensif beserta Roadmap (ROADMAP.md).
|
|
192
|
+
- [ ] Merencanakan integrasi AI/LLM (Vercel AI SDK, alat MCP Server, atau Graf Multi-Agen).
|
|
193
|
+
- [ ] Untuk proyek yang sudah ada: audit kesehatan dependensi dan rencanakan upgrade dengan `dependency-upgrade-migrator`.
|
|
194
|
+
- [ ] Menginisialisasi `BLUEPRINT.md` dan `PROGRESS.md`.
|
|
195
|
+
|
|
196
|
+
#### FASE 2: Pondasi Proyek & Setup Monorepo
|
|
197
|
+
**Mengorkestrasi:** `monorepo-architect`, `micro-frontend-architect`, `bun-runtime-expert`, `python-programming-expert`, `go-programming-expert`, `ci-cd-devops-architect`, `spa-orchestrator`, `mpa-orchestrator`, `cloud-hosting-expert`, `mvc-expert`, `scalability-clean-code`, `api-design-expert`, `legacy-code-translator`, `web-3d-graphics-expert`, `web-game-engine-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `rust-programming-expert`, `typescript-expert`, `biome-linter-formatter-expert`, `composable-mach-architect`
|
|
198
|
+
- [ ] Inisialisasi monorepo (Turborepo + pnpm workspaces) atau repositori tunggal.
|
|
199
|
+
- [ ] Menyiapkan runtime bahasa: Node.js 24 LTS / Bun 1.2+ / Python 3.14+ (uv) / Go 1.25+ / Rust 2024.
|
|
200
|
+
- [ ] Konfigurasi `Biome v2` (Rust linter & formatter) atau `Ruff`, `ESLint`, `Prettier`, dan TypeScript ketat.
|
|
201
|
+
- [ ] Menyiapkan template pipeline CI/CD awal (GitHub Actions, Docker).
|
|
202
|
+
|
|
203
|
+
#### FASE 3: Database & Arsitektur Multi-Tenant
|
|
204
|
+
**Mengorkestrasi:** `fullstack-expert`, `database-orm-expert`, `domain-driven-design-expert`, `saas-multi-tenant`, `supabase-security-expert`, `data-pipeline-etl-expert`, `search-engine-expert`, `geospatial-maps-expert`, `graph-rag-knowledge-expert`
|
|
205
|
+
- [ ] Merancang skema relasional ter-normalisasi, pemodelan dokumen, dan struktur geospasial PostGIS.
|
|
206
|
+
- [ ] Konfigurasi lapisan ORM (Drizzle ORM / Prisma 6 / SQLx / sqlc) dan indexing mesin pencari (Typesense/Meilisearch).
|
|
207
|
+
- [ ] Mengimplementasikan kebijakan Row-Level Security (RLS) dan isolasi tenant.
|
|
208
|
+
- [ ] Menerapkan migrasi database awal dan connection poolers (PgBouncer/Supavisor/Neon).
|
|
209
|
+
|
|
210
|
+
#### FASE 4: Backend API, Microservices & Agen AI
|
|
211
|
+
**Mengorkestrasi:** `js-backend-expert`, `go-programming-expert`, `pydantic-ai-expert`, `vercel-ai-sdk-expert`, `frontier-ai-models-expert`, `synthetic-data-finetuning-expert`, `graphql-apollo-expert`, `openapi-swagger-codegen-expert`, `ai-llm-integration-expert`, `ai-prompt-engineering-expert`, `ai-media-generation-expert`, `multi-agent-orchestration`, `mcp-server-architect`, `authentication-identity-expert`, `email-notification-expert`, `cron-scheduler-expert`, `rate-limit-abuse-prevention`, `file-upload-media-expert`, `saas-billing`, `agentic-micro-economy-architect`, `payment-gateway-expert`, `vector-db-rag-expert`, `async-queue-temporal-expert`, `doku-mcp-server`, `event-driven-architect`, `gemini-agent-booster`, `realtime-collaboration-expert`, `api-gateway-proxy-expert`, `wasm-edge-computing-expert`, `sse-websocket-streaming-expert`, `n8n-automation-expert`, `chatbot-messaging-expert`, `pdf-document-generation-expert`, `ecommerce-expert`, `blockchain-web3-expert`, `local-slm-edge-ai-expert`, `voice-ai-realtime-agent`, `affective-computing-emotion-ai`, `graph-rag-knowledge-expert`, `browser-automation-expert`, `agentic-memory-architect`, `llm-finops-router`, `agentic-micro-economy-architect`
|
|
212
|
+
- [ ] Bangun API REST / GraphQL / gRPC *high-throughput* menggunakan Fastify 5, NestJS, Hono, Gin, atau Axum.
|
|
213
|
+
- [ ] Mengimplementasikan autentikasi (Clerk, Auth.js, Supabase Auth) dan middleware RBAC.
|
|
214
|
+
- [ ] Membangun alat MCP Server atau alur kerja multi-agen LangGraph berbasis state dengan gerbang *human-in-the-loop*.
|
|
215
|
+
- [ ] Mengintegrasikan generasi media AI (Flux/ElevenLabs/Whisper), bot perpesanan (WhatsApp/Telegram/Discord), dan otomasi n8n.
|
|
216
|
+
- [ ] Mengimplementasikan antrean pemrosesan latar belakang (BullMQ + Redis), tugas terjadwal, dan rate limiter.
|
|
217
|
+
- [ ] Menyiapkan pipeline email transaksional (Resend/Postmark), pembuatan PDF, dan sistem notifikasi.
|
|
218
|
+
- [ ] Mengimplementasikan upload file dengan presigned URL (S3/R2) dan pemrosesan media.
|
|
219
|
+
- [ ] Menerapkan pola Computer-Using Agent (CUA) untuk otomatisasi interaksi peramban (browser).
|
|
220
|
+
- [ ] Mengonfigurasi API streaming multimodal kontinu untuk suara dan visi real-time.
|
|
221
|
+
- [ ] Mengorkestrasi agen simulasi naratif dengan pemodelan perilaku mirip manusia.
|
|
222
|
+
- [ ] Mengintegrasikan sistem memori episodik untuk retensi konteks agen jangka panjang.
|
|
223
|
+
|
|
224
|
+
#### FASE 5: Frontend, Design System & Mobile App
|
|
225
|
+
**Mengorkestrasi:** `modern-web-guidance`, `design-system-architect`, `senior-frontend`, `vercel-ai-sdk-expert`, `nextjs-app-router-expert`, `vue-frontend-expert`, `astro-framework-expert`, `svelte-sveltekit-expert`, `solidjs-expert`, `angular-expert`, `tailwind-expert`, `tanstack-query-expert`, `spa-orchestrator`, `mobile-expo-expert`, `apple-ecosystem-expert`, `tauri-expert`, `desktop-electron-expert`, `form-validation-expert`, `svg-animation-motion-expert`, `web-3d-graphics-expert`, `web-game-engine-expert`, `glsl-shader-expert`, `webxr-ar-vr-expert`, `visual-qa-vision-agent`, `hig`, `global-a11y-i18n-expert`, `bootstrap-to-modern`, `state-management-expert`, `ui-ux-pro-max`, `affective-computing-emotion-ai`, `data-visualization-expert`, `rich-text-editor-expert`, `documentation-site-expert`, `blockchain-web3-expert`, `modern-css-native-expert`, `pwa-offline-first-expert`, `ephemeral-generative-ui-architect`
|
|
226
|
+
- [ ] **MANDATORY**: Jalankan `modern-web-guidance` PERTAMA KALI sebelum mengimplementasikan fitur frontend HTML/CSS/JS untuk memastikan kepatuhan dengan standar modern Google.
|
|
227
|
+
- [ ] Implementasikan token desain (OKLCH) dan konfigurasi tema Tailwind CSS v4.
|
|
228
|
+
- [ ] Bangun komponen primitif aksesibel menggunakan Radix UI / Base UI dan CVA.
|
|
229
|
+
- [ ] Integrasikan visualisasi data (Recharts/Tremor/D3) dan editor rich text (Tiptap/Lexical).
|
|
230
|
+
- [ ] Buat halaman React 19 / Next.js 15, Vue 3, Astro 5, Svelte 5, SolidJS 2, atau Angular 19+ dengan wallet Web3.
|
|
231
|
+
- [ ] **MANDATORY**: Otomatis buat halaman standar: About, Profile, Contact, Terms of Reference/Service, dan Privacy Policy.
|
|
232
|
+
- [ ] Mengimplementasikan formulir kompleks dengan React Hook Form + validasi Zod.
|
|
233
|
+
- [ ] Jika Web 3D atau Web Game: arsitekturkan dengan WebGPU (`WebGPURenderer`, PlayCanvas, atau Babylon.js), kompresi tekstur KTX2 Basis Universal, geometri Meshopt, loop fisika fixed-timestep, zero-GC object pooling, dan audio spasial 3D.
|
|
234
|
+
- [ ] Jika arsitektur SPA — koordinasikan dengan `spa-orchestrator` untuk routing (TanStack Router), state (TanStack Query v5), dan API layer terpisah.
|
|
235
|
+
- [ ] Mengintegrasikan manajemen state frontend dengan TanStack Query v5.
|
|
236
|
+
|
|
237
|
+
#### FASE 6: Pengujian Otomatis, Ketahanan Error & Audit Keamanan
|
|
238
|
+
**Mengorkestrasi:** `e2e-testing-expert`, `accessibility-testing-expert`, `autonomous-red-teamer`, `firebase-security-expert`, `error-resilience-expert`, `logging-error-tracking-expert`, `anti-slop`, `coderabbit`, `autonomous-tdd-debugger`, `browser-automation-expert`, `zero-trust-secret-vault`, `post-quantum-crypto-migrator`, `compliance-gdpr-privacy-expert`, `ai-safety-governance-expert`, `agentic-coding-workflow-expert`
|
|
239
|
+
- [ ] Menulis unit test dan integration test dengan Vitest dan pytest.
|
|
240
|
+
- [ ] Menulis pengujian browser E2E Playwright dan pengujian aksesibilitas WCAG 2.2 otomatis (`@axe-core/playwright` dan Pa11y).
|
|
241
|
+
- [ ] Menjalankan pengujian fuzzing keamanan (Atheris / cargo-fuzz / native Go fuzzing).
|
|
242
|
+
- [ ] Mengimplementasikan Error Boundary, pola retry, circuit breaker, dan degradasi anggun.
|
|
243
|
+
- [ ] Menyiapkan logging terstruktur (Pino) dan pelacakan error (Sentry) dengan upload source map.
|
|
244
|
+
- [ ] Mengaudit CORS, CSP headers, rate-limiting, dan sanitasi input.
|
|
245
|
+
- [ ] Menjalankan audit kualitas kode untuk membersihkan AI slop dan pembusukan arsitektur dengan anti-slop.
|
|
246
|
+
|
|
247
|
+
#### FASE 7: Hardening Pra-Peluncuran, Monitoring & DevOps Sentinel
|
|
248
|
+
**Mengorkestrasi:** `ci-cd-devops-architect`, `cloud-hosting-expert`, `performance-web-vitals`, `logging-error-tracking-expert`, `production-ready-hardener`, `proactive-background-watcher`, `data-telemetry-expert`, `feature-flag-analytics-expert`, `error-resilience-expert`, `self-healing-cloud-orchestrator`
|
|
249
|
+
- [ ] Audit pra-peluncuran pada Core Web Vitals (LCP, INP, CLS) dan ukuran bundle.
|
|
250
|
+
- [ ] Mengonfigurasi monitoring produksi, aturan alerting, dan notifikasi on-call.
|
|
251
|
+
- [ ] Mengoptimalkan GEO untuk AI Overviews, Perplexity, ChatGPT Search, dan merilis `/llms.txt`.
|
|
252
|
+
- [ ] Membuat markup terstruktur Schema.org JSON-LD dan landing page konversi AEO.
|
|
253
|
+
|
|
254
|
+
#### FASE 8: Peluncuran, Deployment & Serah Terima
|
|
255
|
+
**Mengorkestrasi:** `cloud-hosting-expert`, `saas-billing`, `agentic-micro-economy-architect`, `saas-architect`, `prd-architect`, `ci-cd-devops-architect`, `doku-payment-gateway`, `payment-gateway-expert`
|
|
256
|
+
- [ ] Deploy backend dan edge services ke Vercel, Cloudflare, AWS, atau Railway.
|
|
257
|
+
- [ ] Untuk aplikasi SaaS: deploy dashboard Super Admin pada **subdomain terpisah** (misal: `admin.domain.com`) dengan kontrol akses berbasis role (`isSuperAdmin`).
|
|
258
|
+
- [ ] Konfigurasi billing Stripe / Polar.sh / LemonSqueezy / DOKU SNAP BI dan webhooks.
|
|
259
|
+
- [ ] Menyelesaikan `CHANGELOG.md`, `BLUEPRINT.md`, dan `PROGRESS.md`.
|
|
260
|
+
- [ ] Serah terima aplikasi siap produksi kepada pengguna.
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
|
|
264
|
+
**MANDATORY**: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the `generate_image` tool to create a custom logo that perfectly matches the application's core concept and aesthetic.
|
|
265
|
+
This generated image MUST be explicitly used as:
|
|
266
|
+
1. The primary application logo (e.g., in the header/navbar).
|
|
267
|
+
2. The website favicon (`favicon.ico` or equivalent).
|
|
268
|
+
3. The Open Graph (OG) image for SEO metadata (`og:image`).
|
|
269
|
+
|
|
270
|
+
Do not use placeholders for these assets. Generate and integrate them automatically. If `generate_image` is unavailable, delegate to `ai-media-generation-expert` skill.
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
### 📄 Standard Pages Mandate (CRITICAL)
|
|
274
|
+
**MANDATORY**: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:
|
|
275
|
+
1. **About Page** (`/about`)
|
|
276
|
+
2. **Profile Page** (`/profile`)
|
|
277
|
+
3. **Contact Page** (`/contact`)
|
|
278
|
+
4. **Terms of Reference / Terms of Service** (`/terms`)
|
|
279
|
+
5. **Privacy Policy** (`/privacy-policy`)
|
|
280
|
+
|
|
281
|
+
These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.
|
|
211
282
|
|
|
212
|
-
---
|
|
213
|
-
### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
|
|
214
|
-
**MANDATORY**: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the `generate_image` tool to create a custom logo that perfectly matches the application's core concept and aesthetic.
|
|
215
|
-
This generated image MUST be explicitly used as:
|
|
216
|
-
1. The primary application logo (e.g., in the header/navbar).
|
|
217
|
-
2. The website favicon (`favicon.ico` or equivalent).
|
|
218
|
-
3. The Open Graph (OG) image for SEO metadata (`og:image`).
|
|
219
283
|
|
|
220
|
-
Do not use placeholders for these assets. Generate and integrate them automatically.
|
|
221
284
|
|
|
222
|
-
---
|
|
223
|
-
### 📄 Standard Pages Mandate (CRITICAL)
|
|
224
|
-
**MANDATORY**: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:
|
|
225
|
-
1. **About Page** (`/about`)
|
|
226
|
-
2. **Profile Page** (`/profile`)
|
|
227
|
-
3. **Contact Page** (`/contact`)
|
|
228
|
-
4. **Terms of Reference / Terms of Service** (`/terms`)
|
|
229
|
-
5. **Privacy Policy** (`/privacy-policy`)
|
|
230
285
|
|
|
231
|
-
These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.
|