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,310 @@
1
+ ---
2
+ name: api-design-expert
3
+ description: "Expert guide for designing robust APIs: REST best practices, GraphQL, gRPC, tRPC, OpenAPI/Swagger, API versioning, rate limiting, and contract-first design / Panduan ahli untuk merancang API yang kuat: praktik terbaik REST, GraphQL, gRPC, tRPC, OpenAPI/Swagger, versioning API, rate limiting, dan desain contract-first."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # API Design Expert
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Description
17
+ Expert guide for designing, documenting, and evolving production-grade APIs. Covers **REST** resource modeling and HTTP semantics, **GraphQL** schema design, **gRPC** with protobuf, and **tRPC** for end-to-end type-safe APIs in TypeScript monorepos. Includes OpenAPI 3.1 documentation, API versioning strategies, rate limiting, idempotency, and contract-first development workflows.
18
+
19
+ ### Trigger Conditions
20
+ - Designing a new API from scratch (REST, GraphQL, gRPC, or tRPC).
21
+ - Evolving an existing API without breaking clients.
22
+ - Documenting APIs with OpenAPI/Swagger.
23
+ - Implementing rate limiting, throttling, or idempotency.
24
+ - Choosing between REST, GraphQL, gRPC, and tRPC.
25
+ - Designing webhook systems.
26
+ - Implementing API authentication (API keys, JWT, OAuth2).
27
+
28
+ ---
29
+
30
+ ### API Protocol Selection Guide
31
+
32
+ | Criteria | REST | GraphQL | gRPC | tRPC |
33
+ |---|---|---|---|---|
34
+ | **Type Safety** | Manual (OpenAPI) | Schema-enforced | Protobuf | End-to-end TS |
35
+ | **Performance** | Good | Good | Excellent (HTTP/2) | Good |
36
+ | **Browser Support** | Native | Native | Needs proxy | TS/JS only |
37
+ | **Streaming** | SSE / WebSocket | Subscriptions | Native bi-directional | SSE |
38
+ | **Best For** | Public APIs, mobile | Complex data graphs | Microservice-to-service | Next.js full-stack |
39
+ | **Tooling** | Universal | Rich ecosystem | Strong (Go, Java) | Next.js / Expo |
40
+
41
+ ---
42
+
43
+ ### REST API Design Principles
44
+
45
+ #### Resource Naming Conventions
46
+ ```
47
+ Collection: GET /api/v1/posts
48
+ Item: GET /api/v1/posts/{id}
49
+ Sub-resource:GET /api/v1/posts/{id}/comments
50
+ Action: POST /api/v1/posts/{id}/publish (use sparingly)
51
+
52
+ AVOID: /api/v1/getPosts, /api/v1/createPost, /api/v1/deletePost/{id}
53
+ ```
54
+
55
+ #### HTTP Method Semantics
56
+ | Method | Idempotent | Safe | Use Case |
57
+ |---|---|---|---|
58
+ | `GET` | Yes | Yes | Retrieve resources |
59
+ | `POST` | No | No | Create resources, trigger actions |
60
+ | `PUT` | Yes | No | Replace entire resource |
61
+ | `PATCH` | No | No | Partial update |
62
+ | `DELETE` | Yes | No | Remove resource |
63
+
64
+ #### Consistent Response Structure
65
+ ```typescript
66
+ // Success response
67
+ {
68
+ "data": { "id": "usr_01", "email": "user@example.com" },
69
+ "meta": { "requestId": "req_xyz", "timestamp": "2026-01-01T00:00:00Z" }
70
+ }
71
+
72
+ // Paginated list response
73
+ {
74
+ "data": [...],
75
+ "meta": {
76
+ "total": 1234,
77
+ "page": 2,
78
+ "pageSize": 20,
79
+ "hasNextPage": true,
80
+ "nextCursor": "eyJpZCI6"
81
+ }
82
+ }
83
+
84
+ // Error response (RFC 9457 Problem Details)
85
+ {
86
+ "type": "https://api.example.com/errors/validation-failed",
87
+ "title": "Validation Failed",
88
+ "status": 422,
89
+ "detail": "The 'email' field must be a valid email address.",
90
+ "instance": "/api/v1/users",
91
+ "errors": [
92
+ { "field": "email", "message": "Invalid email format" }
93
+ ]
94
+ }
95
+ ```
96
+
97
+ #### HTTP Status Codes — Correct Usage
98
+ ```
99
+ 200 OK — Successful GET, PUT, PATCH
100
+ 201 Created — Successful POST (include Location header)
101
+ 204 No Content — Successful DELETE
102
+ 400 Bad Request — Invalid request body or params
103
+ 401 Unauthorized— Missing or invalid authentication
104
+ 403 Forbidden — Authenticated but not authorized
105
+ 404 Not Found — Resource not found
106
+ 409 Conflict — Duplicate key, version conflict
107
+ 422 Unprocessable Entity — Validation failure
108
+ 429 Too Many Requests — Rate limit exceeded (include Retry-After)
109
+ 500 Internal Server Error— Unexpected server error
110
+ ```
111
+
112
+ ---
113
+
114
+ ### API Versioning Strategies
115
+
116
+ ```
117
+ Strategy 1 — URL Path (Recommended for public APIs):
118
+ GET /api/v1/users
119
+ GET /api/v2/users
120
+
121
+ Strategy 2 — Header:
122
+ GET /api/users
123
+ Accept: application/vnd.example.v2+json
124
+
125
+ Strategy 3 — Query Parameter (Avoid in production):
126
+ GET /api/users?version=2
127
+ ```
128
+
129
+ **Rules for non-breaking changes** (no version bump needed):
130
+ - Adding new optional fields to responses.
131
+ - Adding new optional request parameters.
132
+ - Adding new endpoints.
133
+
134
+ **Breaking changes** (require new version):
135
+ - Removing or renaming fields.
136
+ - Changing field types.
137
+ - Changing error response structure.
138
+
139
+ ---
140
+
141
+ ### tRPC — End-to-End Type Safety
142
+
143
+ ```typescript
144
+ // server/router.ts
145
+ import { initTRPC, TRPCError } from '@trpc/server';
146
+ import { z } from 'zod';
147
+
148
+ const t = initTRPC.context<Context>().create();
149
+ export const router = t.router;
150
+ export const publicProcedure = t.procedure;
151
+ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
152
+ if (!ctx.session?.user) throw new TRPCError({ code: 'UNAUTHORIZED' });
153
+ return next({ ctx: { ...ctx, user: ctx.session.user } });
154
+ });
155
+
156
+ export const appRouter = router({
157
+ users: router({
158
+ list: publicProcedure
159
+ .input(z.object({ page: z.number().int().min(1).default(1) }))
160
+ .query(async ({ input, ctx }) => {
161
+ return ctx.db.user.findMany({ skip: (input.page - 1) * 20, take: 20 });
162
+ }),
163
+ create: protectedProcedure
164
+ .input(z.object({ email: z.string().email(), name: z.string().min(2) }))
165
+ .mutation(async ({ input, ctx }) => {
166
+ return ctx.db.user.create({ data: input });
167
+ }),
168
+ }),
169
+ });
170
+
171
+ export type AppRouter = typeof appRouter;
172
+ // Client automatically infers all types — no code generation needed
173
+ ```
174
+
175
+ ---
176
+
177
+ ### Rate Limiting Implementation
178
+
179
+ ```typescript
180
+ // Sliding window rate limit with Redis (using Upstash)
181
+ import { Ratelimit } from '@upstash/ratelimit';
182
+ import { Redis } from '@upstash/redis';
183
+
184
+ const ratelimit = new Ratelimit({
185
+ redis: Redis.fromEnv(),
186
+ limiter: Ratelimit.slidingWindow(100, '1 m'), // 100 requests/minute
187
+ analytics: true,
188
+ prefix: 'api:ratelimit',
189
+ });
190
+
191
+ // Next.js middleware usage
192
+ export async function rateLimitMiddleware(req: Request) {
193
+ const ip = req.headers.get('x-forwarded-for') ?? '127.0.0.1';
194
+ const { success, limit, remaining, reset } = await ratelimit.limit(ip);
195
+
196
+ if (!success) {
197
+ return new Response(JSON.stringify({ error: 'Too Many Requests' }), {
198
+ status: 429,
199
+ headers: {
200
+ 'X-RateLimit-Limit': limit.toString(),
201
+ 'X-RateLimit-Remaining': remaining.toString(),
202
+ 'X-RateLimit-Reset': new Date(reset).toISOString(),
203
+ 'Retry-After': Math.ceil((reset - Date.now()) / 1000).toString(),
204
+ },
205
+ });
206
+ }
207
+ }
208
+ ```
209
+
210
+ ---
211
+
212
+ ### Idempotency for Mutations
213
+
214
+ ```typescript
215
+ // Client sends Idempotency-Key header for safe retries
216
+ // POST /api/payments
217
+ // Idempotency-Key: a0e4b2c1-unique-uuid-here
218
+
219
+ async function handlePayment(req: Request) {
220
+ const idempotencyKey = req.headers.get('idempotency-key');
221
+ if (!idempotencyKey) return errorResponse(400, 'Idempotency-Key header required');
222
+
223
+ // Check cache first
224
+ const cached = await redis.get(`idempotency:${idempotencyKey}`);
225
+ if (cached) return Response.json(JSON.parse(cached), { status: 200 });
226
+
227
+ // Process payment
228
+ const result = await processPayment(await req.json());
229
+
230
+ // Cache result for 24 hours
231
+ await redis.setex(`idempotency:${idempotencyKey}`, 86400, JSON.stringify(result));
232
+ return Response.json(result, { status: 201 });
233
+ }
234
+ ```
235
+
236
+ ---
237
+
238
+ ### OpenAPI 3.1 Documentation
239
+
240
+ ```yaml
241
+ # openapi.yaml
242
+ openapi: "3.1.0"
243
+ info:
244
+ title: Example API
245
+ version: "1.0.0"
246
+ description: "RESTful API for Example SaaS"
247
+
248
+ paths:
249
+ /api/v1/users:
250
+ get:
251
+ operationId: listUsers
252
+ summary: List all users
253
+ tags: [Users]
254
+ security: [{ bearerAuth: [] }]
255
+ parameters:
256
+ - name: page
257
+ in: query
258
+ schema: { type: integer, minimum: 1, default: 1 }
259
+ - name: pageSize
260
+ in: query
261
+ schema: { type: integer, minimum: 1, maximum: 100, default: 20 }
262
+ responses:
263
+ "200":
264
+ description: Users list
265
+ content:
266
+ application/json:
267
+ schema:
268
+ $ref: "#/components/schemas/UserListResponse"
269
+ "401":
270
+ $ref: "#/components/responses/Unauthorized"
271
+
272
+ components:
273
+ securitySchemes:
274
+ bearerAuth:
275
+ type: http
276
+ scheme: bearer
277
+ bearerFormat: JWT
278
+ ```
279
+
280
+ ---
281
+
282
+ <a name="bahasa-indonesia"></a>
283
+ ## Bahasa Indonesia
284
+
285
+ ### Deskripsi
286
+ Panduan ahli untuk merancang, mendokumentasikan, dan mengembangkan API berkualitas produksi. Mencakup pemodelan resource **REST** dan semantik HTTP, desain skema **GraphQL**, **gRPC** dengan protobuf, dan **tRPC** untuk API end-to-end type-safe di TypeScript. Termasuk dokumentasi OpenAPI 3.1, strategi versioning API, rate limiting, idempotency, dan alur kerja contract-first.
287
+
288
+ ### Kondisi Pemicu
289
+ - Merancang API baru dari nol (REST, GraphQL, gRPC, atau tRPC).
290
+ - Mengembangkan API yang ada tanpa merusak klien.
291
+ - Mendokumentasikan API dengan OpenAPI/Swagger.
292
+ - Mengimplementasikan rate limiting, throttling, atau idempotency.
293
+ - Memilih antara REST, GraphQL, gRPC, dan tRPC.
294
+ - Merancang sistem webhook.
295
+
296
+ ### Panduan Pemilihan Protokol API
297
+
298
+ - **REST**: API publik, klien mobile, konsumsi universal.
299
+ - **GraphQL**: Data graph kompleks, kebutuhan query fleksibel dari klien.
300
+ - **gRPC**: Komunikasi layanan-ke-layanan dengan performa tinggi.
301
+ - **tRPC**: Proyek full-stack TypeScript monorepo (Next.js + backend).
302
+
303
+ ### Prinsip REST
304
+
305
+ 1. **Penamaan resource**: Gunakan kata benda jamak (`/posts`, bukan `/getPost`).
306
+ 2. **Status HTTP**: Gunakan kode yang tepat (201 untuk create, 204 untuk delete).
307
+ 3. **Konsistensi respons**: Selalu kembalikan struktur `data` + `meta` yang konsisten.
308
+ 4. **Versioning**: Gunakan URL path (`/api/v1/`) untuk API publik.
309
+ 5. **Idempotency**: Implementasikan `Idempotency-Key` header untuk operasi mutasi yang kritis.
310
+ 6. **Rate Limiting**: Selalu sertakan header `X-RateLimit-*` dan kode `429` yang benar.
@@ -0,0 +1,189 @@
1
+ ---
2
+ name: app-analyzer-optimizer
3
+ description: "Deeply analyzes application architecture and structure to perform audit, bottleneck detection, and code/performance optimization / Mempelajari arsitektur dan struktur aplikasi secara mendalam untuk melakukan audit, deteksi bottleneck, serta optimasi performa dan kode."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # App Analyzer & Optimizer (2026 Edition)
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Description
17
+ Deep application analysis and optimization skill. Performs architectural audits, bottleneck detection, bundle analysis, database query profiling, and AI-assisted code review across Next.js, React, Node.js, Go, Python, and Rust applications.
18
+
19
+ ### Trigger Conditions
20
+ - Auditing an existing codebase for architectural issues or technical debt.
21
+ - Detecting performance bottlenecks (slow API routes, large bundles, N+1 queries).
22
+ - Analyzing bundle size and suggesting code splitting opportunities.
23
+ - Reviewing code quality (complexity, duplication, dead code).
24
+ - Using AI-assisted tools to accelerate code review and analysis.
25
+
26
+ ### Analysis Protocol (5 Phases)
27
+
28
+ #### Phase 1: Architecture Discovery
29
+ ```bash
30
+ # Map the entire project structure
31
+ find . -type f -name "*.ts" -o -name "*.tsx" -o -name "*.go" | head -100
32
+ # Count lines per file (find largest files)
33
+ find . -name "*.ts" -exec wc -l {} + | sort -rn | head -20
34
+ # Find circular dependencies (TypeScript/JS)
35
+ npx madge --circular --extensions ts,tsx src/
36
+ ```
37
+
38
+ #### Phase 2: Bundle Analysis (Next.js / Vite)
39
+ ```bash
40
+ # Next.js bundle analyzer
41
+ ANALYZE=true next build
42
+
43
+ # Or install dedicated tool
44
+ npx @next/bundle-analyzer
45
+
46
+ # Vite bundle visualization
47
+ npx vite-bundle-visualizer
48
+
49
+ # Check for duplicate dependencies
50
+ npx depcheck
51
+ npx bundle-phobia-cli check package.json
52
+ ```
53
+
54
+ Key bundle red flags:
55
+ - Any single chunk > 500KB (uncompressed).
56
+ - Importing entire libraries (`import _ from 'lodash'` vs `import debounce from 'lodash/debounce'`).
57
+ - Moment.js (replace with `date-fns` or `Temporal`).
58
+ - `node_modules` leaking into client bundle.
59
+
60
+ #### Phase 3: Database Query Analysis
61
+ ```sql
62
+ -- PostgreSQL: Find slow queries
63
+ SELECT query, mean_exec_time, calls, total_exec_time
64
+ FROM pg_stat_statements
65
+ ORDER BY mean_exec_time DESC
66
+ LIMIT 20;
67
+
68
+ -- Find missing indexes (sequential scans on large tables)
69
+ SELECT schemaname, tablename, attname, n_distinct, correlation
70
+ FROM pg_stats
71
+ WHERE tablename = 'your_table'
72
+ ORDER BY n_distinct DESC;
73
+
74
+ -- Detect N+1 queries: Enable query logging
75
+ -- In Drizzle:
76
+ const db = drizzle(client, { logger: true });
77
+ -- In Prisma:
78
+ DATABASE_URL="...?connection_limit=5" prisma studio
79
+ ```
80
+
81
+ #### Phase 4: AI-Assisted Code Review
82
+ Use AI tools to accelerate analysis:
83
+
84
+ | Tool | Purpose |
85
+ |---|---|
86
+ | **CodeRabbit** | Automated PR review, pattern detection |
87
+ | **Sourcegraph Cody** | Codebase-wide semantic search and explanation |
88
+ | **GitHub Copilot** | Inline suggestions and refactoring |
89
+ | **Cursor / Windsurf** | AI IDE with full-repo context |
90
+
91
+ AI review prompts for Gemini Agent:
92
+ ```
93
+ Analyze all files in src/features/ and identify:
94
+ 1. Functions longer than 30 lines
95
+ 2. Duplicated business logic across files
96
+ 3. Missing error handling in async functions
97
+ 4. Components that directly call APIs (violating separation of concerns)
98
+ ```
99
+
100
+ #### Phase 5: Performance Profiling
101
+
102
+ **Frontend (React / Next.js):**
103
+ ```bash
104
+ # React DevTools Profiler — identify render bottlenecks
105
+ # Chrome DevTools > Performance tab > Record interaction
106
+
107
+ # Lighthouse CI — automated CWV tracking
108
+ npm install -g @lhci/cli
109
+ lhci autorun
110
+ ```
111
+
112
+ **Backend (Node.js):**
113
+ ```bash
114
+ # Built-in Node.js profiler
115
+ node --prof server.js
116
+ node --prof-process isolate-*.log > processed.txt
117
+
118
+ # Clinic.js — flamegraph, bubble chart, doctor
119
+ npm install -g clinic
120
+ clinic doctor -- node server.js
121
+ clinic flame -- node server.js
122
+ ```
123
+
124
+ **Go:**
125
+ ```bash
126
+ # Built-in pprof profiler
127
+ go tool pprof http://localhost:6060/debug/pprof/profile?seconds=30
128
+ go tool pprof -http=:8080 profile.out
129
+ ```
130
+
131
+ ### Common Bottleneck Patterns & Fixes
132
+
133
+ | Bottleneck | Symptom | Fix |
134
+ |---|---|---|
135
+ | N+1 queries | DB calls proportional to list length | Add `.include()` / JOIN or DataLoader |
136
+ | Missing indexes | Slow queries on filtered columns | `CREATE INDEX CONCURRENTLY` |
137
+ | Unoptimized images | Large LCP, slow page load | Next.js `<Image>`, WebP, lazy loading |
138
+ | Over-fetching | Fetching full objects when only 1 field needed | Select specific columns |
139
+ | No pagination | Fetching entire tables | Add `LIMIT/OFFSET` or cursor pagination |
140
+ | Blocking main thread | High INP, unresponsive UI | `useTransition`, web workers |
141
+ | No caching | Same data fetched repeatedly | Redis, React Query staleTime, HTTP cache |
142
+ | Bundle bloat | Large JS payload | Tree-shaking, code splitting, lazy imports |
143
+
144
+ ---
145
+
146
+ <a name="bahasa-indonesia"></a>
147
+ ## Bahasa Indonesia
148
+
149
+ ### Deskripsi
150
+ Skill analisis dan optimasi aplikasi mendalam. Melakukan audit arsitektur, deteksi bottleneck, analisis bundle, profiling query database, dan code review berbantuan AI di aplikasi Next.js, React, Node.js, Go, Python, dan Rust.
151
+
152
+ ### Kondisi Pemicu
153
+ - Mengaudit codebase yang ada untuk masalah arsitektur atau hutang teknis.
154
+ - Mendeteksi bottleneck performa (rute API lambat, bundle besar, query N+1).
155
+ - Menganalisis ukuran bundle dan menyarankan peluang code splitting.
156
+ - Meninjau kualitas kode (kompleksitas, duplikasi, kode mati).
157
+ - Menggunakan tool berbantuan AI untuk mempercepat code review dan analisis.
158
+
159
+ ### Protokol Analisis (5 Fase)
160
+
161
+ #### Fase 1: Penemuan Arsitektur
162
+ Petakan seluruh struktur proyek, hitung baris per file untuk menemukan file terbesar, dan deteksi dependensi circular dengan `npx madge --circular`.
163
+
164
+ #### Fase 2: Analisis Bundle (Next.js / Vite)
165
+ Gunakan `ANALYZE=true next build` atau `npx vite-bundle-visualizer`. Tanda bahaya bundle: chunk tunggal > 500KB, mengimpor library penuh, Moment.js, atau `node_modules` yang bocor ke bundle klien.
166
+
167
+ #### Fase 3: Analisis Query Database
168
+ Gunakan `pg_stat_statements` untuk menemukan query lambat. Cari scan sequential pada tabel besar (tanda indeks yang hilang). Aktifkan logging query di Drizzle/Prisma untuk mendeteksi pola N+1.
169
+
170
+ #### Fase 4: Code Review Berbantuan AI
171
+ Gunakan CodeRabbit untuk review PR otomatis, Sourcegraph Cody untuk pencarian semantik seluruh codebase, dan Gemini Agent dengan prompt analisis spesifik untuk menemukan fungsi panjang, logika bisnis yang diduplikasi, dan error handling yang hilang.
172
+
173
+ #### Fase 5: Profiling Performa
174
+ - **Frontend**: React DevTools Profiler, Lighthouse CI.
175
+ - **Backend Node.js**: `node --prof`, Clinic.js untuk flamegraph.
176
+ - **Go**: `go tool pprof` untuk CPU dan memory profiling.
177
+
178
+ ### Pola Bottleneck Umum & Perbaikan
179
+
180
+ | Bottleneck | Gejala | Perbaikan |
181
+ |---|---|---|
182
+ | Query N+1 | Panggilan DB proporsional dengan panjang daftar | Tambahkan `.include()` / JOIN atau DataLoader |
183
+ | Indeks yang hilang | Query lambat pada kolom yang difilter | `CREATE INDEX CONCURRENTLY` |
184
+ | Gambar tidak dioptimalkan | LCP besar, halaman lambat | Next.js `<Image>`, WebP, lazy loading |
185
+ | Over-fetching | Mengambil objek penuh saat hanya 1 field dibutuhkan | Pilih kolom spesifik |
186
+ | Tanpa paginasi | Mengambil seluruh tabel | Tambahkan `LIMIT/OFFSET` atau cursor pagination |
187
+ | Memblokir thread utama | INP tinggi, UI tidak responsif | `useTransition`, web workers |
188
+ | Tanpa caching | Data yang sama diambil berulang kali | Redis, React Query staleTime, HTTP cache |
189
+ | Bundle membengkak | Payload JS besar | Tree-shaking, code splitting, lazy imports |
@@ -0,0 +1,41 @@
1
+ ---
2
+ name: asisten-ramah
3
+ description: "Skill to make Antigravity respond in a friendly manner / Skill untuk membuat Antigravity membalas dengan ramah."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # Asisten Ramah / Friendly Assistant
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Description
17
+ This skill is a basic example to make Antigravity (me) always respond with a friendly, warm, and polite language style.
18
+
19
+ ### Instructions
20
+ - Always start the conversation or response with a friendly greeting (e.g., "Hello!", "Hi there!", or "Ready to help!").
21
+ - Always be polite and use plenty of emojis in responses.
22
+ - If the user asks about code, always provide words of encouragement before presenting the code.
23
+
24
+ ### Trigger Conditions
25
+ Always active for every interaction with the user.
26
+
27
+ ---
28
+
29
+ <a name="bahasa-indonesia"></a>
30
+ ## Bahasa Indonesia
31
+
32
+ ### Deskripsi
33
+ Skill ini adalah contoh dasar untuk membuat Antigravity (saya) selalu membalas dengan gaya bahasa tertentu yang ramah dan sopan.
34
+
35
+ ### Instruksi
36
+ - Anda harus selalu memulai percakapan atau jawaban dengan kata sapaan yang ramah (misalnya: "Halo!", "Hai di sana!", atau "Siap membantu!").
37
+ - Selalu bersikap sopan dan gunakan banyak emoji dalam jawaban.
38
+ - Jika pengguna bertanya tentang kode, selalu berikan semangat sebelum memberikan kodenya.
39
+
40
+ ### Kondisi Pemicu
41
+ Selalu aktif untuk setiap interaksi dengan pengguna.
@@ -0,0 +1,45 @@
1
+ ---
2
+ name: authentication-identity-expert
3
+ description: "Expert guide for implementing secure authentication, authorization (RBAC/ABAC), OAuth2, and identity management (Clerk, Auth.js, Supabase Auth) / Panduan ahli untuk autentikasi dan otorisasi."
4
+ author: "Antigravity"
5
+ ---
6
+
7
+ # Authentication & Identity Expert / Ahli Autentikasi & Identitas
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Description
17
+ Expert guide for implementing robust and secure authentication and authorization systems in web and mobile applications. Covers JWT, Session management, OAuth2 providers, Identity as a Service (Clerk, Supabase Auth, Auth0), and Role/Attribute-Based Access Control (RBAC/ABAC).
18
+
19
+ ### Instructions
20
+ - **Never Roll Your Own Crypto**: Always use established libraries (like `bcrypt` or `argon2`) for hashing passwords if not using an Identity Provider.
21
+ - **Session & Token Management**: Keep JWT lifetimes short (e.g., 15 minutes) and use secure, HttpOnly, SameSite cookies for refresh tokens to prevent XSS attacks.
22
+ - **OAuth2 & SSO Integration**: When implementing OAuth, strictly validate the `state` parameter to mitigate CSRF attacks during the callback phase.
23
+ - **Authorization (RBAC/ABAC)**: Enforce authorization checks at the server level (API routes, database queries), not just on the UI layer. Never expose sensitive data based on client-side roles alone.
24
+ - **MFA (Multi-Factor Authentication)**: Recommend and implement MFA/2FA for administrative or high-privilege accounts.
25
+
26
+ ### Trigger Conditions
27
+ Active whenever the user is working on login/signup flows, session management, OAuth integration, role-based access control, or integrating Auth.js, Clerk, Supabase Auth, or Auth0.
28
+
29
+ ---
30
+
31
+ <a name="bahasa-indonesia"></a>
32
+ ## Bahasa Indonesia
33
+
34
+ ### Deskripsi
35
+ Panduan ahli untuk mengimplementasikan sistem autentikasi dan otorisasi yang aman dan tangguh pada aplikasi web dan mobile. Mencakup JWT, manajemen Sesi, penyedia OAuth2, Identity as a Service (Clerk, Supabase Auth, Auth0), dan Role/Attribute-Based Access Control (RBAC/ABAC).
36
+
37
+ ### Instruksi
38
+ - **Jangan Membuat Kriptografi Sendiri**: Selalu gunakan library standar (seperti `bcrypt` atau `argon2`) untuk hashing password jika tidak menggunakan penyedia identitas (IdP).
39
+ - **Manajemen Sesi & Token**: Jaga masa aktif JWT tetap singkat (misal: 15 menit) dan gunakan cookie *HttpOnly, SameSite* yang aman untuk token *refresh* guna mencegah serangan XSS.
40
+ - **Integrasi OAuth2 & SSO**: Saat mengimplementasikan OAuth, validasi parameter `state` secara ketat untuk memitigasi serangan CSRF selama fase callback.
41
+ - **Otorisasi (RBAC/ABAC)**: Terapkan pengecekan otorisasi pada level server (API route, query database), bukan hanya pada lapisan UI. Jangan pernah mengekspos data sensitif hanya berdasarkan *role* di sisi klien.
42
+ - **MFA (Multi-Factor Authentication)**: Rekomendasikan dan implementasikan MFA/2FA untuk akun administratif atau hak akses tinggi.
43
+
44
+ ### Kondisi Pemicu
45
+ Aktif setiap kali pengguna sedang mengerjakan alur login/signup, manajemen sesi, integrasi OAuth, role-based access control, atau mengintegrasikan Auth.js, Clerk, Supabase Auth, atau Auth0.