vibes-plug 2.5.0 → 2.11.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 (177) hide show
  1. package/.claude/rules/vibes-plug-core.md +32 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +51 -0
  3. package/.cursorrules +42 -0
  4. package/AGENTS.md +37 -7
  5. package/BLUEPRINT.md +309 -217
  6. package/CHANGELOG.md +133 -1
  7. package/CLAUDE.md +70 -0
  8. package/LICENSE +1 -1
  9. package/README.md +641 -415
  10. package/index.js +19 -0
  11. package/package.json +44 -8
  12. package/plugin.json +24 -7
  13. package/scripts/generate_swarm_gif.py +295 -0
  14. package/scripts/install.js +201 -0
  15. package/skills/accessibility-testing-expert/SKILL.md +116 -0
  16. package/skills/ai-cost-token-optimizer/SKILL.md +82 -52
  17. package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
  18. package/skills/ai-llm-integration-expert/SKILL.md +185 -178
  19. package/skills/ai-media-generation-expert/SKILL.md +172 -0
  20. package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
  21. package/skills/angular-expert/SKILL.md +148 -0
  22. package/skills/api-design-expert/SKILL.md +6 -3
  23. package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
  24. package/skills/app-analyzer-optimizer/SKILL.md +6 -3
  25. package/skills/apple-ecosystem-expert/SKILL.md +144 -141
  26. package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
  27. package/skills/astro-framework-expert/SKILL.md +200 -0
  28. package/skills/async-queue-temporal-expert/SKILL.md +210 -24
  29. package/skills/authentication-identity-expert/SKILL.md +278 -275
  30. package/skills/auto-doc-updater/SKILL.md +7 -1
  31. package/skills/autonomous-chaos-monkey/SKILL.md +63 -63
  32. package/skills/autonomous-red-teamer/SKILL.md +172 -28
  33. package/skills/autonomous-tdd-debugger/SKILL.md +70 -64
  34. package/skills/background-jobs-queue-expert/SKILL.md +235 -0
  35. package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
  36. package/skills/blockchain-web3-expert/SKILL.md +115 -0
  37. package/skills/bootstrap-to-modern/SKILL.md +9 -6
  38. package/skills/brainstorming/SKILL.md +58 -50
  39. package/skills/browser-automation-expert/SKILL.md +197 -21
  40. package/skills/bun-runtime-expert/SKILL.md +7 -1
  41. package/skills/chatbot-messaging-expert/SKILL.md +114 -0
  42. package/skills/ci-cd-devops-architect/SKILL.md +45 -36
  43. package/skills/cloud-hosting-expert/SKILL.md +7 -1
  44. package/skills/coderabbit/SKILL.md +7 -1
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
  46. package/skills/cron-scheduler-expert/SKILL.md +303 -297
  47. package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
  48. package/skills/data-telemetry-expert/SKILL.md +7 -1
  49. package/skills/data-visualization-expert/SKILL.md +154 -0
  50. package/skills/database-migration-versioning-expert/SKILL.md +90 -0
  51. package/skills/database-orm-expert/SKILL.md +13 -3
  52. package/skills/dependency-upgrade-migrator/SKILL.md +300 -294
  53. package/skills/design-system-architect/SKILL.md +278 -259
  54. package/skills/desktop-electron-expert/SKILL.md +128 -0
  55. package/skills/documentation-site-expert/SKILL.md +59 -0
  56. package/skills/doku-mcp-server/SKILL.md +7 -1
  57. package/skills/doku-payment-gateway/SKILL.md +7 -1
  58. package/skills/domain-driven-design-expert/SKILL.md +82 -0
  59. package/skills/e2e-testing-expert/SKILL.md +7 -1
  60. package/skills/ecommerce-expert/SKILL.md +87 -0
  61. package/skills/edge-serverless-db-expert/SKILL.md +98 -42
  62. package/skills/email-notification-expert/SKILL.md +367 -361
  63. package/skills/error-resilience-expert/SKILL.md +485 -479
  64. package/skills/event-driven-architect/SKILL.md +7 -1
  65. package/skills/feature-flag-analytics-expert/SKILL.md +65 -45
  66. package/skills/file-upload-media-expert/SKILL.md +436 -430
  67. package/skills/firebase-security-expert/SKILL.md +7 -1
  68. package/skills/form-validation-expert/SKILL.md +406 -400
  69. package/skills/fullstack-expert/SKILL.md +60 -1
  70. package/skills/gemini-agent-booster/SKILL.md +173 -135
  71. package/skills/geospatial-maps-expert/SKILL.md +80 -0
  72. package/skills/global-a11y-i18n-expert/SKILL.md +7 -1
  73. package/skills/glsl-shader-expert/SKILL.md +106 -100
  74. package/skills/go-programming-expert/SKILL.md +21 -15
  75. package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
  76. package/skills/graphql-apollo-expert/SKILL.md +113 -107
  77. package/skills/headless-cms-expert/SKILL.md +181 -0
  78. package/skills/hig/SKILL.md +7 -1
  79. package/skills/js-backend-expert/SKILL.md +218 -216
  80. package/skills/legacy-code-translator/SKILL.md +70 -64
  81. package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
  82. package/skills/logging-error-tracking-expert/SKILL.md +343 -337
  83. package/skills/mcp-client-orchestrator/SKILL.md +75 -69
  84. package/skills/mcp-server-architect/SKILL.md +294 -194
  85. package/skills/micro-frontend-architect/SKILL.md +111 -105
  86. package/skills/mobile-expo-expert/SKILL.md +8 -2
  87. package/skills/mobile-push-notification-expert/SKILL.md +70 -50
  88. package/skills/modern-css-native-expert/SKILL.md +189 -0
  89. package/skills/monday-design-aesthetic/SKILL.md +7 -1
  90. package/skills/monorepo-architect/SKILL.md +7 -1
  91. package/skills/mpa-orchestrator/SKILL.md +20 -1
  92. package/skills/multi-agent-orchestration/SKILL.md +254 -234
  93. package/skills/multiple-entry-points/SKILL.md +37 -1
  94. package/skills/mvc-expert/SKILL.md +7 -1
  95. package/skills/n8n-automation-expert/SKILL.md +89 -0
  96. package/skills/nextjs-app-router-expert/SKILL.md +148 -0
  97. package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
  98. package/skills/payment-gateway-expert/SKILL.md +85 -1
  99. package/skills/pdf-document-generation-expert/SKILL.md +91 -0
  100. package/skills/performance-web-vitals/SKILL.md +7 -1
  101. package/skills/post-quantum-crypto-migrator/SKILL.md +57 -57
  102. package/skills/prd-architect/SKILL.md +7 -1
  103. package/skills/proactive-background-watcher/SKILL.md +67 -61
  104. package/skills/production-ready-hardener/SKILL.md +461 -455
  105. package/skills/project-context-mapper/SKILL.md +84 -78
  106. package/skills/pwa-offline-first-expert/SKILL.md +185 -0
  107. package/skills/python-programming-expert/SKILL.md +407 -401
  108. package/skills/rate-limit-abuse-prevention/SKILL.md +376 -370
  109. package/skills/realtime-collaboration-expert/SKILL.md +55 -1
  110. package/skills/rich-text-editor-expert/SKILL.md +177 -0
  111. package/skills/rust-programming-expert/SKILL.md +7 -1
  112. package/skills/saas-billing/SKILL.md +7 -1
  113. package/skills/saas-multi-tenant/SKILL.md +7 -1
  114. package/skills/saas-mvp-launcher/SKILL.md +20 -1
  115. package/skills/saas-transformer/SKILL.md +499 -488
  116. package/skills/scalability-clean-code/SKILL.md +7 -1
  117. package/skills/search-engine-expert/SKILL.md +89 -0
  118. package/skills/secure-fuzz-testing/SKILL.md +7 -1
  119. package/skills/self-evolving-memory-graph/SKILL.md +90 -74
  120. package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -57
  121. package/skills/senior-frontend/SKILL.md +141 -161
  122. package/skills/seo/SKILL.md +41 -17
  123. package/skills/session-context-loader/SKILL.md +82 -76
  124. package/skills/session-handoff-resume/SKILL.md +7 -1
  125. package/skills/{skill_baru → skill-baru}/SKILL.md +8 -2
  126. package/skills/solidjs-expert/SKILL.md +80 -0
  127. package/skills/spa-orchestrator/SKILL.md +20 -1
  128. package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
  129. package/skills/state-management-expert/SKILL.md +7 -1
  130. package/skills/supabase-migration/SKILL.md +47 -1
  131. package/skills/supabase-security-expert/SKILL.md +7 -1
  132. package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
  133. package/skills/svg-animation-motion-expert/SKILL.md +115 -0
  134. package/skills/tailwind-expert/SKILL.md +88 -136
  135. package/skills/tanstack-query-expert/SKILL.md +7 -1
  136. package/skills/tauri-expert/SKILL.md +7 -1
  137. package/skills/token-saver/SKILL.md +1 -1
  138. package/skills/typescript-expert/SKILL.md +12 -6
  139. package/skills/ui-components-expert/SKILL.md +165 -279
  140. package/skills/ui-ux-pro-max/SKILL.md +23 -3
  141. package/skills/vector-db-rag-expert/SKILL.md +175 -19
  142. package/skills/vibe-code-gardener/SKILL.md +1 -1
  143. package/skills/visual-qa-vision-agent/SKILL.md +70 -64
  144. package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
  145. package/skills/vue-frontend-expert/SKILL.md +131 -125
  146. package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
  147. package/skills/web-3d-graphics-expert/SKILL.md +136 -130
  148. package/skills/web-game-engine-expert/SKILL.md +101 -95
  149. package/skills/web-scraper/SKILL.md +157 -207
  150. package/skills/website-design-cloner/SKILL.md +179 -173
  151. package/skills/webxr-ar-vr-expert/SKILL.md +122 -116
  152. package/skills/wordpress-headless-expert/SKILL.md +144 -0
  153. package/skills/zero-to-prod-orchestrator/SKILL.md +52 -27
  154. package/skills/zero-trust-secret-vault/SKILL.md +87 -39
  155. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  156. package/.github/workflows/publish.yml +0 -20
  157. package/CONTRIBUTING.md +0 -199
  158. package/SECURITY.md +0 -21
  159. package/banner.png +0 -0
  160. package/skills/autonomous-swarm-director/SKILL.md +0 -69
  161. package/skills/hyper-context-synthesizer/SKILL.md +0 -55
  162. package/skills/llm-cost-arbitrage-router/SKILL.md +0 -59
  163. package/skills/senior-fullstack/SKILL.md +0 -167
  164. package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
  165. package/skills/senior-fullstack/references/development_workflows.md +0 -222
  166. package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
  167. package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
  168. package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
  169. package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
  170. package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
  171. package/skills/seo-geo/SKILL.md +0 -188
  172. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
  173. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  174. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
  175. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
  176. package/skills/ui_ux_expert/SKILL.md +0 -125
  177. package/vibes-swarm-demo.gif +0 -0
@@ -1,489 +1,500 @@
1
- ---
2
- name: saas-transformer
3
- description: "Transforms regular applications into complete SaaS platforms with multi-tenancy, billing, team management, and feature gating — orchestrating all relevant vibes-plug skills / Mentransformasi aplikasi biasa menjadi platform SaaS lengkap dengan multi-tenancy, billing, manajemen tim, dan feature gating — mengorkestrasi semua skill vibes-plug yang relevan."
1
+ ---
2
+ name: saas-transformer
3
+ description: "Transforms regular applications into complete SaaS platforms with multi-tenancy, billing, team management, and feature gating — orchestrating all relevant vibes-plug skills / Mentransformasi aplikasi biasa menjadi platform SaaS lengkap dengan multi-tenancy, billing, manajemen tim, dan feature gating — mengorkestrasi semua skill vibes-plug yang relevan."
4
4
  author: "Roedy Rustam"
5
- ---
6
-
7
- # SaaS Transformer
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Description
17
- The **SaaS Transformer** is a master orchestrator skill that guides the complete transformation of an existing regular application into a fully-featured SaaS platform. Unlike `saas-mvp-launcher` (which builds from scratch) or `saas-multi-tenant` (which only handles data isolation), this skill takes an **already working application** and systematically adds every layer needed to make it a commercial SaaS product.
18
-
19
- This skill does NOT replace individual skills — it **coordinates** them into a structured, **9-phase** transformation workflow.
20
-
21
- ### Orchestrated Skills Map
22
-
23
- ```
24
- ┌──────────────────────────────────────────────────────────────────┐
25
- │ SAAS-TRANSFORMER │
26
- │ (Master Orchestrator — 9 Phases) │
27
- ├──────────────────────────────────────────────────────────────────┤
28
-
29
- ┌─── PHASE 1: Discovery & Architecture Analysis ─────────────┐
30
- │ │ • session-context-loader (Project context & blueprint) │ │
31
- • app-analyzer-optimizer (Codebase audit & bottlenecks) │ │
32
- │ • prd-architect (SaaS PRD & tier definitions) │
33
- │ │ • brainstorming (Architecture pivot ideation) │ │
34
- │ │ • mpa-orchestrator / spa-orchestrator (App architecture) │ │
35
- │ │ • bun-runtime-expert (Runtime performance evaluation) │ │
36
- └────────────────────────────────────────────────────────────┘
37
-
38
- ┌─── PHASE 2: Multi-Tenancy Foundation ──────────────────────┐
39
- • saas-multi-tenant (Data isolation & tenancy models)
40
- • database-orm-expert (Schema migration & Prisma/Drizzle) │ │
41
- │ • edge-serverless-db-expert (Neon/D1 connection pool) │
42
- │ │ • supabase-migration (Migrations & SQL policies) │ │
43
- │ │ • supabase-security-expert (Shared schema RLS policies) │ │
44
- └────────────────────────────────────────────────────────────┘
45
-
46
- ┌─── PHASE 3: Authentication & Authorization ────────────────┐
47
- • authentication-identity-expert (OAuth2, RBAC/ABAC)
48
- • fullstack-expert (Custom claims & session validation) │ │
49
- │ • supabase-security-expert (JWT claims & RLS auth sync)
50
- │ │ • firebase-security-expert (Rules & App Check setup) │ │
51
- │ │ • zero-trust-secret-vault (Secret management & rotation) │ │
52
- └────────────────────────────────────────────────────────────┘
53
-
54
- ┌─── PHASE 4: Billing & Subscription ────────────────────────┐
55
- • saas-billing (Subscription state machine & webhooks)
56
- • payment-gateway-expert (Stripe, LemonSqueezy, Midtrans) │ │
57
- │ • doku-payment-gateway (DOKU QRIS, VA & checkout APIs) │
58
- │ │ • saas-mvp-launcher (Pricing tier structure & checkout) │ │
59
- │ │ • email-notification-expert (Invoice & trial emails) │ │
60
- └────────────────────────────────────────────────────────────┘
61
-
62
- ┌─── PHASE 5: Workspace & Team Management ───────────────────┐
63
- • saas-multi-tenant (Workspace CRUD & membership models)
64
- • form-validation-expert (Invite forms & validations) │ │
65
- │ • email-notification-expert (Transactional invite emails)
66
- │ │ • ui-components-expert (Workspace switcher & settings UI) │ │
67
- │ │ • senior-frontend (App shell & settings layout) │ │
68
- │ │ • ui-ux-pro-max (Design system & accessible components) │ │
69
- └────────────────────────────────────────────────────────────┘
70
-
71
- ┌─── PHASE 6: SaaS Frontend & Landing ───────────────────────┐
72
- • senior-frontend (App shell & responsive navigation)
73
- • tanstack-query-expert (Async state & optimistic UI) │ │
74
- │ • multiple-entry-points (Separate app, landing & admin) │
75
- │ │ • tailwind-expert / design-system-architect (Tokens & UI) │ │
76
- │ │ • seo-aeo-landing-page-writer (High-conversion landing) │ │
77
- │ │ • seo / seo-geo (SEO, AEO & AI search readiness) │ │
78
- │ │ • hig (Intuitive layout & visual consistency) │ │
79
- └────────────────────────────────────────────────────────────┘
80
-
81
- ┌─── PHASE 7: API Layer, Workers & Feature Gating ───────────┐
82
- │ │ • api-design-expert (REST, GraphQL, API versioning) │ │
83
- • rate-limit-abuse-prevention (Rate limiting & DDoS bot)
84
- • feature-flag-analytics-expert (Feature gating & flags) │ │
85
- │ • async-queue-temporal-expert (Background job queues) │
86
- │ │ • cron-scheduler-expert (Recurring cron metering tasks) │ │
87
- │ │ • js-backend-expert / go-programming-expert (APIs) │ │
88
- │ │ • mcp-server-architect (AI tool endpoints & schemas) │ │
89
- │ │ • multi-agent-orchestration (Autonomous agent workflows) │ │
90
- │ │ • scalability-clean-code (Clean architecture & SOLID) │ │
91
- └────────────────────────────────────────────────────────────┘
92
-
93
- ┌─── PHASE 8: Testing, Security & Quality Assurance ─────────┐
94
- │ │ • e2e-testing-expert (Playwright E2E & Vitest flows) │ │
95
- • browser-automation-expert (Visual regression testing)
96
- • secure-fuzz-testing (Input & stream parser fuzzing) │ │
97
- │ • error-resilience-expert (Retry logic & circuit breakers)│
98
- │ │ • logging-error-tracking-expert (Structured logs & Sentry)│ │
99
- │ │ • coderabbit (AI code review & PR summarization) │ │
100
- └────────────────────────────────────────────────────────────┘
101
-
102
- ┌─── PHASE 9: Production Hardening, Cloud & Handoff ─────────┐
103
- │ │ • production-ready-hardener (Comprehensive production audit)│
104
- • cloud-hosting-expert (Edge middleware & custom domains)
105
- • ci-cd-devops-architect (Deployment pipelines & IaC) │ │
106
- │ • data-telemetry-expert (Observability & PostHog metrics) │
107
- │ │ • performance-web-vitals (Lighthouse & Core Web Vitals)
108
- │ │ • session-handoff-resume (Save state checkpoint) │ │
109
- │ │ • auto-doc-updater (CHANGELOG & BLUEPRINT automation) │ │
110
- └────────────────────────────────────────────────────────────┘
111
-
112
- └──────────────────────────────────────────────────────────────────┘
113
- ```
114
-
115
- ### Trigger Conditions
116
- Activate this skill when the user:
117
- 1. Has an existing application and wants to convert it into a SaaS product.
118
- 2. Asks to "add multi-tenancy", "add billing/subscriptions", "make this a SaaS", "add team management", or similar requests that imply SaaS transformation.
119
- 3. Wants to add workspace/organization-based isolation to an existing app.
120
- 4. Needs to add pricing tiers, usage limits, or feature gating to an existing product.
121
- 5. Asks for a "SaaS audit" or "SaaS readiness check" on an existing application.
122
-
123
- ### Execution Protocol
124
-
125
- When this skill is triggered, execute the following **9-phase transformation process in order**. Each phase produces findings and code changes. At the end, compile a **SaaS Transformation Report**.
126
-
127
- > **Important:** Before starting, run the `saas_transformation_scanner.py` script to assess the current state of the application and determine which phases need the most work.
128
-
129
- ---
130
-
131
- #### PHASE 1: Discovery & Architecture Analysis
132
- **Orchestrates:** `session-context-loader`, `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `spa-orchestrator`, `bun-runtime-expert`
133
-
134
- **Goal:** Understand the existing application and plan the transformation, including architectural pivots.
135
-
136
- **Steps:**
137
- 1. **Audit the existing codebase** using `app-analyzer-optimizer`:
138
- - Map all database tables/models and their relationships
139
- - Identify authentication mechanism (if any)
140
- - List all API endpoints and their access patterns
141
- - Assess frontend architecture
142
- 2. **Evaluate Core Architecture Shifts**:
143
- - Consider `mpa-orchestrator` / `spa-orchestrator`: Should we consolidate into a Single Repo MPA or split into SPA micro-apps?
144
- - Consider `bun-runtime-expert`: Is extreme performance required? Should we migrate to the Bun runtime?
145
- 3. **Generate a SaaS PRD** using `prd-architect`:
146
- - Define target customer segments and pricing tiers (Free, Pro, Enterprise)
147
- - Establish usage limits per plan
148
-
149
- **Deliverable:** SaaS Transformation Plan document.
150
-
151
- **Checklist:**
152
- - [ ] All existing database tables mapped
153
- - [ ] Architecture pivot decisions finalized (MPA vs SPA, Node vs Bun)
154
- - [ ] Target pricing tiers defined (at least Free + 1 paid tier)
155
- - [ ] Tenancy model decided (shared-schema / schema-per-tenant)
156
- - [ ] Auth & Billing providers selected
157
-
158
- ---
159
-
160
- #### PHASE 2: Multi-Tenancy Foundation
161
- **Orchestrates:** `saas-multi-tenant`, `database-orm-expert`, `edge-serverless-db-expert`, `supabase-migration`, `supabase-security-expert` (for Shared Schema RLS)
162
-
163
- **Goal:** Add tenant isolation to the database layer.
164
-
165
- **Checklist:**
166
- - [ ] Core SaaS tables created (`workspaces`, `workspace_members`, `workspace_invitations`)
167
- - [ ] Decide on Tenancy Model (Shared Schema vs Isolated Schema)
168
- - [ ] Add `tenant_id` / `workspace_id` to all scoped tables (if Shared Schema) or configure dynamic routing (if Isolated Schema) using `database-orm-expert`
169
- - [ ] Apply RLS policies to restrict data access by tenant (if Shared Schema) via `supabase-security-expert`
170
- - [ ] Edge database pooling and serverless connection management configured via `edge-serverless-db-expert`
171
- - [ ] Tenant-aware middleware implemented
172
- - [ ] Existing data backfilled with default tenant
173
-
174
- ---
175
-
176
- #### PHASE 3: Authentication & Authorization
177
- **Orchestrates:** `authentication-identity-expert`, `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`, `zero-trust-secret-vault`
178
-
179
- **Goal:** Implement production-grade auth with role-based access control and zero-trust secret management.
180
-
181
- **Checklist:**
182
- - [ ] Auth provider configured with email + at least 1 OAuth provider using `authentication-identity-expert`
183
- - [ ] RBAC roles defined (owner, admin, member, viewer)
184
- - [ ] Authorization middleware protects all routes/endpoints
185
- - [ ] JWT custom claims include `workspace_id` and `role`
186
- - [ ] Session Management Optimization: Implement Edge-ready session validation (e.g., Redis or JWT) to minimize database lookups
187
- - [ ] API keys and secrets stored and rotated securely via `zero-trust-secret-vault`
188
-
189
- ---
190
-
191
- #### PHASE 4: Billing & Subscription
192
- **Orchestrates:** `saas-billing`, `payment-gateway-expert`, `doku-payment-gateway`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`, `email-notification-expert`
193
-
194
- **Goal:** Integrate payment processing, local billing sync, and automated transactional communications.
195
-
196
- **Checklist:**
197
- - [ ] Pricing tiers defined with Stripe / LemonSqueezy / DOKU products & prices
198
- - [ ] Subscription table created with proper multi-gateway schema via `saas-billing`
199
- - [ ] Payment gateway Checkout integration working (subscribe & upgrade flows) via `payment-gateway-expert` or `doku-payment-gateway`
200
- - [ ] All critical webhooks handled with idempotency (payment succeeded, subscription updated, cancelled)
201
- - [ ] Customer portal accessible (manage subscription, payment methods, invoices)
202
- - [ ] Trial period implemented with expiry notifications sent via `email-notification-expert`
203
-
204
- ---
205
-
206
- #### PHASE 5: Workspace & Team Management
207
- **Orchestrates:** `saas-multi-tenant`, `form-validation-expert`, `email-notification-expert`, `ui-components-expert`, `senior-frontend`, `ui-ux-pro-max`
208
-
209
- **Goal:** Build workspace creation, team invitations, role management, and settings UI.
210
-
211
- **Checklist:**
212
- - [ ] Workspace CRUD operations working with strict validation (`form-validation-expert`)
213
- - [ ] Workspace switching UI in navbar (`ui-components-expert`)
214
- - [ ] Email invitation flow with secure token link sent via `email-notification-expert`
215
- - [ ] Member role management (view, change, remove)
216
- - [ ] Team size limits enforced by plan
217
-
218
- ---
219
-
220
- #### PHASE 6: SaaS Frontend & Landing
221
- **Orchestrates:** `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `design-system-architect`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig`
222
-
223
- **Goal:** Build the SaaS frontend: app shell, dashboard, marketing pages, and super admin panel.
224
-
225
- **Steps:**
226
- 1. **Architecture Separation (`multiple-entry-points`)**: Separate authenticated SaaS application from marketing pages and the Super Admin dashboard (which MUST be deployed on a separate subdomain like `admin.example.com` for application management).
227
- 2. **State Management (`tanstack-query-expert`)**: Implement robust asynchronous state handling, ensuring optimistic UI updates (e.g., when a user updates their profile, the UI reflects it instantly while the server syncs).
228
- 3. **App shell / Layout**: Authenticated layout with sidebar navigation, breadcrumbs, and workspace context.
229
- 4. **Marketing / Landing page**: Convert users with a highly optimized, SEO/GEO friendly landing page created with `seo-aeo-landing-page-writer`.
230
-
231
- **Checklist:**
232
- - [ ] App shell with sidebar, header, workspace switcher
233
- - [ ] Advanced data fetching with TanStack Query (no raw useEffects)
234
- - [ ] Design system tokens configured with `design-system-architect` / `tailwind-expert`
235
- - [ ] Settings pages (account, workspace, team, billing)
236
- - [ ] Landing page with pricing and social proof
237
- - [ ] Super Admin dashboard deployed on a separate subdomain
238
- - [ ] SEO meta tags and Structured data on all public pages (`seo` / `seo-geo`)
239
-
240
- ---
241
-
242
- #### PHASE 7: API Layer, Background Workers & Feature Gating
243
- **Orchestrates:** `api-design-expert`, `rate-limit-abuse-prevention`, `feature-flag-analytics-expert`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `js-backend-expert`, `go-programming-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `scalability-clean-code`
244
-
245
- **Goal:** Add API versioning, rate limiting, background job queues, and plan-based feature gating.
246
-
247
- **Checklist:**
248
- - [ ] API versioning implemented (`/api/v1/`) with OpenAPI specs (`api-design-expert`)
249
- - [ ] Rate limiting and bot protection configured per plan via `rate-limit-abuse-prevention`
250
- - [ ] Feature flag & gating middleware configured per subscription tier via `feature-flag-analytics-expert`
251
- - [ ] Usage metering tracking API calls, storage, members, and background jobs
252
- - [ ] Durable workflow background jobs configured via `async-queue-temporal-expert` / `cron-scheduler-expert`
253
- - [ ] MCP Server endpoints exposed for AI agents via `mcp-server-architect`
254
-
255
- ---
256
-
257
- #### PHASE 8: Testing, Security & Quality Assurance
258
- **Orchestrates:** `e2e-testing-expert`, `browser-automation-expert`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert`, `coderabbit`
259
-
260
- **Goal:** Validate core business logic, ensure fault tolerance, and guarantee security before deployment.
261
-
262
- **Steps:**
263
- 1. **End-to-End Testing (`e2e-testing-expert`)**: Write Playwright tests for critical paths: Signup, Login, Stripe Checkout, and Workspace Invitation.
264
- 2. **Visual & Automation Audit (`browser-automation-expert`)**: Validate responsive UI workflows and visual regression.
265
- 3. **Security & Fuzzing (`secure-fuzz-testing`)**: Write coverage-guided fuzz tests for custom data parsers, file uploads, or binary data streams to prevent memory leaks and unexpected crashes.
266
- 4. **Resilience & Observability (`error-resilience-expert`, `logging-error-tracking-expert`)**: Configure circuit breakers, retry strategies, structured logging, and Sentry error tracking.
267
- 5. **Automated Review (`coderabbit`)**: Configure CodeRabbit to automatically review all PRs going into main, ensuring code quality and summarizing architectural changes.
268
-
269
- **Checklist:**
270
- - [ ] Playwright E2E tests passing for authentication & billing flows
271
- - [ ] Fuzz tests implemented for critical parsers/endpoints
272
- - [ ] Circuit breakers and retries configured for third-party API dependencies
273
- - [ ] Structured logging and error tracking (Sentry) active
274
- - [ ] `.coderabbit.yaml` configured for automated PR reviews
275
- - [ ] All unit/integration tests (Vitest) passing in CI
276
-
277
- ---
278
-
279
- #### PHASE 9: Production Hardening, Cloud Deployment & Handoff
280
- **Orchestrates:** `production-ready-hardener`, `cloud-hosting-expert`, `ci-cd-devops-architect`, `data-telemetry-expert`, `performance-web-vitals`, `session-handoff-resume`, `auto-doc-updater`
281
-
282
- **Goal:** Harden the application, deploy to Edge/Cloud architecture, establish CI/CD pipelines, and document state.
283
-
284
- **Steps:**
285
- 1. **Hardening**: Run the full `production-ready-hardener` audit.
286
- 2. **Edge & Cloud Deployment (`cloud-hosting-expert`, `ci-cd-devops-architect`)**:
287
- - Deploy to Vercel/Cloudflare with CI/CD GitHub Actions pipelines.
288
- - Configure Edge Middleware for tenant identification (e.g., rewriting `tenant1.myapp.com`).
289
- - Implement custom domains using Cloudflare for SaaS.
290
- 3. **Performance & Telemetry (`performance-web-vitals`, `data-telemetry-expert`)**: Ensure Core Web Vitals optimization and active telemetry tracking (OpenTelemetry / PostHog).
291
- 4. **State Checkpoint & Documentation (`session-handoff-resume`, `auto-doc-updater`)**: Save ultra-compact state checkpoint and update `CHANGELOG.md` and `BLUEPRINT.md`.
292
-
293
- **Checklist:**
294
- - [ ] Production-ready-hardener audit score 85
295
- - [ ] Edge Middleware configured for tenant routing
296
- - [ ] Payment gateway live mode configured and tested
297
- - [ ] Observability, telemetry, and error monitoring active
298
- - [ ] Core Web Vitals pass Performance benchmarks (LCP < 2.5s, INP < 200ms)
299
- - [ ] Documentation updated (CHANGELOG, BLUEPRINT, README)
300
- - [ ] Session state checkpoint saved via `session-handoff-resume`
301
-
302
- ---
303
-
304
- ### SaaS Transformation Report Format
305
-
306
- After completing all 9 phases, compile a **SaaS Transformation Report**:
307
-
308
- ```markdown
309
- # SaaS Transformation Report
310
-
311
- ## Executive Summary
312
- Overall transformation completeness (0-100%) with readiness grade (A/B/C/D/F).
313
-
314
- ## Phase Scores
315
- | Phase | Score | Status |
316
- |-------|-------|--------|
317
- | 1. Discovery & Architecture Analysis | XX/100 | ✅/⚠️/🔴 |
318
- | 2. Multi-Tenancy Foundation | XX/100 | ✅/⚠️/🔴 |
319
- | 3. Authentication & Authorization | XX/100 | ✅/⚠️/🔴 |
320
- | 4. Billing & Subscription | XX/100 | ✅/⚠️/🔴 |
321
- | 5. Workspace & Team Management | XX/100 | ✅/⚠️/🔴 |
322
- | 6. SaaS Frontend & Landing | XX/100 | ✅/⚠️/🔴 |
323
- | 7. API Layer & Feature Gating | XX/100 | ✅/⚠️/🔴 |
324
- | 8. Testing, Security & QA | XX/100 | ✅/⚠️/🔴 |
325
- | 9. Production Hardening & Cloud | XX/100 | ✅/⚠️/🔴 |
326
-
327
- ## 📋 Recommended Next Steps
328
- Prioritized action items for post-launch iteration.
329
- ```
330
-
331
- ### Scoring Methodology
332
-
333
- Setiap fase dinilai 0-100 berdasarkan penyelesaian checklist:
334
- - **95-100**: Complete ✅
335
- - **80-94**: Almost complete, minor gaps ⚠️
336
- - **60-79**: Significant items missing 🟡
337
- - **Below 60**: Phase not implemented 🔴
338
-
339
- **Overall Score** = Weighted average:
340
- - Discovery (5%) + Multi-Tenancy (**20%**) + Auth (10%) + Billing (**20%**) + Teams (10%) + Frontend (10%) + API & Gating (10%) + Testing (5%) + Production (10%)
341
-
342
- ---
343
-
344
- <a name="bahasa-indonesia"></a>
345
- ## Bahasa Indonesia
346
-
347
- ### Deskripsi
348
- **SaaS Transformer** adalah skill orkestrator utama yang memandu transformasi lengkap aplikasi biasa menjadi platform SaaS berfitur lengkap. Berbeda dengan `saas-mvp-launcher` (yang membangun dari nol) atau `saas-multi-tenant` (yang hanya menangani isolasi data), skill ini mengambil **aplikasi yang sudah berjalan** dan secara sistematis menambahkan setiap lapisan yang diperlukan untuk menjadikannya produk SaaS komersial.
349
-
350
- Skill ini TIDAK menggantikan skill individual — ia **mengoordinasikan** mereka ke dalam alur kerja transformasi terstruktur **9 fase**.
351
-
352
- ### Peta Skill yang Diorkestrasi
353
-
354
- | Fase | Skill yang Digunakan | Fokus Utama |
355
- |------|---------------------|-------------|
356
- | 1. Discovery & Arsitektur | `session-context-loader`, `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `spa-orchestrator`, `bun-runtime-expert` | Muat konteks, audit codebase, evaluasi MPA vs SPA & Bun runtime |
357
- | 2. Fondasi Multi-Tenancy | `saas-multi-tenant`, `database-orm-expert`, `edge-serverless-db-expert`, `supabase-migration`, `supabase-security-expert` | Model Shared/Isolated Schema, RLS, ORM schema & edge database pooling |
358
- | 3. Autentikasi & Otorisasi | `authentication-identity-expert`, `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`, `zero-trust-secret-vault` | OAuth2/OIDC, RBAC/ABAC, JWT custom claims, session Edge & secret vault |
359
- | 4. Billing & Langganan | `saas-billing`, `payment-gateway-expert`, `doku-payment-gateway`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`, `email-notification-expert` | Stripe/Midtrans/DOKU, webhook idempotency, sync billing & notifikasi email |
360
- | 5. Workspace & Tim | `saas-multi-tenant`, `form-validation-expert`, `email-notification-expert`, `ui-components-expert`, `senior-frontend`, `ui-ux-pro-max` | Invite flow, token link, manajemen role, UI workspace switcher |
361
- | 6. Frontend SaaS & Landing | `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `design-system-architect`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig` | Separation (App/Landing/Admin), TanStack Query state, landing page SEO |
362
- | 7. API & Feature Gating | `api-design-expert`, `rate-limit-abuse-prevention`, `feature-flag-analytics-expert`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `js-backend-expert`, `go-programming-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `scalability-clean-code` | REST/OpenAPI, rate limiting, feature gating, background jobs & MCP tools |
363
- | 8. Pengujian, Keamanan & QA | `e2e-testing-expert`, `browser-automation-expert`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert`, `coderabbit` | Playwright E2E, fuzz testing, error resilience (retry/circuit breaker) & CodeRabbit |
364
- | 9. Pengerasan Produksi & Cloud | `production-ready-hardener`, `cloud-hosting-expert`, `ci-cd-devops-architect`, `data-telemetry-expert`, `performance-web-vitals`, `session-handoff-resume`, `auto-doc-updater` | Edge middleware, CI/CD pipeline, Core Web Vitals, checkpoint & auto-doc |
365
-
366
- ### Kondisi Pemicu
367
- Aktifkan skill ini ketika pengguna:
368
- 1. Memiliki aplikasi yang sudah ada dan ingin mengkonversinya menjadi produk SaaS.
369
- 2. Meminta untuk "menambahkan multi-tenancy", "menambahkan billing/langganan", "jadikan ini SaaS", "tambahkan manajemen tim", atau permintaan serupa.
370
- 3. Ingin menambahkan isolasi berbasis workspace/organisasi ke aplikasi yang sudah ada.
371
- 4. Perlu menambahkan tier harga, batas penggunaan, atau pembatasan fitur ke produk yang sudah ada.
372
- 5. Meminta "audit SaaS" atau "pemeriksaan kesiapan SaaS" pada aplikasi yang sudah ada.
373
-
374
- ### Protokol Eksekusi
375
-
376
- Ketika skill ini dipicu, jalankan **9 fase transformasi secara berurutan**. Setiap fase menghasilkan temuan dan perubahan kode. Di akhir, compile sebuah **Laporan Transformasi SaaS**.
377
-
378
- > **Penting:** Sebelum memulai, jalankan script `saas_transformation_scanner.py` untuk menilai kondisi aplikasi saat ini dan menentukan fase mana yang membutuhkan paling banyak pekerjaan.
379
-
380
- ---
381
-
382
- #### FASE 1: Discovery & Analisis Arsitektur
383
- **Mengorkestrasi:** `session-context-loader`, `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `spa-orchestrator`, `bun-runtime-expert`
384
-
385
- - [ ] Semua tabel/model database dipetakan
386
- - [ ] Keputusan arsitektur (MPA vs SPA, Node vs Bun) dievaluasi
387
- - [ ] Mekanisme autentikasi diidentifikasi
388
- - [ ] Tier harga target ditentukan (minimal Free + 1 berbayar)
389
- - [ ] Model tenancy diputuskan (Shared Schema vs Isolated Schema)
390
- - [ ] Provider Auth & Billing dipilih
391
-
392
- #### FASE 2: Fondasi Multi-Tenancy
393
- **Mengorkestrasi:** `saas-multi-tenant`, `database-orm-expert`, `edge-serverless-db-expert`, `supabase-migration`, `supabase-security-expert` (untuk RLS Shared Schema)
394
-
395
- - [ ] Tabel inti SaaS dibuat (`workspaces`, `workspace_members`, `workspace_invitations`)
396
- - [ ] Tentukan Model Tenancy (Shared Schema vs Isolated Schema)
397
- - [ ] Tambahkan `tenant_id` / `workspace_id` ke semua tabel terkait via `database-orm-expert`
398
- - [ ] Terapkan kebijakan RLS untuk membatasi akses data per tenant via `supabase-security-expert`
399
- - [ ] Konfigurasi edge database pooling dan connection management via `edge-serverless-db-expert`
400
- - [ ] Middleware tenant-aware diimplementasikan
401
- - [ ] Data existing di-backfill dengan tenant default
402
-
403
- #### FASE 3: Autentikasi & Otorisasi
404
- **Mengorkestrasi:** `authentication-identity-expert`, `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`, `zero-trust-secret-vault`
405
-
406
- - [ ] Provider auth dikonfigurasi (email + minimal 1 OAuth) menggunakan `authentication-identity-expert`
407
- - [ ] Role RBAC didefinisikan (owner, admin, member, viewer)
408
- - [ ] Middleware otorisasi melindungi semua route/endpoint
409
- - [ ] JWT custom claims mencakup `workspace_id` dan `role`
410
- - [ ] Optimasi Session Management: Implementasikan validasi sesi Edge-ready (contoh: Redis atau JWT) untuk meminimalkan beban query ke database
411
- - [ ] API keys dan rahasia disimpan & dirotasi aman via `zero-trust-secret-vault`
412
-
413
- #### FASE 4: Billing & Langganan
414
- **Mengorkestrasi:** `saas-billing`, `payment-gateway-expert`, `doku-payment-gateway`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`, `email-notification-expert`
415
-
416
- - [ ] Tier harga didefinisikan pada Stripe / LemonSqueezy / DOKU
417
- - [ ] Tabel subscription dibuat dengan schema multi-gateway via `saas-billing`
418
- - [ ] Integrasi Checkout (subscribe & upgrade) berfungsi via `payment-gateway-expert` atau `doku-payment-gateway`
419
- - [ ] Semua webhook kritis ditangani dengan idempotency (pembayaran berhasil, langganan berubah, pembatalan)
420
- - [ ] Portal pelanggan diakses (manajemen langganan, metode pembayaran, invoice)
421
- - [ ] Penanganan periode trial dan notifikasi email via `email-notification-expert`
422
-
423
- #### FASE 5: Workspace & Manajemen Tim
424
- **Mengorkestrasi:** `saas-multi-tenant`, `form-validation-expert`, `email-notification-expert`, `ui-components-expert`, `senior-frontend`, `ui-ux-pro-max`
425
-
426
- - [ ] CRUD workspace berfungsi dengan validasi ketat (`form-validation-expert`)
427
- - [ ] UI workspace switching di navbar (`ui-components-expert`)
428
- - [ ] Flow terima/tolak undangan dengan link token unik dikirim via `email-notification-expert`
429
- - [ ] Manajemen role anggota (lihat, ubah, hapus)
430
- - [ ] Batas ukuran tim berdasarkan plan
431
-
432
- #### FASE 6: Frontend SaaS & Landing
433
- **Mengorkestrasi:** `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `design-system-architect`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig`
434
-
435
- - [ ] Arsitektur dipisah antara aplikasi SaaS, landing page, dan Super Admin (`multiple-entry-points`)
436
- - [ ] Dashboard Super Admin untuk manajemen aplikasi (wajib di-deploy pada subdomain terpisah seperti `admin.domain.com`)
437
- - [ ] App shell dengan sidebar, header, workspace switcher
438
- - [ ] Pengambilan data (data fetching) modern dengan TanStack Query
439
- - [ ] Design system tokens dikonfigurasi via `design-system-architect` / `tailwind-expert`
440
- - [ ] Landing page teroptimasi SEO dengan pricing dan social proof (`seo-aeo-landing-page-writer`)
441
-
442
- #### FASE 7: API & Feature Gating
443
- **Mengorkestrasi:** `api-design-expert`, `rate-limit-abuse-prevention`, `feature-flag-analytics-expert`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `js-backend-expert`, `go-programming-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `scalability-clean-code`
444
-
445
- - [ ] API versioning diimplementasikan (`/api/v1/`) dengan dokumentasi OpenAPI (`api-design-expert`)
446
- - [ ] Rate limiting dan proteksi bot dikonfigurasi per plan via `rate-limit-abuse-prevention`
447
- - [ ] Sistem feature flags / gating operasional per plan tier via `feature-flag-analytics-expert`
448
- - [ ] Usage metering melacak API calls, storage, members, dan background jobs
449
- - [ ] Background job queues berdurabilitas tinggi via `async-queue-temporal-expert` / `cron-scheduler-expert`
450
- - [ ] Endpoint MCP Server terekspos untuk agen AI via `mcp-server-architect`
451
-
452
- #### FASE 8: Pengujian, Keamanan & QA
453
- **Mengorkestrasi:** `e2e-testing-expert`, `browser-automation-expert`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert`, `coderabbit`
454
-
455
- - [ ] Playwright E2E test disiapkan untuk alur penting (login, checkout, undangan team)
456
- - [ ] Fuzz testing diimplementasikan untuk keamanan parser data (`secure-fuzz-testing`)
457
- - [ ] Ketahanan error (circuit breaker & retry logic) dan logging terstruktur (Sentry) aktif
458
- - [ ] CodeRabbit dikonfigurasi (`.coderabbit.yaml`) untuk AI code review di CI/CD
459
- - [ ] Unit test dan integration test (Vitest) lulus di CI
460
-
461
- #### FASE 9: Pengerasan Produksi & Deployment Cloud
462
- **Mengorkestrasi:** `production-ready-hardener`, `cloud-hosting-expert`, `ci-cd-devops-architect`, `data-telemetry-expert`, `performance-web-vitals`, `session-handoff-resume`, `auto-doc-updater`
463
-
464
- - [ ] Skor audit production-ready-hardener ≥ 85
465
- - [ ] Middleware Edge (Vercel/Cloudflare) dikonfigurasi untuk routing multi-tenant
466
- - [ ] Pipeline CI/CD dikonfigurasi dengan GitHub Actions (`ci-cd-devops-architect`)
467
- - [ ] Mode Payment Gateway Live dikonfigurasi & diuji
468
- - [ ] Monitoring error, analitik, dan telemetri aktif (`data-telemetry-expert`)
469
- - [ ] Optimasi Core Web Vitals lulus (LCP < 2.5s, INP < 200ms)
470
- - [ ] Dokumentasi diperbarui (CHANGELOG, BLUEPRINT, README)
471
- - [ ] Session state checkpoint disimpan via `session-handoff-resume`
472
-
473
- ---
474
-
475
- ### Metodologi Penilaian
476
-
477
- Setiap fase dinilai 0-100 berdasarkan penyelesaian checklist:
478
- - **95-100**: Selesai
479
- - **80-94**: Hampir selesai, gap minor ⚠️
480
- - **60-79**: Item signifikan hilang 🟡
481
- - **Di bawah 60**: Fase belum diimplementasikan 🔴
482
-
483
- **Skor Keseluruhan** = Rata-rata berbobot:
484
- - Discovery (5%) + Multi-Tenancy (**20%**) + Auth (10%) + Billing (**20%**) + Teams (10%) + Frontend (10%) + API & Gating (10%) + Pengujian (5%) + Produksi (10%)
485
-
486
- ### Referensi Dokumentasi
487
- - [SaaS Transformation Checklist](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/saas_transformation_checklist.md)
488
- - [Billing Integration Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/billing_integration_guide.md)
489
- - [Feature Gating Patterns](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/feature_gating_patterns.md)
5
+ ---
6
+
7
+ # SaaS Transformer
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Orchestration & Integration
17
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+
19
+ ### Description
20
+ The **SaaS Transformer** is a master orchestrator skill that guides the complete transformation of an existing regular application into a fully-featured SaaS platform. Unlike `saas-mvp-launcher` (which builds from scratch) or `saas-multi-tenant` (which only handles data isolation), this skill takes an **already working application** and systematically adds every layer needed to make it a commercial SaaS product.
21
+
22
+ This skill does NOT replace individual skills — it **coordinates** them into a structured, **9-phase** transformation workflow.
23
+
24
+ ### Orchestrated Skills Map
25
+
26
+ ```
27
+ ┌──────────────────────────────────────────────────────────────────┐
28
+ SAAS-TRANSFORMER
29
+ (Master Orchestrator 9 Phases)
30
+ ├──────────────────────────────────────────────────────────────────┤
31
+
32
+ ┌─── PHASE 1: Discovery & Architecture Analysis ─────────────┐
33
+ │ │ • session-context-loader (Project context & blueprint) │ │
34
+ │ │ • app-analyzer-optimizer (Codebase audit & bottlenecks) │ │
35
+ │ │ • prd-architect (SaaS PRD & tier definitions) │ │
36
+ • brainstorming (Architecture pivot ideation)
37
+ • mpa-orchestrator / spa-orchestrator (App architecture) │ │
38
+ │ • bun-runtime-expert (Runtime performance evaluation) │
39
+ └────────────────────────────────────────────────────────────┘
40
+
41
+ ┌─── PHASE 2: Multi-Tenancy Foundation ──────────────────────┐
42
+ │ │ • saas-multi-tenant (Data isolation & tenancy models) │ │
43
+ │ │ • database-orm-expert (Schema migration & Prisma/Drizzle) │ │
44
+ • edge-serverless-db-expert (Neon/D1 connection pool)
45
+ • supabase-migration (Migrations & SQL policies) │ │
46
+ │ • supabase-security-expert (Shared schema RLS policies)
47
+ └────────────────────────────────────────────────────────────┘
48
+
49
+ ┌─── PHASE 3: Authentication & Authorization ────────────────┐
50
+ │ │ • authentication-identity-expert (OAuth2, RBAC/ABAC) │ │
51
+ │ │ • fullstack-expert (Custom claims & session validation) │ │
52
+ • supabase-security-expert (JWT claims & RLS auth sync)
53
+ • firebase-security-expert (Rules & App Check setup) │ │
54
+ │ • zero-trust-secret-vault (Secret management & rotation)
55
+ └────────────────────────────────────────────────────────────┘
56
+
57
+ ┌─── PHASE 4: Billing & Subscription ────────────────────────┐
58
+ │ │ • saas-billing (Subscription state machine & webhooks) │ │
59
+ │ │ • payment-gateway-expert (Stripe, LemonSqueezy, Midtrans) │ │
60
+ • doku-payment-gateway (DOKU QRIS, VA & checkout APIs)
61
+ • saas-mvp-launcher (Pricing tier structure & checkout) │ │
62
+ │ • email-notification-expert (Invoice & trial emails) │
63
+ └────────────────────────────────────────────────────────────┘
64
+
65
+ ┌─── PHASE 5: Workspace & Team Management ───────────────────┐
66
+ │ │ • saas-multi-tenant (Workspace CRUD & membership models) │ │
67
+ │ │ • form-validation-expert (Invite forms & validations) │ │
68
+ │ │ • email-notification-expert (Transactional invite emails) │ │
69
+ • ui-components-expert (Workspace switcher & settings UI)
70
+ • senior-frontend (App shell & settings layout) │ │
71
+ │ • ui-ux-pro-max (Design system & accessible components) │
72
+ └────────────────────────────────────────────────────────────┘
73
+
74
+ ┌─── PHASE 6: SaaS Frontend & Landing ───────────────────────┐
75
+ │ │ • modern-web-guidance (MANDATORY: Modern web standards) │ │
76
+ │ │ • senior-frontend (App shell & responsive navigation) │ │
77
+ │ │ • tanstack-query-expert (Async state & optimistic UI) │ │
78
+ │ │ • multiple-entry-points (Separate app, landing & admin) │ │
79
+ • tailwind-expert / design-system-architect (Tokens & UI)
80
+ • seo-aeo-landing-page-writer (High-conversion landing) │ │
81
+ │ • seo / seo-geo (SEO, AEO & AI search readiness) │
82
+ │ │ • hig (Intuitive layout & visual consistency) │ │
83
+ └────────────────────────────────────────────────────────────┘
84
+
85
+ ┌─── PHASE 7: API Layer, Workers & Feature Gating ───────────┐
86
+ │ │ • api-design-expert (REST, GraphQL, API versioning) │ │
87
+ │ │ • rate-limit-abuse-prevention (Rate limiting & DDoS bot) │ │
88
+ │ │ • feature-flag-analytics-expert (Feature gating & flags) │ │
89
+ │ │ • async-queue-temporal-expert (Background job queues) │ │
90
+ │ │ • cron-scheduler-expert (Recurring cron metering tasks) │ │
91
+ • js-backend-expert / go-programming-expert (APIs)
92
+ • mcp-server-architect (AI tool endpoints & schemas) │ │
93
+ │ • multi-agent-orchestration (Autonomous agent workflows)
94
+ │ │ • scalability-clean-code (Clean architecture & SOLID) │ │
95
+ └────────────────────────────────────────────────────────────┘
96
+
97
+ ┌─── PHASE 8: Testing, Security & Quality Assurance ─────────┐
98
+ │ │ • e2e-testing-expert (Playwright E2E & Vitest flows) │ │
99
+ │ │ • browser-automation-expert (Visual regression testing) │ │
100
+ • secure-fuzz-testing (Input & stream parser fuzzing)
101
+ • error-resilience-expert (Retry logic & circuit breakers)│ │
102
+ │ • logging-error-tracking-expert (Structured logs & Sentry)│
103
+ │ │ • coderabbit (AI code review & PR summarization)
104
+ └────────────────────────────────────────────────────────────┘
105
+
106
+ ┌─── PHASE 9: Production Hardening, Cloud & Handoff ─────────┐
107
+ │ │ • production-ready-hardener (Comprehensive production audit)│
108
+ │ │ • cloud-hosting-expert (Edge middleware & custom domains) │ │
109
+ │ │ • ci-cd-devops-architect (Deployment pipelines & IaC) │ │
110
+ • data-telemetry-expert (Observability & PostHog metrics)
111
+ • performance-web-vitals (Lighthouse & Core Web Vitals) │ │
112
+ │ │ • session-handoff-resume (Save state checkpoint) │ │
113
+ │ │ • auto-doc-updater (CHANGELOG & BLUEPRINT automation) │ │
114
+ │ └────────────────────────────────────────────────────────────┘ │
115
+ │ │
116
+ └──────────────────────────────────────────────────────────────────┘
117
+ ```
118
+
119
+ ### Trigger Conditions
120
+ Activate this skill when the user:
121
+ 1. Has an existing application and wants to convert it into a SaaS product.
122
+ 2. Asks to "add multi-tenancy", "add billing/subscriptions", "make this a SaaS", "add team management", or similar requests that imply SaaS transformation.
123
+ 3. Wants to add workspace/organization-based isolation to an existing app.
124
+ 4. Needs to add pricing tiers, usage limits, or feature gating to an existing product.
125
+ 5. Asks for a "SaaS audit" or "SaaS readiness check" on an existing application.
126
+
127
+ ### Execution Protocol
128
+
129
+ When this skill is triggered, execute the following **9-phase transformation process in order**. Each phase produces findings and code changes. At the end, compile a **SaaS Transformation Report**.
130
+
131
+ > **Important:** Before starting, run the `saas_transformation_scanner.py` script to assess the current state of the application and determine which phases need the most work.
132
+
133
+ ---
134
+
135
+ #### PHASE 1: Discovery & Architecture Analysis
136
+ **Orchestrates:** `session-context-loader`, `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `spa-orchestrator`, `bun-runtime-expert`
137
+
138
+ **Goal:** Understand the existing application and plan the transformation, including architectural pivots.
139
+
140
+ **Steps:**
141
+ 1. **Audit the existing codebase** using `app-analyzer-optimizer`:
142
+ - Map all database tables/models and their relationships
143
+ - Identify authentication mechanism (if any)
144
+ - List all API endpoints and their access patterns
145
+ - Assess frontend architecture
146
+ 2. **Evaluate Core Architecture Shifts**:
147
+ - Consider `mpa-orchestrator` / `spa-orchestrator`: Should we consolidate into a Single Repo MPA or split into SPA micro-apps?
148
+ - Consider `bun-runtime-expert`: Is extreme performance required? Should we migrate to the Bun runtime?
149
+ 3. **Generate a SaaS PRD** using `prd-architect`:
150
+ - Define target customer segments and pricing tiers (Free, Pro, Enterprise)
151
+ - Establish usage limits per plan
152
+
153
+ **Deliverable:** SaaS Transformation Plan document.
154
+
155
+ **Checklist:**
156
+ - [ ] All existing database tables mapped
157
+ - [ ] Architecture pivot decisions finalized (MPA vs SPA, Node vs Bun)
158
+ - [ ] Target pricing tiers defined (at least Free + 1 paid tier)
159
+ - [ ] Tenancy model decided (shared-schema / schema-per-tenant)
160
+ - [ ] Auth & Billing providers selected
161
+
162
+ ---
163
+
164
+ #### PHASE 2: Multi-Tenancy Foundation
165
+ **Orchestrates:** `saas-multi-tenant`, `database-orm-expert`, `edge-serverless-db-expert`, `supabase-migration`, `supabase-security-expert` (for Shared Schema RLS)
166
+
167
+ **Goal:** Add tenant isolation to the database layer.
168
+
169
+ **Checklist:**
170
+ - [ ] Core SaaS tables created (`workspaces`, `workspace_members`, `workspace_invitations`)
171
+ - [ ] Decide on Tenancy Model (Shared Schema vs Isolated Schema)
172
+ - [ ] Add `tenant_id` / `workspace_id` to all scoped tables (if Shared Schema) or configure dynamic routing (if Isolated Schema) using `database-orm-expert`
173
+ - [ ] Apply RLS policies to restrict data access by tenant (if Shared Schema) via `supabase-security-expert`
174
+ - [ ] Edge database pooling and serverless connection management configured via `edge-serverless-db-expert`
175
+ - [ ] Tenant-aware middleware implemented
176
+ - [ ] Existing data backfilled with default tenant
177
+
178
+ ---
179
+
180
+ #### PHASE 3: Authentication & Authorization
181
+ **Orchestrates:** `authentication-identity-expert`, `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`, `zero-trust-secret-vault`
182
+
183
+ **Goal:** Implement production-grade auth with role-based access control and zero-trust secret management.
184
+
185
+ **Checklist:**
186
+ - [ ] Auth provider configured with email + at least 1 OAuth provider using `authentication-identity-expert`
187
+ - [ ] RBAC roles defined (owner, admin, member, viewer)
188
+ - [ ] Authorization middleware protects all routes/endpoints
189
+ - [ ] JWT custom claims include `workspace_id` and `role`
190
+ - [ ] Session Management Optimization: Implement Edge-ready session validation (e.g., Redis or JWT) to minimize database lookups
191
+ - [ ] API keys and secrets stored and rotated securely via `zero-trust-secret-vault`
192
+
193
+ ---
194
+
195
+ #### PHASE 4: Billing & Subscription
196
+ **Orchestrates:** `saas-billing`, `payment-gateway-expert`, `doku-payment-gateway`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`, `email-notification-expert`
197
+
198
+ **Goal:** Integrate payment processing, local billing sync, and automated transactional communications.
199
+
200
+ **Checklist:**
201
+ - [ ] Pricing tiers defined with Stripe / LemonSqueezy / DOKU products & prices
202
+ - [ ] Subscription table created with proper multi-gateway schema via `saas-billing`
203
+ - [ ] Payment gateway Checkout integration working (subscribe & upgrade flows) via `payment-gateway-expert` or `doku-payment-gateway`
204
+ - [ ] All critical webhooks handled with idempotency (payment succeeded, subscription updated, cancelled)
205
+ - [ ] Customer portal accessible (manage subscription, payment methods, invoices)
206
+ - [ ] Trial period implemented with expiry notifications sent via `email-notification-expert`
207
+
208
+ ---
209
+
210
+ #### PHASE 5: Workspace & Team Management
211
+ **Orchestrates:** `saas-multi-tenant`, `form-validation-expert`, `email-notification-expert`, `ui-components-expert`, `senior-frontend`, `ui-ux-pro-max`
212
+
213
+ **Goal:** Build workspace creation, team invitations, role management, and settings UI.
214
+
215
+ **Checklist:**
216
+ - [ ] Workspace CRUD operations working with strict validation (`form-validation-expert`)
217
+ - [ ] Workspace switching UI in navbar (`ui-components-expert`)
218
+ - [ ] Email invitation flow with secure token link sent via `email-notification-expert`
219
+ - [ ] Member role management (view, change, remove)
220
+ - [ ] Team size limits enforced by plan
221
+
222
+ ---
223
+
224
+ #### PHASE 6: SaaS Frontend & Landing
225
+ **Orchestrates:** `modern-web-guidance`, `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `design-system-architect`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig`
226
+
227
+ **Goal:** Build the SaaS frontend: app shell, dashboard, marketing pages, and super admin panel.
228
+
229
+ **Steps:**
230
+ 1. **Modern Web Standards (`modern-web-guidance`)**: **MANDATORY** - Always consult Google's modern web guidance before building frontend features to ensure the use of modern APIs, performance standards, and up-to-date best practices.
231
+ 2. **Architecture Separation (`multiple-entry-points`)**: Separate authenticated SaaS application from marketing pages and the Super Admin dashboard (which MUST be deployed on a separate subdomain like `admin.example.com` for application management).
232
+ 2. **State Management (`tanstack-query-expert`)**: Implement robust asynchronous state handling, ensuring optimistic UI updates (e.g., when a user updates their profile, the UI reflects it instantly while the server syncs).
233
+ 3. **App shell / Layout**: Authenticated layout with sidebar navigation, breadcrumbs, and workspace context.
234
+ 4. **Marketing / Landing page**: Convert users with a highly optimized, SEO/GEO friendly landing page created with `seo-aeo-landing-page-writer`.
235
+
236
+ **Checklist:**
237
+ - [ ] App shell with sidebar, header, workspace switcher
238
+ - [ ] Advanced data fetching with TanStack Query (no raw useEffects)
239
+ - [ ] Design system tokens configured with `design-system-architect` / `tailwind-expert`
240
+ - [ ] Settings pages (account, workspace, team, billing)
241
+ - [ ] Landing page with pricing and social proof
242
+ - [ ] **MANDATORY**: Automatically scaffold standard pages (About, Profile, Contact, Terms of Reference/Service, Privacy Policy).
243
+ - [ ] Super Admin dashboard deployed on a separate subdomain
244
+ - [ ] SEO meta tags and Structured data on all public pages (`seo` / `seo-geo`)
245
+
246
+ ---
247
+
248
+ #### PHASE 7: API Layer, Background Workers & Feature Gating
249
+ **Orchestrates:** `api-design-expert`, `rate-limit-abuse-prevention`, `feature-flag-analytics-expert`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `js-backend-expert`, `go-programming-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `scalability-clean-code`
250
+
251
+ **Goal:** Add API versioning, rate limiting, background job queues, and plan-based feature gating.
252
+
253
+ **Checklist:**
254
+ - [ ] API versioning implemented (`/api/v1/`) with OpenAPI specs (`api-design-expert`)
255
+ - [ ] Rate limiting and bot protection configured per plan via `rate-limit-abuse-prevention`
256
+ - [ ] Feature flag & gating middleware configured per subscription tier via `feature-flag-analytics-expert`
257
+ - [ ] Usage metering tracking API calls, storage, members, and background jobs
258
+ - [ ] Durable workflow background jobs configured via `async-queue-temporal-expert` / `cron-scheduler-expert`
259
+ - [ ] MCP Server endpoints exposed for AI agents via `mcp-server-architect`
260
+
261
+ ---
262
+
263
+ #### PHASE 8: Testing, Security & Quality Assurance
264
+ **Orchestrates:** `e2e-testing-expert`, `browser-automation-expert`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert`, `coderabbit`
265
+
266
+ **Goal:** Validate core business logic, ensure fault tolerance, and guarantee security before deployment.
267
+
268
+ **Steps:**
269
+ 1. **End-to-End Testing (`e2e-testing-expert`)**: Write Playwright tests for critical paths: Signup, Login, Stripe Checkout, and Workspace Invitation.
270
+ 2. **Visual & Automation Audit (`browser-automation-expert`)**: Validate responsive UI workflows and visual regression.
271
+ 3. **Security & Fuzzing (`secure-fuzz-testing`)**: Write coverage-guided fuzz tests for custom data parsers, file uploads, or binary data streams to prevent memory leaks and unexpected crashes.
272
+ 4. **Resilience & Observability (`error-resilience-expert`, `logging-error-tracking-expert`)**: Configure circuit breakers, retry strategies, structured logging, and Sentry error tracking.
273
+ 5. **Automated Review (`coderabbit`)**: Configure CodeRabbit to automatically review all PRs going into main, ensuring code quality and summarizing architectural changes.
274
+
275
+ **Checklist:**
276
+ - [ ] Playwright E2E tests passing for authentication & billing flows
277
+ - [ ] Fuzz tests implemented for critical parsers/endpoints
278
+ - [ ] Circuit breakers and retries configured for third-party API dependencies
279
+ - [ ] Structured logging and error tracking (Sentry) active
280
+ - [ ] `.coderabbit.yaml` configured for automated PR reviews
281
+ - [ ] All unit/integration tests (Vitest) passing in CI
282
+
283
+ ---
284
+
285
+ #### PHASE 9: Production Hardening, Cloud Deployment & Handoff
286
+ **Orchestrates:** `production-ready-hardener`, `cloud-hosting-expert`, `ci-cd-devops-architect`, `data-telemetry-expert`, `performance-web-vitals`, `session-handoff-resume`, `auto-doc-updater`
287
+
288
+ **Goal:** Harden the application, deploy to Edge/Cloud architecture, establish CI/CD pipelines, and document state.
289
+
290
+ **Steps:**
291
+ 1. **Hardening**: Run the full `production-ready-hardener` audit.
292
+ 2. **Edge & Cloud Deployment (`cloud-hosting-expert`, `ci-cd-devops-architect`)**:
293
+ - Deploy to Vercel/Cloudflare with CI/CD GitHub Actions pipelines.
294
+ - Configure Edge Middleware for tenant identification (e.g., rewriting `tenant1.myapp.com`).
295
+ - Implement custom domains using Cloudflare for SaaS.
296
+ 3. **Performance & Telemetry (`performance-web-vitals`, `data-telemetry-expert`)**: Ensure Core Web Vitals optimization and active telemetry tracking (OpenTelemetry / PostHog).
297
+ 4. **State Checkpoint & Documentation (`session-handoff-resume`, `auto-doc-updater`)**: Save ultra-compact state checkpoint and update `CHANGELOG.md` and `BLUEPRINT.md`.
298
+
299
+ **Checklist:**
300
+ - [ ] Production-ready-hardener audit score 85
301
+ - [ ] Edge Middleware configured for tenant routing
302
+ - [ ] Payment gateway live mode configured and tested
303
+ - [ ] Observability, telemetry, and error monitoring active
304
+ - [ ] Core Web Vitals pass Performance benchmarks (LCP < 2.5s, INP < 200ms)
305
+ - [ ] Documentation updated (CHANGELOG, BLUEPRINT, README)
306
+ - [ ] Session state checkpoint saved via `session-handoff-resume`
307
+
308
+ ---
309
+
310
+ ### SaaS Transformation Report Format
311
+
312
+ After completing all 9 phases, compile a **SaaS Transformation Report**:
313
+
314
+ ```markdown
315
+ # SaaS Transformation Report
316
+
317
+ ## Executive Summary
318
+ Overall transformation completeness (0-100%) with readiness grade (A/B/C/D/F).
319
+
320
+ ## Phase Scores
321
+ | Phase | Score | Status |
322
+ |-------|-------|--------|
323
+ | 1. Discovery & Architecture Analysis | XX/100 | ✅/⚠️/🔴 |
324
+ | 2. Multi-Tenancy Foundation | XX/100 | ✅/⚠️/🔴 |
325
+ | 3. Authentication & Authorization | XX/100 | ✅/⚠️/🔴 |
326
+ | 4. Billing & Subscription | XX/100 | ✅/⚠️/🔴 |
327
+ | 5. Workspace & Team Management | XX/100 | ✅/⚠️/🔴 |
328
+ | 6. SaaS Frontend & Landing | XX/100 | ✅/⚠️/🔴 |
329
+ | 7. API Layer & Feature Gating | XX/100 | ✅/⚠️/🔴 |
330
+ | 8. Testing, Security & QA | XX/100 | ✅/⚠️/🔴 |
331
+ | 9. Production Hardening & Cloud | XX/100 | ✅/⚠️/🔴 |
332
+
333
+ ## 📋 Recommended Next Steps
334
+ Prioritized action items for post-launch iteration.
335
+ ```
336
+
337
+ ### Scoring Methodology
338
+
339
+ Setiap fase dinilai 0-100 berdasarkan penyelesaian checklist:
340
+ - **95-100**: Complete
341
+ - **80-94**: Almost complete, minor gaps ⚠️
342
+ - **60-79**: Significant items missing 🟡
343
+ - **Below 60**: Phase not implemented 🔴
344
+
345
+ **Overall Score** = Weighted average:
346
+ - Discovery (5%) + Multi-Tenancy (**20%**) + Auth (10%) + Billing (**20%**) + Teams (10%) + Frontend (10%) + API & Gating (10%) + Testing (5%) + Production (10%)
347
+
348
+ ---
349
+
350
+ <a name="bahasa-indonesia"></a>
351
+ ## Bahasa Indonesia
352
+
353
+ ### Integrasi Orkestrasi
354
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
355
+
356
+ ### Deskripsi
357
+ **SaaS Transformer** adalah skill orkestrator utama yang memandu transformasi lengkap aplikasi biasa menjadi platform SaaS berfitur lengkap. Berbeda dengan `saas-mvp-launcher` (yang membangun dari nol) atau `saas-multi-tenant` (yang hanya menangani isolasi data), skill ini mengambil **aplikasi yang sudah berjalan** dan secara sistematis menambahkan setiap lapisan yang diperlukan untuk menjadikannya produk SaaS komersial.
358
+
359
+ Skill ini TIDAK menggantikan skill individual ia **mengoordinasikan** mereka ke dalam alur kerja transformasi terstruktur **9 fase**.
360
+
361
+ ### Peta Skill yang Diorkestrasi
362
+
363
+ | Fase | Skill yang Digunakan | Fokus Utama |
364
+ |------|---------------------|-------------|
365
+ | 1. Discovery & Arsitektur | `session-context-loader`, `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `spa-orchestrator`, `bun-runtime-expert` | Muat konteks, audit codebase, evaluasi MPA vs SPA & Bun runtime |
366
+ | 2. Fondasi Multi-Tenancy | `saas-multi-tenant`, `database-orm-expert`, `edge-serverless-db-expert`, `supabase-migration`, `supabase-security-expert` | Model Shared/Isolated Schema, RLS, ORM schema & edge database pooling |
367
+ | 3. Autentikasi & Otorisasi | `authentication-identity-expert`, `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`, `zero-trust-secret-vault` | OAuth2/OIDC, RBAC/ABAC, JWT custom claims, session Edge & secret vault |
368
+ | 4. Billing & Langganan | `saas-billing`, `payment-gateway-expert`, `doku-payment-gateway`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`, `email-notification-expert` | Stripe/Midtrans/DOKU, webhook idempotency, sync billing & notifikasi email |
369
+ | 5. Workspace & Tim | `saas-multi-tenant`, `form-validation-expert`, `email-notification-expert`, `ui-components-expert`, `senior-frontend`, `ui-ux-pro-max` | Invite flow, token link, manajemen role, UI workspace switcher |
370
+ | 6. Frontend SaaS & Landing | `modern-web-guidance`, `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `design-system-architect`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig` | Standar web modern, Separation (App/Landing/Admin), TanStack Query state, landing page SEO |
371
+ | 7. API & Feature Gating | `api-design-expert`, `rate-limit-abuse-prevention`, `feature-flag-analytics-expert`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `js-backend-expert`, `go-programming-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `scalability-clean-code` | REST/OpenAPI, rate limiting, feature gating, background jobs & MCP tools |
372
+ | 8. Pengujian, Keamanan & QA | `e2e-testing-expert`, `browser-automation-expert`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert`, `coderabbit` | Playwright E2E, fuzz testing, error resilience (retry/circuit breaker) & CodeRabbit |
373
+ | 9. Pengerasan Produksi & Cloud | `production-ready-hardener`, `cloud-hosting-expert`, `ci-cd-devops-architect`, `data-telemetry-expert`, `performance-web-vitals`, `session-handoff-resume`, `auto-doc-updater` | Edge middleware, CI/CD pipeline, Core Web Vitals, checkpoint & auto-doc |
374
+
375
+ ### Kondisi Pemicu
376
+ Aktifkan skill ini ketika pengguna:
377
+ 1. Memiliki aplikasi yang sudah ada dan ingin mengkonversinya menjadi produk SaaS.
378
+ 2. Meminta untuk "menambahkan multi-tenancy", "menambahkan billing/langganan", "jadikan ini SaaS", "tambahkan manajemen tim", atau permintaan serupa.
379
+ 3. Ingin menambahkan isolasi berbasis workspace/organisasi ke aplikasi yang sudah ada.
380
+ 4. Perlu menambahkan tier harga, batas penggunaan, atau pembatasan fitur ke produk yang sudah ada.
381
+ 5. Meminta "audit SaaS" atau "pemeriksaan kesiapan SaaS" pada aplikasi yang sudah ada.
382
+
383
+ ### Protokol Eksekusi
384
+
385
+ Ketika skill ini dipicu, jalankan **9 fase transformasi secara berurutan**. Setiap fase menghasilkan temuan dan perubahan kode. Di akhir, compile sebuah **Laporan Transformasi SaaS**.
386
+
387
+ > **Penting:** Sebelum memulai, jalankan script `saas_transformation_scanner.py` untuk menilai kondisi aplikasi saat ini dan menentukan fase mana yang membutuhkan paling banyak pekerjaan.
388
+
389
+ ---
390
+
391
+ #### FASE 1: Discovery & Analisis Arsitektur
392
+ **Mengorkestrasi:** `session-context-loader`, `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `spa-orchestrator`, `bun-runtime-expert`
393
+
394
+ - [ ] Semua tabel/model database dipetakan
395
+ - [ ] Keputusan arsitektur (MPA vs SPA, Node vs Bun) dievaluasi
396
+ - [ ] Mekanisme autentikasi diidentifikasi
397
+ - [ ] Tier harga target ditentukan (minimal Free + 1 berbayar)
398
+ - [ ] Model tenancy diputuskan (Shared Schema vs Isolated Schema)
399
+ - [ ] Provider Auth & Billing dipilih
400
+
401
+ #### FASE 2: Fondasi Multi-Tenancy
402
+ **Mengorkestrasi:** `saas-multi-tenant`, `database-orm-expert`, `edge-serverless-db-expert`, `supabase-migration`, `supabase-security-expert` (untuk RLS Shared Schema)
403
+
404
+ - [ ] Tabel inti SaaS dibuat (`workspaces`, `workspace_members`, `workspace_invitations`)
405
+ - [ ] Tentukan Model Tenancy (Shared Schema vs Isolated Schema)
406
+ - [ ] Tambahkan `tenant_id` / `workspace_id` ke semua tabel terkait via `database-orm-expert`
407
+ - [ ] Terapkan kebijakan RLS untuk membatasi akses data per tenant via `supabase-security-expert`
408
+ - [ ] Konfigurasi edge database pooling dan connection management via `edge-serverless-db-expert`
409
+ - [ ] Middleware tenant-aware diimplementasikan
410
+ - [ ] Data existing di-backfill dengan tenant default
411
+
412
+ #### FASE 3: Autentikasi & Otorisasi
413
+ **Mengorkestrasi:** `authentication-identity-expert`, `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`, `zero-trust-secret-vault`
414
+
415
+ - [ ] Provider auth dikonfigurasi (email + minimal 1 OAuth) menggunakan `authentication-identity-expert`
416
+ - [ ] Role RBAC didefinisikan (owner, admin, member, viewer)
417
+ - [ ] Middleware otorisasi melindungi semua route/endpoint
418
+ - [ ] JWT custom claims mencakup `workspace_id` dan `role`
419
+ - [ ] Optimasi Session Management: Implementasikan validasi sesi Edge-ready (contoh: Redis atau JWT) untuk meminimalkan beban query ke database
420
+ - [ ] API keys dan rahasia disimpan & dirotasi aman via `zero-trust-secret-vault`
421
+
422
+ #### FASE 4: Billing & Langganan
423
+ **Mengorkestrasi:** `saas-billing`, `payment-gateway-expert`, `doku-payment-gateway`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`, `email-notification-expert`
424
+
425
+ - [ ] Tier harga didefinisikan pada Stripe / LemonSqueezy / DOKU
426
+ - [ ] Tabel subscription dibuat dengan schema multi-gateway via `saas-billing`
427
+ - [ ] Integrasi Checkout (subscribe & upgrade) berfungsi via `payment-gateway-expert` atau `doku-payment-gateway`
428
+ - [ ] Semua webhook kritis ditangani dengan idempotency (pembayaran berhasil, langganan berubah, pembatalan)
429
+ - [ ] Portal pelanggan diakses (manajemen langganan, metode pembayaran, invoice)
430
+ - [ ] Penanganan periode trial dan notifikasi email via `email-notification-expert`
431
+
432
+ #### FASE 5: Workspace & Manajemen Tim
433
+ **Mengorkestrasi:** `saas-multi-tenant`, `form-validation-expert`, `email-notification-expert`, `ui-components-expert`, `senior-frontend`, `ui-ux-pro-max`
434
+
435
+ - [ ] CRUD workspace berfungsi dengan validasi ketat (`form-validation-expert`)
436
+ - [ ] UI workspace switching di navbar (`ui-components-expert`)
437
+ - [ ] Flow terima/tolak undangan dengan link token unik dikirim via `email-notification-expert`
438
+ - [ ] Manajemen role anggota (lihat, ubah, hapus)
439
+ - [ ] Batas ukuran tim berdasarkan plan
440
+
441
+ #### FASE 6: Frontend SaaS & Landing
442
+ **Mengorkestrasi:** `modern-web-guidance`, `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `design-system-architect`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig`
443
+
444
+ - [ ] **MANDATORY**: Konsultasikan panduan web modern Google (`modern-web-guidance`) terlebih dahulu sebelum membangun fitur frontend.
445
+ - [ ] Arsitektur dipisah antara aplikasi SaaS, landing page, dan Super Admin (`multiple-entry-points`)
446
+ - [ ] Dashboard Super Admin untuk manajemen aplikasi (wajib di-deploy pada subdomain terpisah seperti `admin.domain.com`)
447
+ - [ ] App shell dengan sidebar, header, workspace switcher
448
+ - [ ] Pengambilan data (data fetching) modern dengan TanStack Query
449
+ - [ ] Design system tokens dikonfigurasi via `design-system-architect` / `tailwind-expert`
450
+ - [ ] Landing page teroptimasi SEO dengan pricing dan social proof (`seo-aeo-landing-page-writer`)
451
+ - [ ] **MANDATORY**: Otomatis buat halaman standar (About, Profile, Contact, Terms of Reference/Service, Privacy Policy).
452
+
453
+ #### FASE 7: API & Feature Gating
454
+ **Mengorkestrasi:** `api-design-expert`, `rate-limit-abuse-prevention`, `feature-flag-analytics-expert`, `async-queue-temporal-expert`, `cron-scheduler-expert`, `js-backend-expert`, `go-programming-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `scalability-clean-code`
455
+
456
+ - [ ] API versioning diimplementasikan (`/api/v1/`) dengan dokumentasi OpenAPI (`api-design-expert`)
457
+ - [ ] Rate limiting dan proteksi bot dikonfigurasi per plan via `rate-limit-abuse-prevention`
458
+ - [ ] Sistem feature flags / gating operasional per plan tier via `feature-flag-analytics-expert`
459
+ - [ ] Usage metering melacak API calls, storage, members, dan background jobs
460
+ - [ ] Background job queues berdurabilitas tinggi via `async-queue-temporal-expert` / `cron-scheduler-expert`
461
+ - [ ] Endpoint MCP Server terekspos untuk agen AI via `mcp-server-architect`
462
+
463
+ #### FASE 8: Pengujian, Keamanan & QA
464
+ **Mengorkestrasi:** `e2e-testing-expert`, `browser-automation-expert`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert`, `coderabbit`
465
+
466
+ - [ ] Playwright E2E test disiapkan untuk alur penting (login, checkout, undangan team)
467
+ - [ ] Fuzz testing diimplementasikan untuk keamanan parser data (`secure-fuzz-testing`)
468
+ - [ ] Ketahanan error (circuit breaker & retry logic) dan logging terstruktur (Sentry) aktif
469
+ - [ ] CodeRabbit dikonfigurasi (`.coderabbit.yaml`) untuk AI code review di CI/CD
470
+ - [ ] Unit test dan integration test (Vitest) lulus di CI
471
+
472
+ #### FASE 9: Pengerasan Produksi & Deployment Cloud
473
+ **Mengorkestrasi:** `production-ready-hardener`, `cloud-hosting-expert`, `ci-cd-devops-architect`, `data-telemetry-expert`, `performance-web-vitals`, `session-handoff-resume`, `auto-doc-updater`
474
+
475
+ - [ ] Skor audit production-ready-hardener ≥ 85
476
+ - [ ] Middleware Edge (Vercel/Cloudflare) dikonfigurasi untuk routing multi-tenant
477
+ - [ ] Pipeline CI/CD dikonfigurasi dengan GitHub Actions (`ci-cd-devops-architect`)
478
+ - [ ] Mode Payment Gateway Live dikonfigurasi & diuji
479
+ - [ ] Monitoring error, analitik, dan telemetri aktif (`data-telemetry-expert`)
480
+ - [ ] Optimasi Core Web Vitals lulus (LCP < 2.5s, INP < 200ms)
481
+ - [ ] Dokumentasi diperbarui (CHANGELOG, BLUEPRINT, README)
482
+ - [ ] Session state checkpoint disimpan via `session-handoff-resume`
483
+
484
+ ---
485
+
486
+ ### Metodologi Penilaian
487
+
488
+ Setiap fase dinilai 0-100 berdasarkan penyelesaian checklist:
489
+ - **95-100**: Selesai
490
+ - **80-94**: Hampir selesai, gap minor ⚠️
491
+ - **60-79**: Item signifikan hilang 🟡
492
+ - **Di bawah 60**: Fase belum diimplementasikan 🔴
493
+
494
+ **Skor Keseluruhan** = Rata-rata berbobot:
495
+ - Discovery (5%) + Multi-Tenancy (**20%**) + Auth (10%) + Billing (**20%**) + Teams (10%) + Frontend (10%) + API & Gating (10%) + Pengujian (5%) + Produksi (10%)
496
+
497
+ ### Referensi Dokumentasi
498
+ - [SaaS Transformation Checklist](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/saas_transformation_checklist.md)
499
+ - [Billing Integration Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/billing_integration_guide.md)
500
+ - [Feature Gating Patterns](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/feature_gating_patterns.md)