vibes-plug 1.0.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 (141) hide show
  1. package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  2. package/BLUEPRINT.md +125 -0
  3. package/CHANGELOG.md +195 -0
  4. package/CONTRIBUTING.md +199 -0
  5. package/LICENSE +21 -0
  6. package/README.md +263 -0
  7. package/SECURITY.md +21 -0
  8. package/banner.png +0 -0
  9. package/package.json +25 -0
  10. package/plugin.json +8 -0
  11. package/scripts/update_skills.js +75 -0
  12. package/skills/ai-llm-integration-expert/SKILL.md +162 -0
  13. package/skills/api-design-expert/SKILL.md +310 -0
  14. package/skills/app-analyzer-optimizer/SKILL.md +189 -0
  15. package/skills/asisten_ramah/SKILL.md +41 -0
  16. package/skills/authentication-identity-expert/SKILL.md +45 -0
  17. package/skills/auto-doc-updater/SKILL.md +204 -0
  18. package/skills/bootstrap-to-modern/SKILL.md +87 -0
  19. package/skills/brainstorming/SKILL.md +353 -0
  20. package/skills/bun-runtime-expert/SKILL.md +211 -0
  21. package/skills/ci-cd-devops-architect/SKILL.md +45 -0
  22. package/skills/cloud-hosting-expert/SKILL.md +244 -0
  23. package/skills/coderabbit/SKILL.md +192 -0
  24. package/skills/data-telemetry-expert/SKILL.md +213 -0
  25. package/skills/database-orm-expert/SKILL.md +294 -0
  26. package/skills/design-system-architect/SKILL.md +243 -0
  27. package/skills/e2e-testing-expert/SKILL.md +315 -0
  28. package/skills/event-driven-architect/SKILL.md +81 -0
  29. package/skills/firebase-security-expert/SKILL.md +195 -0
  30. package/skills/fullstack-expert/SKILL.md +202 -0
  31. package/skills/fullstack-expert/references/api_design_guide.md +466 -0
  32. package/skills/fullstack-expert/references/devops_infrastructure.md +477 -0
  33. package/skills/fullstack-expert/references/multi_language_backend.md +528 -0
  34. package/skills/fullstack-expert/references/system_design_patterns.md +358 -0
  35. package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -0
  36. package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -0
  37. package/skills/gemini-agent-booster/SKILL.md +135 -0
  38. package/skills/global-a11y-i18n-expert/SKILL.md +81 -0
  39. package/skills/go-programming-expert/SKILL.md +295 -0
  40. package/skills/hig/SKILL.md +188 -0
  41. package/skills/js-backend-expert/SKILL.md +192 -0
  42. package/skills/mcp-server-architect/SKILL.md +194 -0
  43. package/skills/mobile-expo-expert/SKILL.md +186 -0
  44. package/skills/monday-design-aesthetic/SKILL.md +67 -0
  45. package/skills/monorepo-architect/SKILL.md +227 -0
  46. package/skills/mpa-orchestrator/SKILL.md +101 -0
  47. package/skills/multi-agent-orchestration/SKILL.md +234 -0
  48. package/skills/multiple-entry-points/SKILL.md +55 -0
  49. package/skills/mvc-expert/SKILL.md +231 -0
  50. package/skills/payment-gateway-expert/SKILL.md +45 -0
  51. package/skills/performance-web-vitals/SKILL.md +332 -0
  52. package/skills/prd-architect/SKILL.md +191 -0
  53. package/skills/production-ready-hardener/SKILL.md +469 -0
  54. package/skills/production-ready-hardener/references/performance_optimization.md +441 -0
  55. package/skills/production-ready-hardener/references/production_checklist.md +161 -0
  56. package/skills/production-ready-hardener/references/security_hardening_guide.md +379 -0
  57. package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +875 -0
  58. package/skills/python-programming-expert/SKILL.md +271 -0
  59. package/skills/realtime-collaboration-expert/SKILL.md +45 -0
  60. package/skills/rust-programming-expert/SKILL.md +235 -0
  61. package/skills/saas-billing/SKILL.md +377 -0
  62. package/skills/saas-multi-tenant/SKILL.md +237 -0
  63. package/skills/saas-mvp-launcher/SKILL.md +231 -0
  64. package/skills/saas-transformer/SKILL.md +446 -0
  65. package/skills/saas-transformer/references/billing_integration_guide.md +401 -0
  66. package/skills/saas-transformer/references/feature_gating_patterns.md +137 -0
  67. package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -0
  68. package/skills/saas-transformer/scripts/saas_transformation_scanner.py +254 -0
  69. package/skills/scalability-clean-code/SKILL.md +229 -0
  70. package/skills/secure-fuzz-testing/SKILL.md +201 -0
  71. package/skills/senior-frontend/SKILL.md +161 -0
  72. package/skills/senior-frontend/references/frontend_best_practices.md +806 -0
  73. package/skills/senior-frontend/references/nextjs_optimization_guide.md +724 -0
  74. package/skills/senior-frontend/references/react_patterns.md +746 -0
  75. package/skills/senior-frontend/scripts/bundle_analyzer.py +407 -0
  76. package/skills/senior-frontend/scripts/component_generator.py +329 -0
  77. package/skills/senior-frontend/scripts/frontend_scaffolder.py +1005 -0
  78. package/skills/senior-fullstack/SKILL.md +167 -0
  79. package/skills/senior-fullstack/references/architecture_patterns.md +160 -0
  80. package/skills/senior-fullstack/references/development_workflows.md +222 -0
  81. package/skills/senior-fullstack/references/tech_stack_guide.md +190 -0
  82. package/skills/senior-fullstack/scripts/code_quality_analyzer.py +114 -0
  83. package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +114 -0
  84. package/skills/senior-fullstack/scripts/project_scaffolder.py +114 -0
  85. package/skills/seo/SKILL.md +225 -0
  86. package/skills/seo/references/cwv-thresholds.md +108 -0
  87. package/skills/seo/references/eeat-framework.md +214 -0
  88. package/skills/seo/references/quality-gates.md +155 -0
  89. package/skills/seo/references/schema-types.md +118 -0
  90. package/skills/seo-aeo-landing-page-writer/SKILL.md +97 -0
  91. package/skills/seo-geo/SKILL.md +188 -0
  92. package/skills/session-handoff-resume/SKILL.md +158 -0
  93. package/skills/skill_baru/SKILL.md +147 -0
  94. package/skills/spa-orchestrator/SKILL.md +288 -0
  95. package/skills/state-management-expert/SKILL.md +272 -0
  96. package/skills/supabase-migration/SKILL.md +45 -0
  97. package/skills/supabase-security-expert/SKILL.md +243 -0
  98. package/skills/tailwind-expert/SKILL.md +188 -0
  99. package/skills/tanstack-query-expert/SKILL.md +199 -0
  100. package/skills/tauri-expert/SKILL.md +97 -0
  101. package/skills/token-saver/SKILL.md +111 -0
  102. package/skills/typescript-expert/SKILL.md +279 -0
  103. package/skills/ui-components-expert/SKILL.md +63 -0
  104. package/skills/ui-ux-pro-max/SKILL.md +201 -0
  105. package/skills/ui-ux-pro-max/data/charts.csv +26 -0
  106. package/skills/ui-ux-pro-max/data/colors.csv +97 -0
  107. package/skills/ui-ux-pro-max/data/icons.csv +101 -0
  108. package/skills/ui-ux-pro-max/data/landing.csv +31 -0
  109. package/skills/ui-ux-pro-max/data/products.csv +97 -0
  110. package/skills/ui-ux-pro-max/data/prompts.csv +24 -0
  111. package/skills/ui-ux-pro-max/data/react-performance.csv +45 -0
  112. package/skills/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  113. package/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  114. package/skills/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  115. package/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  116. package/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  117. package/skills/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  118. package/skills/ui-ux-pro-max/data/stacks/react.csv +54 -0
  119. package/skills/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  120. package/skills/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  121. package/skills/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  122. package/skills/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  123. package/skills/ui-ux-pro-max/data/styles.csv +59 -0
  124. package/skills/ui-ux-pro-max/data/typography.csv +58 -0
  125. package/skills/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
  126. package/skills/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  127. package/skills/ui-ux-pro-max/data/web-interface.csv +31 -0
  128. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
  129. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  130. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
  131. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
  132. package/skills/ui-ux-pro-max/scripts/core.py +257 -0
  133. package/skills/ui-ux-pro-max/scripts/design_system.py +493 -0
  134. package/skills/ui-ux-pro-max/scripts/search.py +81 -0
  135. package/skills/ui_ux_expert/SKILL.md +114 -0
  136. package/skills/vibe-code-gardener/SKILL.md +173 -0
  137. package/skills/web-scraper/SKILL.md +205 -0
  138. package/skills/web-scraper/references/data-transforms.md +397 -0
  139. package/skills/web-scraper/references/extraction-patterns.md +475 -0
  140. package/skills/web-scraper/references/output-templates.md +481 -0
  141. package/skills/zero-to-prod-orchestrator/SKILL.md +180 -0
@@ -0,0 +1,446 @@
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
+ 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
+ │ │ • app-analyzer-optimizer (Audit architecture & codebase) │ │
31
+ │ │ • prd-architect (Generate PRD for SaaS features) │ │
32
+ │ │ • brainstorming (Validate transformation strategy) │ │
33
+ │ │ • mpa-orchestrator (Evaluate MPA vs SPA architecture) │ │
34
+ │ │ • bun-runtime-expert / go-programming-expert │ │
35
+ │ └────────────────────────────────────────────────────────────┘ │
36
+ │ │
37
+ │ ┌─── PHASE 2: Multi-Tenancy Foundation ──────────────────────┐ │
38
+ │ │ • saas-multi-tenant (Shared/Isolated Schema, data isolation) │ │
39
+ │ │ • supabase-migration (Database migrations) │ │
40
+ │ │ • supabase-security-expert (Audit RLS & RBAC) │ │
41
+ │ └────────────────────────────────────────────────────────────┘ │
42
+ │ │
43
+ │ ┌─── PHASE 3: Authentication & Authorization ────────────────┐ │
44
+ │ │ • fullstack-expert (OAuth 2.0 / OIDC setup) │ │
45
+ │ │ • js-backend-expert / go-programming-expert (Auth RBAC) │ │
46
+ │ │ • supabase-security-expert (RBAC, Custom Claims) │ │
47
+ │ └────────────────────────────────────────────────────────────┘ │
48
+ │ │
49
+ │ ┌─── PHASE 4: Billing & Subscription ────────────────────────┐ │
50
+ │ │ • saas-billing (Gateway integration, webhooks, dunning) │ │
51
+ │ │ • saas-mvp-launcher (Stripe integration, pricing tiers) │ │
52
+ │ │ • fullstack-expert (Webhook handling, idempotency) │ │
53
+ │ │ • senior-frontend (Pricing page, customer portal UI) │ │
54
+ │ └────────────────────────────────────────────────────────────┘ │
55
+ │ │
56
+ │ ┌─── PHASE 5: Workspace & Team Management ───────────────────┐ │
57
+ │ │ • saas-multi-tenant (Workspace model, member roles) │ │
58
+ │ │ • design-system-architect (Radix/Base UI components) │ │
59
+ │ │ • senior-frontend (Invite flow, settings UI) │ │
60
+ │ │ • ui-ux-pro-max (Dashboard, onboarding UX) │ │
61
+ │ └────────────────────────────────────────────────────────────┘ │
62
+ │ │
63
+ │ ┌─── PHASE 6: SaaS Frontend & Marketing ─────────────────────┐ │
64
+ │ │ • senior-frontend (App shell, dashboard, settings) │ │
65
+ │ │ • design-system-architect (Tokens, Radix, CVA) │ │
66
+ │ │ • tanstack-query-expert (State & optimistic updates) │ │
67
+ │ │ • multiple-entry-points (Separate app vs landing page) │ │
68
+ │ │ • tailwind-expert (Design system, responsive) │ │
69
+ │ │ • seo-aeo-landing-page-writer (Conversion landing page) │ │
70
+ │ │ • seo / seo-geo (SEO & AI search readiness, llms.txt) │ │
71
+ │ └────────────────────────────────────────────────────────────┘ │
72
+ │ │
73
+ │ ┌─── PHASE 7: API Layer, AI Tools & Feature Gating ──────────┐ │
74
+ │ │ • js-backend-expert (Node 22, Bun, Fastify 5, Hono) │ │
75
+ │ │ • go-programming-expert (Go 1.23+ microservices, gRPC) │ │
76
+ │ │ • mcp-server-architect (MCP Server tools & Zod schemas) │ │
77
+ │ │ • multi-agent-orchestration (LangGraph multi-agent teams)│ │
78
+ │ │ • scalability-clean-code (Clean arch, SOLID) │ │
79
+ │ └────────────────────────────────────────────────────────────┘ │
80
+ │ │
81
+ │ ┌─── PHASE 8: Testing, Security & Quality Assurance ─────────┐ │
82
+ │ │ • e2e-testing-expert (Playwright/Vitest coverage) │ │
83
+ │ │ • secure-fuzz-testing (Validate parsers & data streams) │ │
84
+ │ │ • coderabbit (AI PR summarization & code review) │ │
85
+ │ └────────────────────────────────────────────────────────────┘ │
86
+ │ │
87
+ │ ┌─── PHASE 9: Production Hardening, Cloud & Handoff ─────────┐ │
88
+ │ │ • production-ready-hardener (Full 7-phase hardening) │ │
89
+ │ │ • cloud-hosting-expert (Edge middleware & custom domains)│ │
90
+ │ │ • session-handoff-resume (Save state checkpoint) │ │
91
+ │ │ • auto-doc-updater (CHANGELOG, BLUEPRINT) │ │
92
+ │ └────────────────────────────────────────────────────────────┘ │
93
+ │ │
94
+ └──────────────────────────────────────────────────────────────────┘
95
+ ```
96
+
97
+ ### Trigger Conditions
98
+ Activate this skill when the user:
99
+ 1. Has an existing application and wants to convert it into a SaaS product.
100
+ 2. Asks to "add multi-tenancy", "add billing/subscriptions", "make this a SaaS", "add team management", or similar requests that imply SaaS transformation.
101
+ 3. Wants to add workspace/organization-based isolation to an existing app.
102
+ 4. Needs to add pricing tiers, usage limits, or feature gating to an existing product.
103
+ 5. Asks for a "SaaS audit" or "SaaS readiness check" on an existing application.
104
+
105
+ ### Execution Protocol
106
+
107
+ 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**.
108
+
109
+ > **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.
110
+
111
+ ---
112
+
113
+ #### PHASE 1: Discovery & Architecture Analysis
114
+ **Orchestrates:** `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `bun-runtime-expert`
115
+
116
+ **Goal:** Understand the existing application and plan the transformation, including architectural pivots.
117
+
118
+ **Steps:**
119
+ 1. **Audit the existing codebase** using `app-analyzer-optimizer`:
120
+ - Map all database tables/models and their relationships
121
+ - Identify authentication mechanism (if any)
122
+ - List all API endpoints and their access patterns
123
+ - Assess frontend architecture
124
+
125
+ 2. **Evaluate Core Architecture Shifts**:
126
+ - Consider `mpa-orchestrator`: Should we consolidate into a Single Repo MPA or split into SPA micro-apps?
127
+ - Consider `bun-runtime-expert`: Is extreme performance required? Should we migrate to the Bun runtime?
128
+
129
+ 3. **Generate a SaaS PRD** using `prd-architect`:
130
+ - Define target customer segments and pricing tiers (Free, Pro, Enterprise)
131
+ - Establish usage limits per plan
132
+
133
+ **Deliverable:** SaaS Transformation Plan document.
134
+
135
+ **Checklist:**
136
+ - [ ] All existing database tables mapped
137
+ - [ ] Architecture pivot decisions finalized (MPA vs SPA, Node vs Bun)
138
+ - [ ] Target pricing tiers defined (at least Free + 1 paid tier)
139
+ - [ ] Tenancy model decided (shared-schema / schema-per-tenant)
140
+ - [ ] Auth & Billing providers selected
141
+
142
+ ---
143
+
144
+ #### PHASE 2: Multi-Tenancy Foundation
145
+ **Orchestrates:** `saas-multi-tenant`, `supabase-migration`, `supabase-security-expert` (for Shared Schema RLS)
146
+
147
+ **Goal:** Add tenant isolation to the database layer.
148
+
149
+ **Checklist:**
150
+ - [ ] Core SaaS tables created (workspaces, workspace_members, workspace_invitations)
151
+ - [ ] Decide on Tenancy Model (Shared Schema vs Isolated Schema)
152
+ - [ ] Add `tenant_id` to all scoped tables (if Shared Schema) or configure dynamic routing (if Isolated Schema)
153
+ - [ ] Apply RLS policies to restrict data access by tenant (if Shared Schema)
154
+ - [ ] Tenant-aware middleware implemented
155
+ - [ ] Existing data backfilled with default tenant
156
+
157
+ ---
158
+
159
+ #### PHASE 3: Authentication & Authorization
160
+ **Orchestrates:** `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`
161
+
162
+ **Goal:** Implement production-grade auth with role-based access.
163
+
164
+ **Checklist:**
165
+ - [ ] Auth provider configured with email + at least 1 OAuth provider
166
+ - [ ] RBAC roles defined (owner, admin, member, viewer)
167
+ - [ ] Authorization middleware protects all routes/endpoints
168
+ - [ ] JWT custom claims include workspace_id and role
169
+ - [ ] Session Management Optimization: Implement Edge-ready session validation (e.g., Redis or JWT) to minimize database lookups
170
+
171
+ ---
172
+
173
+ #### PHASE 4: Billing & Subscription
174
+ **Orchestrates:** `saas-billing`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`
175
+
176
+ **Goal:** Integrate payment processing and subscription management.
177
+
178
+ **Checklist:**
179
+ - [ ] Pricing tiers defined with Stripe products/prices
180
+ - [ ] Subscription table created with proper schema
181
+ - [ ] Stripe Checkout integration working (subscribe flow)
182
+ - [ ] All critical webhooks handled with idempotency
183
+ - [ ] Customer portal accessible (manage subscription, invoices)
184
+ - [ ] Trial period implemented with expiry notifications
185
+
186
+ ---
187
+
188
+ #### PHASE 5: Workspace & Team Management
189
+ **Orchestrates:** `saas-multi-tenant`, `senior-frontend`, `ui-ux-pro-max`
190
+
191
+ **Goal:** Build workspace creation, team invitations, and settings management.
192
+
193
+ **Checklist:**
194
+ - [ ] Workspace CRUD operations working
195
+ - [ ] Workspace switching UI in navbar
196
+ - [ ] Email invitation with unique token link
197
+ - [ ] Member role management (view, change, remove)
198
+ - [ ] Team size limits enforced by plan
199
+
200
+ ---
201
+
202
+ #### PHASE 6: SaaS Frontend & Landing
203
+ **Orchestrates:** `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `seo-aeo-landing-page-writer`, `seo`, `seo-geo`, `hig`
204
+
205
+ **Goal:** Build the SaaS frontend: app shell, dashboard, marketing pages, and super admin panel.
206
+
207
+ **Steps:**
208
+ 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).
209
+ 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).
210
+ 3. **App shell / Layout**: Authenticated layout with sidebar navigation, breadcrumbs, and workspace context.
211
+ 4. **Marketing / Landing page**: Convert users with a highly optimized, SEO/GEO friendly landing page.
212
+
213
+ **Checklist:**
214
+ - [ ] App shell with sidebar, header, workspace switcher
215
+ - [ ] Advanced data fetching with TanStack Query (no raw useEffects)
216
+ - [ ] Settings pages (account, workspace, team, billing)
217
+ - [ ] Landing page with pricing and social proof
218
+ - [ ] Super Admin dashboard deployed on a separate subdomain
219
+ - [ ] SEO meta tags and Structured data on all public pages
220
+ - [ ] Consistent design system (colors, typography, spacing)
221
+
222
+ ---
223
+
224
+ #### PHASE 7: API Layer & Feature Gating
225
+ **Orchestrates:** `fullstack-expert`, `scalability-clean-code`, `senior-fullstack`
226
+
227
+ **Goal:** Add API versioning, rate limiting, and plan-based feature restrictions.
228
+
229
+ **Checklist:**
230
+ - [ ] API versioning implemented (/api/v1/)
231
+ - [ ] Rate limiting configured per plan
232
+ - [ ] Feature-check middleware on gated routes
233
+ - [ ] Usage metering tracking API calls, storage, members
234
+ - [ ] Warning notifications at 80% and 100% usage
235
+
236
+ ---
237
+
238
+ #### PHASE 8: Testing, Security & Quality Assurance
239
+ **Orchestrates:** `e2e-testing-expert`, `secure-fuzz-testing`, `coderabbit`
240
+
241
+ **Goal:** Validate core business logic and guarantee security before deployment.
242
+
243
+ **Steps:**
244
+ 1. **End-to-End Testing (`e2e-testing-expert`)**: Write Playwright tests for critical paths: Signup, Login, Stripe Checkout, and Workspace Invitation.
245
+ 2. **Security & Fuzzing (`secure-fuzz-testing`)**: Write coverage-guided fuzz tests for any custom data parsers, file uploads, or binary data streams to prevent memory leaks and unexpected crashes.
246
+ 3. **Automated Review (`coderabbit`)**: Configure CodeRabbit to automatically review all PRs going into main, ensuring code quality and summarizing architectural changes.
247
+
248
+ **Checklist:**
249
+ - [ ] Playwright E2E tests passing for authentication & billing flows
250
+ - [ ] Fuzz tests implemented for critical parsers/endpoints
251
+ - [ ] `.coderabbit.yaml` configured for automated PR reviews
252
+ - [ ] All unit/integration tests (Vitest) passing in CI
253
+
254
+ ---
255
+
256
+ #### PHASE 9: Production Hardening & Cloud Deployment
257
+ **Orchestrates:** `production-ready-hardener`, `cloud-hosting-expert`, `auto-doc-updater`, `saas-mvp-launcher`
258
+
259
+ **Goal:** Harden the application and deploy to Edge/Cloud architecture.
260
+
261
+ **Steps:**
262
+ 1. **Hardening**: Run the full `production-ready-hardener` audit.
263
+ 2. **Edge Deployment (`cloud-hosting-expert`)**:
264
+ - Deploy to Vercel/Cloudflare.
265
+ - Configure Edge Middleware for tenant identification (e.g., rewriting `tenant1.myapp.com`).
266
+ - Implement custom domains using Cloudflare for SaaS.
267
+ 3. **Pre-launch**: Update `CHANGELOG.md` and complete the launch checklist.
268
+
269
+ **Checklist:**
270
+ - [ ] Production-ready-hardener audit score ≥ 85
271
+ - [ ] Edge Middleware configured for tenant routing
272
+ - [ ] Stripe live mode configured and tested
273
+ - [ ] Error monitoring and analytics active
274
+ - [ ] Documentation updated (CHANGELOG, BLUEPRINT, README)
275
+ - [ ] Pre-launch checklist 100% complete
276
+
277
+ ---
278
+
279
+ ### SaaS Transformation Report Format
280
+
281
+ After completing all 9 phases, compile a **SaaS Transformation Report**:
282
+
283
+ ```markdown
284
+ # SaaS Transformation Report
285
+
286
+ ## Executive Summary
287
+ Overall transformation completeness (0-100%) with readiness grade (A/B/C/D/F).
288
+
289
+ ## Phase Scores
290
+ | Phase | Score | Status |
291
+ |-------|-------|--------|
292
+ | 1. Discovery & Architecture Analysis | XX/100 | ✅/⚠️/🔴 |
293
+ | 2. Multi-Tenancy Foundation | XX/100 | ✅/⚠️/🔴 |
294
+ | 3. Authentication & Authorization | XX/100 | ✅/⚠️/🔴 |
295
+ | 4. Billing & Subscription | XX/100 | ✅/⚠️/🔴 |
296
+ | 5. Workspace & Team Management | XX/100 | ✅/⚠️/🔴 |
297
+ | 6. SaaS Frontend & Landing | XX/100 | ✅/⚠️/🔴 |
298
+ | 7. API Layer & Feature Gating | XX/100 | ✅/⚠️/🔴 |
299
+ | 8. Testing, Security & QA | XX/100 | ✅/⚠️/🔴 |
300
+ | 9. Production Hardening & Cloud | XX/100 | ✅/⚠️/🔴 |
301
+
302
+ ## 📋 Recommended Next Steps
303
+ Prioritized action items for post-launch iteration.
304
+ ```
305
+
306
+ ### Scoring Methodology
307
+
308
+ Each phase is scored 0-100 based on checklist completion.
309
+
310
+ **Overall Score** = Weighted average:
311
+ - Discovery (5%) + Multi-Tenancy (**20%**) + Auth (10%) + Billing (**20%**) + Teams (10%) + Frontend (10%) + API & Gating (10%) + Testing (5%) + Production (10%)
312
+
313
+ ---
314
+
315
+ <a name="bahasa-indonesia"></a>
316
+ ## Bahasa Indonesia
317
+
318
+ ### Deskripsi
319
+ **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.
320
+
321
+ Skill ini TIDAK menggantikan skill individual — ia **mengoordinasikan** mereka ke dalam alur kerja transformasi terstruktur **9 fase**.
322
+
323
+ ### Peta Skill yang Diorkestrasi
324
+
325
+ | Fase | Skill yang Digunakan | Fokus |
326
+ |------|---------------------|-------|
327
+ | 1. Discovery & Arsitektur | `app-analyzer-optimizer`, `prd-architect`, `mpa-orchestrator`, `bun-runtime-expert` | Audit codebase, MPA vs SPA, evaluasi Bun |
328
+ | 2. Fondasi Multi-Tenancy | `saas-multi-tenant`, `supabase-migration`, `supabase-security-expert` | Shared/Isolated Schema, RLS, isolasi data |
329
+ | 3. Autentikasi & Otorisasi | `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert` | OAuth/OIDC, RBAC, JWT claims |
330
+ | 4. Billing & Langganan | `saas-billing`, `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend` | Stripe/Midtrans, webhook, dunning |
331
+ | 5. Workspace & Tim | `saas-multi-tenant`, `senior-frontend`, `ui-ux-pro-max` | Invite, roles, onboarding |
332
+ | 6. Frontend SaaS & Landing | `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `seo-aeo-landing-page-writer`, `seo` | App shell, TanStack Query state, marketing |
333
+ | 7. API & Feature Gating | `fullstack-expert`, `scalability-clean-code`, `senior-fullstack` | Versioning, rate limit, usage metering |
334
+ | 8. Pengujian, Keamanan & QA | `e2e-testing-expert`, `secure-fuzz-testing`, `coderabbit` | Playwright E2E, Fuzz testing, AI Code Review |
335
+ | 9. Pengerasan Produksi & Cloud | `production-ready-hardener`, `cloud-hosting-expert`, `auto-doc-updater` | Edge middleware, Vercel/Cloudflare, dokumentasi |
336
+
337
+ ### Kondisi Pemicu
338
+ Aktifkan skill ini ketika pengguna:
339
+ 1. Memiliki aplikasi yang sudah ada dan ingin mengkonversinya menjadi produk SaaS.
340
+ 2. Meminta untuk "menambahkan multi-tenancy", "menambahkan billing/langganan", "jadikan ini SaaS", "tambahkan manajemen tim", atau permintaan serupa.
341
+ 3. Ingin menambahkan isolasi berbasis workspace/organisasi ke aplikasi yang sudah ada.
342
+ 4. Perlu menambahkan tier harga, batas penggunaan, atau pembatasan fitur ke produk yang sudah ada.
343
+ 5. Meminta "audit SaaS" atau "pemeriksaan kesiapan SaaS" pada aplikasi yang sudah ada.
344
+
345
+ ### Protokol Eksekusi
346
+
347
+ Ketika skill ini dipicu, jalankan **9 fase transformasi secara berurutan**. Setiap fase menghasilkan temuan dan perubahan kode. Di akhir, compile sebuah **Laporan Transformasi SaaS**.
348
+
349
+ > **Penting:** Sebelum memulai, jalankan script `saas_transformation_scanner.py` untuk menilai kondisi aplikasi saat ini dan menentukan fase mana yang membutuhkan paling banyak pekerjaan.
350
+
351
+ ---
352
+
353
+ #### FASE 1: Discovery & Analisis Arsitektur
354
+ **Mengorkestrasi:** `app-analyzer-optimizer`, `prd-architect`, `brainstorming`, `mpa-orchestrator`, `bun-runtime-expert`
355
+
356
+ - [ ] Semua tabel/model database dipetakan
357
+ - [ ] Keputusan arsitektur (MPA vs SPA, Node vs Bun) dievaluasi
358
+ - [ ] Mekanisme autentikasi diidentifikasi
359
+ - [ ] Tier harga target ditentukan (minimal Free + 1 berbayar)
360
+ - [ ] Model tenancy diputuskan
361
+
362
+ #### FASE 2: Fondasi Multi-Tenancy
363
+ **Mengorkestrasi:** `saas-multi-tenant`, `supabase-migration`, `supabase-security-expert` (untuk RLS Shared Schema)
364
+
365
+ - [ ] Tentukan Model Tenancy (Shared Schema vs Isolated Schema)
366
+ - [ ] Tambahkan `tenant_id` ke semua tabel terkait (jika Shared Schema) atau konfigurasi routing dinamis (jika Isolated Schema)
367
+ - [ ] Terapkan kebijakan RLS untuk membatasi akses data per tenant (jika Shared Schema)
368
+ - [ ] Middleware tenant-aware diimplementasikan
369
+ - [ ] Data existing di-backfill dengan tenant default
370
+
371
+ #### FASE 3: Autentikasi & Otorisasi
372
+ **Mengorkestrasi:** `fullstack-expert`, `supabase-security-expert`, `firebase-security-expert`
373
+
374
+ - [ ] Provider auth dikonfigurasi (email + minimal 1 OAuth)
375
+ - [ ] Role RBAC didefinisikan (owner, admin, member, viewer)
376
+ - [ ] Middleware otorisasi melindungi semua route/endpoint
377
+ - [ ] Optimasi Session Management: Implementasikan validasi sesi Edge-ready (contoh: Redis atau JWT custom claims) untuk meminimalkan beban query ke database
378
+
379
+ #### FASE 4: Billing & Langganan
380
+ **Mengorkestrasi:** `saas-mvp-launcher`, `fullstack-expert`, `senior-frontend`
381
+
382
+ - [ ] Tabel subscription dibuat dengan schema multi-gateway
383
+ - [ ] Integrasi Checkout (hosted session/widget) berfungsi
384
+ - [ ] Semua webhook kritis ditangani dengan idempotency
385
+ - [ ] Penanganan pembayaran gagal (dunning management) dikonfigurasi
386
+
387
+ #### FASE 5: Workspace & Manajemen Tim
388
+ **Mengorkestrasi:** `saas-multi-tenant`, `senior-frontend`, `ui-ux-pro-max`
389
+
390
+ - [ ] UI workspace switching di navbar
391
+ - [ ] Flow terima/tolak undangan dengan link token unik
392
+ - [ ] Manajemen role anggota (lihat, ubah, hapus)
393
+ - [ ] Batas ukuran tim berdasarkan plan
394
+
395
+ #### FASE 6: Frontend SaaS & Landing
396
+ **Mengorkestrasi:** `senior-frontend`, `tanstack-query-expert`, `multiple-entry-points`, `tailwind-expert`, `seo-aeo-landing-page-writer`, `seo`, `hig`
397
+
398
+ - [ ] Arsitektur dipisah antara aplikasi SaaS, landing page, dan Super Admin (`multiple-entry-points`)
399
+ - [ ] Dashboard Super Admin untuk manajemen aplikasi (wajib di-deploy pada subdomain terpisah seperti `admin.domain.com`)
400
+ - [ ] App shell dengan sidebar, header, workspace switcher
401
+ - [ ] Pengambilan data (data fetching) modern dengan TanStack Query
402
+ - [ ] Dashboard dengan metrik dan grafik penggunaan
403
+ - [ ] Landing page teroptimasi SEO dengan pricing dan social proof
404
+
405
+ #### FASE 7: API & Feature Gating
406
+ **Mengorkestrasi:** `fullstack-expert`, `scalability-clean-code`, `senior-fullstack`
407
+
408
+ - [ ] API versioning diimplementasikan (/api/v1/)
409
+ - [ ] Rate limiting dikonfigurasi per plan
410
+ - [ ] Sistem feature flags/gating operasional
411
+ - [ ] Usage metering melacak API calls, storage, members
412
+
413
+ #### FASE 8: Pengujian, Keamanan & QA
414
+ **Mengorkestrasi:** `e2e-testing-expert`, `secure-fuzz-testing`, `coderabbit`
415
+
416
+ - [ ] Playwright E2E test disiapkan untuk alur penting (login, checkout)
417
+ - [ ] Fuzz testing diimplementasikan untuk keamanan parser data
418
+ - [ ] CodeRabbit dikonfigurasi (`.coderabbit.yaml`) untuk AI code review di CI/CD
419
+ - [ ] Unit test dan integration test (Vitest) lulus di CI
420
+
421
+ #### FASE 9: Pengerasan Produksi & Deployment Cloud
422
+ **Mengorkestrasi:** `production-ready-hardener`, `cloud-hosting-expert`, `auto-doc-updater`, `saas-mvp-launcher`
423
+
424
+ - [ ] Skor audit production-ready-hardener ≥ 85
425
+ - [ ] Middleware Edge (Vercel/Cloudflare) dikonfigurasi untuk routing multi-tenant
426
+ - [ ] Mode Stripe Live dikonfigurasi
427
+ - [ ] Monitoring error dan analytics aktif
428
+ - [ ] Dokumentasi diperbarui (CHANGELOG, BLUEPRINT, README)
429
+
430
+ ---
431
+
432
+ ### Metodologi Penilaian
433
+
434
+ Setiap fase dinilai 0-100 berdasarkan penyelesaian checklist:
435
+ - **95-100**: Selesai ✅
436
+ - **80-94**: Hampir selesai, gap minor ⚠️
437
+ - **60-79**: Item signifikan hilang 🟡
438
+ - **Di bawah 60**: Fase belum diimplementasikan 🔴
439
+
440
+ **Skor Keseluruhan** = Rata-rata berbobot:
441
+ - Discovery (5%) + Multi-Tenancy (**20%**) + Auth (10%) + Billing (**20%**) + Teams (10%) + Frontend (10%) + API & Gating (10%) + Pengujian (5%) + Produksi (10%)
442
+
443
+ ### Referensi Dokumentasi
444
+ - [SaaS Transformation Checklist](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/saas_transformation_checklist.md)
445
+ - [Billing Integration Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/billing_integration_guide.md)
446
+ - [Feature Gating Patterns](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/saas-transformer/references/feature_gating_patterns.md)