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.
- package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
- package/BLUEPRINT.md +125 -0
- package/CHANGELOG.md +195 -0
- package/CONTRIBUTING.md +199 -0
- package/LICENSE +21 -0
- package/README.md +263 -0
- package/SECURITY.md +21 -0
- package/banner.png +0 -0
- package/package.json +25 -0
- package/plugin.json +8 -0
- package/scripts/update_skills.js +75 -0
- package/skills/ai-llm-integration-expert/SKILL.md +162 -0
- package/skills/api-design-expert/SKILL.md +310 -0
- package/skills/app-analyzer-optimizer/SKILL.md +189 -0
- package/skills/asisten_ramah/SKILL.md +41 -0
- package/skills/authentication-identity-expert/SKILL.md +45 -0
- package/skills/auto-doc-updater/SKILL.md +204 -0
- package/skills/bootstrap-to-modern/SKILL.md +87 -0
- package/skills/brainstorming/SKILL.md +353 -0
- package/skills/bun-runtime-expert/SKILL.md +211 -0
- package/skills/ci-cd-devops-architect/SKILL.md +45 -0
- package/skills/cloud-hosting-expert/SKILL.md +244 -0
- package/skills/coderabbit/SKILL.md +192 -0
- package/skills/data-telemetry-expert/SKILL.md +213 -0
- package/skills/database-orm-expert/SKILL.md +294 -0
- package/skills/design-system-architect/SKILL.md +243 -0
- package/skills/e2e-testing-expert/SKILL.md +315 -0
- package/skills/event-driven-architect/SKILL.md +81 -0
- package/skills/firebase-security-expert/SKILL.md +195 -0
- package/skills/fullstack-expert/SKILL.md +202 -0
- package/skills/fullstack-expert/references/api_design_guide.md +466 -0
- package/skills/fullstack-expert/references/devops_infrastructure.md +477 -0
- package/skills/fullstack-expert/references/multi_language_backend.md +528 -0
- package/skills/fullstack-expert/references/system_design_patterns.md +358 -0
- package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -0
- package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -0
- package/skills/gemini-agent-booster/SKILL.md +135 -0
- package/skills/global-a11y-i18n-expert/SKILL.md +81 -0
- package/skills/go-programming-expert/SKILL.md +295 -0
- package/skills/hig/SKILL.md +188 -0
- package/skills/js-backend-expert/SKILL.md +192 -0
- package/skills/mcp-server-architect/SKILL.md +194 -0
- package/skills/mobile-expo-expert/SKILL.md +186 -0
- package/skills/monday-design-aesthetic/SKILL.md +67 -0
- package/skills/monorepo-architect/SKILL.md +227 -0
- package/skills/mpa-orchestrator/SKILL.md +101 -0
- package/skills/multi-agent-orchestration/SKILL.md +234 -0
- package/skills/multiple-entry-points/SKILL.md +55 -0
- package/skills/mvc-expert/SKILL.md +231 -0
- package/skills/payment-gateway-expert/SKILL.md +45 -0
- package/skills/performance-web-vitals/SKILL.md +332 -0
- package/skills/prd-architect/SKILL.md +191 -0
- package/skills/production-ready-hardener/SKILL.md +469 -0
- package/skills/production-ready-hardener/references/performance_optimization.md +441 -0
- package/skills/production-ready-hardener/references/production_checklist.md +161 -0
- package/skills/production-ready-hardener/references/security_hardening_guide.md +379 -0
- package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +875 -0
- package/skills/python-programming-expert/SKILL.md +271 -0
- package/skills/realtime-collaboration-expert/SKILL.md +45 -0
- package/skills/rust-programming-expert/SKILL.md +235 -0
- package/skills/saas-billing/SKILL.md +377 -0
- package/skills/saas-multi-tenant/SKILL.md +237 -0
- package/skills/saas-mvp-launcher/SKILL.md +231 -0
- package/skills/saas-transformer/SKILL.md +446 -0
- package/skills/saas-transformer/references/billing_integration_guide.md +401 -0
- package/skills/saas-transformer/references/feature_gating_patterns.md +137 -0
- package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -0
- package/skills/saas-transformer/scripts/saas_transformation_scanner.py +254 -0
- package/skills/scalability-clean-code/SKILL.md +229 -0
- package/skills/secure-fuzz-testing/SKILL.md +201 -0
- package/skills/senior-frontend/SKILL.md +161 -0
- package/skills/senior-frontend/references/frontend_best_practices.md +806 -0
- package/skills/senior-frontend/references/nextjs_optimization_guide.md +724 -0
- package/skills/senior-frontend/references/react_patterns.md +746 -0
- package/skills/senior-frontend/scripts/bundle_analyzer.py +407 -0
- package/skills/senior-frontend/scripts/component_generator.py +329 -0
- package/skills/senior-frontend/scripts/frontend_scaffolder.py +1005 -0
- package/skills/senior-fullstack/SKILL.md +167 -0
- package/skills/senior-fullstack/references/architecture_patterns.md +160 -0
- package/skills/senior-fullstack/references/development_workflows.md +222 -0
- package/skills/senior-fullstack/references/tech_stack_guide.md +190 -0
- package/skills/senior-fullstack/scripts/code_quality_analyzer.py +114 -0
- package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +114 -0
- package/skills/senior-fullstack/scripts/project_scaffolder.py +114 -0
- package/skills/seo/SKILL.md +225 -0
- package/skills/seo/references/cwv-thresholds.md +108 -0
- package/skills/seo/references/eeat-framework.md +214 -0
- package/skills/seo/references/quality-gates.md +155 -0
- package/skills/seo/references/schema-types.md +118 -0
- package/skills/seo-aeo-landing-page-writer/SKILL.md +97 -0
- package/skills/seo-geo/SKILL.md +188 -0
- package/skills/session-handoff-resume/SKILL.md +158 -0
- package/skills/skill_baru/SKILL.md +147 -0
- package/skills/spa-orchestrator/SKILL.md +288 -0
- package/skills/state-management-expert/SKILL.md +272 -0
- package/skills/supabase-migration/SKILL.md +45 -0
- package/skills/supabase-security-expert/SKILL.md +243 -0
- package/skills/tailwind-expert/SKILL.md +188 -0
- package/skills/tanstack-query-expert/SKILL.md +199 -0
- package/skills/tauri-expert/SKILL.md +97 -0
- package/skills/token-saver/SKILL.md +111 -0
- package/skills/typescript-expert/SKILL.md +279 -0
- package/skills/ui-components-expert/SKILL.md +63 -0
- package/skills/ui-ux-pro-max/SKILL.md +201 -0
- package/skills/ui-ux-pro-max/data/charts.csv +26 -0
- package/skills/ui-ux-pro-max/data/colors.csv +97 -0
- package/skills/ui-ux-pro-max/data/icons.csv +101 -0
- package/skills/ui-ux-pro-max/data/landing.csv +31 -0
- package/skills/ui-ux-pro-max/data/products.csv +97 -0
- package/skills/ui-ux-pro-max/data/prompts.csv +24 -0
- package/skills/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/skills/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/skills/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/skills/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/skills/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/skills/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/skills/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/skills/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/skills/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/skills/ui-ux-pro-max/data/styles.csv +59 -0
- package/skills/ui-ux-pro-max/data/typography.csv +58 -0
- package/skills/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
- package/skills/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/skills/ui-ux-pro-max/data/web-interface.csv +31 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/core.py +257 -0
- package/skills/ui-ux-pro-max/scripts/design_system.py +493 -0
- package/skills/ui-ux-pro-max/scripts/search.py +81 -0
- package/skills/ui_ux_expert/SKILL.md +114 -0
- package/skills/vibe-code-gardener/SKILL.md +173 -0
- package/skills/web-scraper/SKILL.md +205 -0
- package/skills/web-scraper/references/data-transforms.md +397 -0
- package/skills/web-scraper/references/extraction-patterns.md +475 -0
- package/skills/web-scraper/references/output-templates.md +481 -0
- 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.
|