vibes-plug 2.11.0 → 2.14.1
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/.cursor/rules/vibes-plug-core.mdc +3 -3
- package/.cursorrules +3 -3
- package/AGENTS.md +4 -4
- package/BLUEPRINT.md +16 -6
- package/CHANGELOG.md +37 -0
- package/CLAUDE.md +8 -8
- package/README.md +85 -115
- package/index.js +1 -1
- package/package.json +2 -2
- package/plugin.json +2 -2
- package/scripts/check-anti-slop.js +53 -0
- package/scripts/generate_swarm_gif.py +2 -2
- package/skills/ai-llm-integration-expert/SKILL.md +22 -15
- package/skills/ai-prompt-engineering-expert/SKILL.md +133 -83
- package/skills/anti-slop/SKILL.md +133 -0
- package/skills/async-queue-temporal-expert/SKILL.md +135 -158
- package/skills/authentication-identity-expert/SKILL.md +172 -278
- package/skills/brainstorming/SKILL.md +26 -26
- package/skills/database-orm-expert/SKILL.md +164 -303
- package/skills/deep-research-analyst/SKILL.md +136 -0
- package/skills/design-system-architect/SKILL.md +31 -1
- package/skills/email-notification-expert/SKILL.md +31 -4
- package/skills/error-resilience-expert/SKILL.md +21 -0
- package/skills/fullstack-expert/SKILL.md +183 -260
- package/skills/glsl-shader-expert/SKILL.md +190 -107
- package/skills/graph-rag-knowledge-expert/SKILL.md +42 -1
- package/skills/mcp-server-architect/SKILL.md +15 -1
- package/skills/prd-architect/SKILL.md +181 -206
- package/skills/production-ready-hardener/SKILL.md +16 -19
- package/skills/pwa-offline-first-expert/SKILL.md +42 -1
- package/skills/pydantic-ai-expert/SKILL.md +161 -0
- package/skills/saas-architect/SKILL.md +154 -0
- package/skills/senior-frontend/SKILL.md +9 -11
- package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
- package/skills/session-memory-manager/SKILL.md +128 -0
- package/skills/synthetic-data-finetuning-expert/SKILL.md +155 -0
- package/skills/ui-ux-pro-max/SKILL.md +4 -2
- package/skills/vercel-ai-sdk-expert/SKILL.md +181 -0
- package/skills/voice-ai-realtime-agent/SKILL.md +41 -1
- package/skills/web-3d-graphics-expert/SKILL.md +313 -137
- package/skills/web-game-engine-expert/SKILL.md +329 -102
- package/skills/webxr-ar-vr-expert/SKILL.md +162 -123
- package/skills/zero-to-prod-orchestrator/SKILL.md +26 -24
- package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
- package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
- package/skills/asisten-ramah/SKILL.md +0 -47
- package/skills/auto-doc-updater/SKILL.md +0 -220
- package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
- package/skills/background-jobs-queue-expert/SKILL.md +0 -235
- package/skills/database-migration-versioning-expert/SKILL.md +0 -90
- package/skills/edge-serverless-db-expert/SKILL.md +0 -99
- package/skills/mcp-client-orchestrator/SKILL.md +0 -76
- package/skills/mobile-push-notification-expert/SKILL.md +0 -71
- package/skills/monday-design-aesthetic/SKILL.md +0 -73
- package/skills/project-context-mapper/SKILL.md +0 -85
- package/skills/saas-mvp-launcher/SKILL.md +0 -260
- package/skills/saas-transformer/SKILL.md +0 -500
- package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
- package/skills/self-evolving-memory-graph/SKILL.md +0 -91
- package/skills/session-context-loader/SKILL.md +0 -83
- package/skills/session-handoff-resume/SKILL.md +0 -164
- package/skills/skill-baru/SKILL.md +0 -178
- package/skills/supabase-migration/SKILL.md +0 -91
- package/skills/token-saver/SKILL.md +0 -119
- package/skills/ui-components-expert/SKILL.md +0 -166
- package/skills/vibe-code-gardener/SKILL.md +0 -181
- /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
- /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
- /package/skills/{saas-transformer → saas-architect}/scripts/saas_transformation_scanner.py +0 -0
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: background-jobs-queue-expert
|
|
3
|
-
description: "Dedicated deep-dive for BullMQ v5, Trigger.dev v3, Inngest, delayed jobs, job deduplication, idempotency, dead letter queues, and job priority / Panduan mendalam untuk BullMQ v5, Trigger.dev v3, Inngest, delayed jobs, deduplikasi job, idempotency, dead letter queue, dan prioritas job."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Background Jobs & Queue Expert (BullMQ v5 & Resilient Queues)
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Purpose & Overview
|
|
17
|
-
Production-grade engineering guide for background job queues and asynchronous task processing using **BullMQ v5**, **Trigger.dev v3**, and **Inngest**. Focuses on the core mechanics of fault-tolerant distributed queues: job deduplication, multi-tenant priority queues, exponential backoff jitter, Dead Letter Queue (DLQ) automated forwarding, and strict transactional idempotency.
|
|
18
|
-
|
|
19
|
-
### Key Capabilities
|
|
20
|
-
1. **Strict Idempotency**: Ensuring background workers execute with deterministic effects using database-backed idempotency keys.
|
|
21
|
-
2. **Job Deduplication**: Leveraging deterministic BullMQ `jobId` hashing to prevent duplicate enqueueing of ongoing or delayed tasks.
|
|
22
|
-
3. **Dead Letter Queues (DLQ)**: Automatic relocation of permanently failing jobs after retry exhaustion for manual inspection and alerting.
|
|
23
|
-
4. **Tenant Prioritization**: Differentiating throughput between VIP/enterprise tiers and free-tier users using BullMQ job priorities.
|
|
24
|
-
5. **Backoff Jitter & Throttling**: Exponential backoff combined with randomized full jitter to prevent upstream thundering herds.
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
### Production Implementation Recipes
|
|
29
|
-
|
|
30
|
-
#### Recipe 1: Production BullMQ v5 Worker with Deduplication & DLQ Forwarding (TypeScript)
|
|
31
|
-
```typescript
|
|
32
|
-
import { Queue, Worker, Job } from 'bullmq';
|
|
33
|
-
import Redis from 'ioredis';
|
|
34
|
-
|
|
35
|
-
const redisConnection = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
|
|
36
|
-
maxRetriesPerRequest: null, // Required by BullMQ
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
export interface NotificationPayload {
|
|
40
|
-
tenantId: string;
|
|
41
|
-
userId: string;
|
|
42
|
-
type: 'email' | 'webhook';
|
|
43
|
-
payload: Record<string, unknown>;
|
|
44
|
-
idempotencyKey: string;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Main Queue
|
|
48
|
-
export const notificationQueue = new Queue<NotificationPayload>('notifications', {
|
|
49
|
-
connection: redisConnection,
|
|
50
|
-
defaultJobOptions: {
|
|
51
|
-
attempts: 5,
|
|
52
|
-
backoff: {
|
|
53
|
-
type: 'exponential',
|
|
54
|
-
delay: 1500, // Starts at 1.5s, doubles up to ~24s with jitter
|
|
55
|
-
},
|
|
56
|
-
removeOnComplete: { age: 86400, count: 5000 },
|
|
57
|
-
removeOnFail: false, // Preserved for DLQ audit
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
// Dead Letter Queue (DLQ)
|
|
62
|
-
export const notificationDLQ = new Queue('notifications-dlq', {
|
|
63
|
-
connection: redisConnection,
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Enqueues a notification job with strict deduplication and priority
|
|
68
|
-
*/
|
|
69
|
-
export async function enqueueNotification(
|
|
70
|
-
data: NotificationPayload,
|
|
71
|
-
isVip = false
|
|
72
|
-
) {
|
|
73
|
-
return await notificationQueue.add('send_notification', data, {
|
|
74
|
-
jobId: `notif_${data.idempotencyKey}`, // Deterministic deduplication key
|
|
75
|
-
priority: isVip ? 1 : 10, // Lower numbers denote higher priority in BullMQ
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// Background Worker
|
|
80
|
-
export const notificationWorker = new Worker<NotificationPayload>(
|
|
81
|
-
'notifications',
|
|
82
|
-
async (job: Job<NotificationPayload>) => {
|
|
83
|
-
console.log(`[Worker] Processing Job ${job.id} for Tenant: ${job.data.tenantId}`);
|
|
84
|
-
|
|
85
|
-
// Simulate task processing with idempotency verification
|
|
86
|
-
if (job.data.type === 'email') {
|
|
87
|
-
await deliverEmail(job.data);
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
connection: redisConnection,
|
|
92
|
-
concurrency: 20, // Max concurrent jobs per worker process
|
|
93
|
-
limiter: {
|
|
94
|
-
max: 100, // Maximum 100 jobs processed
|
|
95
|
-
duration: 1000, // Per 1000ms (Rate Limiting)
|
|
96
|
-
},
|
|
97
|
-
}
|
|
98
|
-
);
|
|
99
|
-
|
|
100
|
-
// Forward to DLQ upon exhaustion of retry attempts
|
|
101
|
-
notificationWorker.on('failed', async (job, error) => {
|
|
102
|
-
if (job && job.attemptsMade >= (job.opts.attempts || 5)) {
|
|
103
|
-
console.error(`[DLQ] Job ${job.id} exhausted retries. Forwarding to notifications-dlq:`, error.message);
|
|
104
|
-
await notificationDLQ.add('failed_notification', {
|
|
105
|
-
originalJobId: job.id,
|
|
106
|
-
failedReason: error.message,
|
|
107
|
-
data: job.data,
|
|
108
|
-
exhaustedAt: new Date().toISOString(),
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
---
|
|
115
|
-
|
|
116
|
-
### Implementation Checklist
|
|
117
|
-
- [ ] Configure `maxRetriesPerRequest: null` on the Redis client as required by BullMQ v5.
|
|
118
|
-
- [ ] Use deterministic `jobId` derived from business logic (`order_${orderId}`) to enforce deduplication.
|
|
119
|
-
- [ ] Add event listener on `failed` to automatically forward permanently dead jobs to a Dead Letter Queue.
|
|
120
|
-
- [ ] Implement rate limiting using worker `limiter` to protect third-party services against rate-limit bans.
|
|
121
|
-
|
|
122
|
-
## Orchestration & Integration
|
|
123
|
-
- Integrates with: `js-backend-expert`, `async-queue-temporal-expert`, `error-resilience-expert`, `data-telemetry-expert`.
|
|
124
|
-
|
|
125
|
-
---
|
|
126
|
-
|
|
127
|
-
<a name="bahasa-indonesia"></a>
|
|
128
|
-
## Bahasa Indonesia
|
|
129
|
-
|
|
130
|
-
### Tujuan & Gambaran Umum
|
|
131
|
-
Panduan rekayasa tingkat produksi untuk antrean pekerjaan latar belakang (*background job queues*) dan pemrosesan tugas asinkron menggunakan **BullMQ v5**, **Trigger.dev v3**, dan **Inngest**. Berfokus pada mekanika inti antrean terdistribusi yang tangguh: deduplikasi job, prioritas multi-tenant, *exponential backoff jitter*, pemindahan otomatis ke Dead Letter Queue (DLQ), dan idempotensi transaksi yang ketat.
|
|
132
|
-
|
|
133
|
-
### Kemampuan Utama
|
|
134
|
-
1. **Idempotensi Ketat**: Memastikan pekerja (*worker*) mengeksekusi tugas dengan dampak deterministik menggunakan kunci idempotensi yang tercatat di database.
|
|
135
|
-
2. **Deduplikasi Job**: Memanfaatkan penetapan `jobId` deterministik di BullMQ untuk mencegah antrean ganda pada tugas yang sedang berjalan atau tertunda.
|
|
136
|
-
3. **Dead Letter Queue (DLQ)**: Pemindahan otomatis tugas yang gagal total setelah jatah percobaan ulang habis untuk audit dan penanganan manual.
|
|
137
|
-
4. **Prioritas Tenant**: Membedakan prioritas tugas antara pengguna VIP/Enterprise dengan pengguna paket gratis menggunakan nilai prioritas BullMQ.
|
|
138
|
-
5. **Backoff Jitter & Throttling**: Mekanisme penundaan eksponensial dengan *jitter* acak untuk mencegah fenomena *thundering herd* pada server hilir.
|
|
139
|
-
|
|
140
|
-
---
|
|
141
|
-
|
|
142
|
-
### Resep Implementasi Produksi
|
|
143
|
-
|
|
144
|
-
#### Resep 1: Worker BullMQ v5 Produksi dengan Deduplikasi & Forward DLQ (TypeScript)
|
|
145
|
-
```typescript
|
|
146
|
-
import { Queue, Worker, Job } from 'bullmq';
|
|
147
|
-
import Redis from 'ioredis';
|
|
148
|
-
|
|
149
|
-
const koneksiRedis = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
|
|
150
|
-
maxRetriesPerRequest: null,
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
export interface MuatanNotifikasi {
|
|
154
|
-
tenantId: string;
|
|
155
|
-
userId: string;
|
|
156
|
-
type: 'email' | 'webhook';
|
|
157
|
-
payload: Record<string, unknown>;
|
|
158
|
-
idempotencyKey: string;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// Antrean Utama
|
|
162
|
-
export const antreanNotifikasi = new Queue<MuatanNotifikasi>('notifikasi', {
|
|
163
|
-
connection: koneksiRedis,
|
|
164
|
-
defaultJobOptions: {
|
|
165
|
-
attempts: 5,
|
|
166
|
-
backoff: {
|
|
167
|
-
type: 'exponential',
|
|
168
|
-
delay: 1500,
|
|
169
|
-
},
|
|
170
|
-
removeOnComplete: { age: 86400, count: 5000 },
|
|
171
|
-
removeOnFail: false,
|
|
172
|
-
},
|
|
173
|
-
});
|
|
174
|
-
|
|
175
|
-
// Antrean Dead Letter (DLQ)
|
|
176
|
-
export const antreanDLQ = new Queue('notifikasi-dlq', {
|
|
177
|
-
connection: koneksiRedis,
|
|
178
|
-
});
|
|
179
|
-
|
|
180
|
-
/**
|
|
181
|
-
* Memasukkan tugas ke antrean dengan deduplikasi dan prioritas
|
|
182
|
-
*/
|
|
183
|
-
export async function masukkanNotifikasi(
|
|
184
|
-
data: MuatanNotifikasi,
|
|
185
|
-
isVip = false
|
|
186
|
-
) {
|
|
187
|
-
return await antreanNotifikasi.add('kirim_notifikasi', data, {
|
|
188
|
-
jobId: `notif_${data.idempotencyKey}`, // Kunci deduplikasi unik
|
|
189
|
-
priority: isVip ? 1 : 10, // Nilai lebih kecil menandakan prioritas lebih tinggi
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
// Worker Pemroses
|
|
194
|
-
export const workerNotifikasi = new Worker<MuatanNotifikasi>(
|
|
195
|
-
'notifikasi',
|
|
196
|
-
async (job: Job<MuatanNotifikasi>) => {
|
|
197
|
-
console.log(`[Worker] Memproses Job ${job.id} untuk Tenant: ${job.data.tenantId}`);
|
|
198
|
-
if (job.data.type === 'email') {
|
|
199
|
-
await kirimEmail(job.data);
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
connection: koneksiRedis,
|
|
204
|
-
concurrency: 20,
|
|
205
|
-
limiter: {
|
|
206
|
-
max: 100,
|
|
207
|
-
duration: 1000,
|
|
208
|
-
},
|
|
209
|
-
}
|
|
210
|
-
);
|
|
211
|
-
|
|
212
|
-
// Teruskan ke DLQ jika jatah retry telah habis
|
|
213
|
-
workerNotifikasi.on('failed', async (job, error) => {
|
|
214
|
-
if (job && job.attemptsMade >= (job.opts.attempts || 5)) {
|
|
215
|
-
console.error(`[DLQ] Job ${job.id} gagal total. Memindahkan ke DLQ:`, error.message);
|
|
216
|
-
await antreanDLQ.add('notifikasi_gagal', {
|
|
217
|
-
originalJobId: job.id,
|
|
218
|
-
failedReason: error.message,
|
|
219
|
-
data: job.data,
|
|
220
|
-
exhaustedAt: new Date().toISOString(),
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
---
|
|
227
|
-
|
|
228
|
-
### Checklist Implementasi
|
|
229
|
-
- [ ] Atur konfigurasi `maxRetriesPerRequest: null` pada koneksi ioredis untuk BullMQ v5.
|
|
230
|
-
- [ ] Gunakan `jobId` deterministik dari ID transaksi bisnis (`invoice_${invoiceId}`) untuk mencegah duplikasi.
|
|
231
|
-
- [ ] Pasang *event listener* pada event `failed` untuk meneruskan job yang gagal total ke antrean DLQ.
|
|
232
|
-
- [ ] Terapkan pembatasan *rate limiter* pada worker untuk menjaga kestabilan API eksternal.
|
|
233
|
-
|
|
234
|
-
## Integrasi Orkestrasi
|
|
235
|
-
- Terintegrasi dengan: `js-backend-expert`, `async-queue-temporal-expert`, `error-resilience-expert`, `data-telemetry-expert`.
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: database-migration-versioning-expert
|
|
3
|
-
description: "Expert guide for database migrations: schema versioning, zero-downtime migrations, backward-compatible changes, data backfill, and rollback strategies / Panduan ahli migrasi database."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Database Migration & Versioning Expert
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Description
|
|
17
|
-
A specialized skill focused strictly on the lifecycle of database schemas in production environments. While `database-orm-expert` handles queries and types, this skill covers the DevOps aspect of databases: zero-downtime schema migrations, backward-compatible release cycles, stateful data backfills, rollback mechanisms, and schema versioning strategies.
|
|
18
|
-
|
|
19
|
-
### Trigger Conditions
|
|
20
|
-
- When modifying an existing production database schema.
|
|
21
|
-
- When planning a deployment that involves database changes (blue-green, canary).
|
|
22
|
-
- When resolving merge conflicts in migration files (e.g., Prisma, Drizzle, Alembic).
|
|
23
|
-
- When designing backfill scripts for massive data migrations.
|
|
24
|
-
|
|
25
|
-
### Core Architectural Guidelines
|
|
26
|
-
|
|
27
|
-
#### 1. Zero-Downtime Migration Pattern (Expand and Contract)
|
|
28
|
-
Never make breaking changes in a single deployment. Use the "Expand and Contract" pattern (Parallel Change):
|
|
29
|
-
- **Phase 1 (Expand)**: Add the new schema element (column, table) without removing the old one. Deploy the database change.
|
|
30
|
-
- **Phase 2 (Migrate)**: Update application code to write to *both* old and new elements, and read from the new element (with fallback). Deploy code.
|
|
31
|
-
- **Phase 3 (Backfill)**: Run a background script to backfill data from the old element to the new element for older records.
|
|
32
|
-
- **Phase 4 (Contract)**: Remove the old application code that writes to the old element. Deploy code.
|
|
33
|
-
- **Phase 5 (Cleanup)**: Drop the old schema element from the database.
|
|
34
|
-
|
|
35
|
-
#### 2. Backward Compatibility Rules
|
|
36
|
-
- **Never `DROP` or `RENAME`** a column/table in active use. Create a new one, migrate data, then drop the old one later.
|
|
37
|
-
- **Avoid changing constraints** on existing data without carefully verifying that all data complies.
|
|
38
|
-
- **Add `DEFAULT` values** to new `NOT NULL` columns, or make them nullable first, backfill, then enforce `NOT NULL`.
|
|
39
|
-
|
|
40
|
-
#### 3. Migration Mechanics
|
|
41
|
-
- Always use version-controlled, immutable migration scripts (e.g., `20260814_add_user_status.sql`).
|
|
42
|
-
- Never modify an already-applied migration file. If a mistake was made, create a new forward-migration to fix it.
|
|
43
|
-
- **Idempotency**: Write scripts that can be safely run multiple times (e.g., `CREATE TABLE IF NOT EXISTS`, `ADD COLUMN IF NOT EXISTS`).
|
|
44
|
-
|
|
45
|
-
#### 4. Safe Data Backfilling
|
|
46
|
-
For large tables (millions of rows), running `UPDATE table SET new_col = old_col` will lock the table and cause downtime.
|
|
47
|
-
- **Chunking**: Perform updates in batches using `LIMIT` and sleep intervals to avoid locking the database.
|
|
48
|
-
- **Background Jobs**: Use dedicated queues (like BullMQ or Inngest) to orchestrate massive backfills.
|
|
49
|
-
|
|
50
|
-
## Orchestration & Integration
|
|
51
|
-
- Enhances `database-orm-expert` with production-grade migration strategies.
|
|
52
|
-
- Complements `ci-cd-devops-architect` for automated migration deployment steps.
|
|
53
|
-
- Integrates with `supabase-migration` for Supabase-specific PostgreSQL migration workflows.
|
|
54
|
-
|
|
55
|
-
---
|
|
56
|
-
|
|
57
|
-
<a name="bahasa-indonesia"></a>
|
|
58
|
-
## Bahasa Indonesia
|
|
59
|
-
|
|
60
|
-
### Deskripsi
|
|
61
|
-
Skill khusus yang berfokus ketat pada siklus hidup skema database di lingkungan produksi. Sementara `database-orm-expert` menangani query dan tipe, skill ini mencakup aspek DevOps database: migrasi skema tanpa downtime (zero-downtime), rilis backward-compatible, skrip backfill data stateful, mekanisme rollback, dan strategi pembuatan versi skema.
|
|
62
|
-
|
|
63
|
-
### Kondisi Pemicu
|
|
64
|
-
- Saat memodifikasi skema database produksi yang sudah ada.
|
|
65
|
-
- Saat merencanakan deployment yang melibatkan perubahan database (blue-green, canary).
|
|
66
|
-
- Saat merancang skrip backfill untuk tabel berukuran besar (jutaan baris).
|
|
67
|
-
|
|
68
|
-
### Panduan Arsitektur Inti
|
|
69
|
-
|
|
70
|
-
#### 1. Pola Zero-Downtime (Expand and Contract)
|
|
71
|
-
Jangan pernah melakukan perubahan yang merusak (breaking change) dalam satu deployment.
|
|
72
|
-
- Tambahkan kolom baru tanpa menghapus yang lama.
|
|
73
|
-
- Ubah aplikasi untuk menulis ke keduanya dan membaca dari yang baru.
|
|
74
|
-
- Lakukan migrasi data lama (backfill).
|
|
75
|
-
- Hapus penggunaan kolom lama dari kode aplikasi.
|
|
76
|
-
- Hapus kolom lama dari database di migrasi berikutnya.
|
|
77
|
-
|
|
78
|
-
#### 2. Aturan Kompatibilitas Mundur (Backward Compatibility)
|
|
79
|
-
- **Jangan pernah melakukan `DROP` atau `RENAME`** pada kolom yang sedang aktif digunakan. Buat yang baru, pindahkan data, baru hapus yang lama di siklus rilis berikutnya.
|
|
80
|
-
- Kolom `NOT NULL` baru harus selalu memiliki nilai `DEFAULT`, atau jadikan nullable terlebih dahulu sebelum memaksakan constraint.
|
|
81
|
-
|
|
82
|
-
#### 3. Keamanan Skrip Migrasi
|
|
83
|
-
- Gunakan file migrasi yang immutable (tidak boleh diubah setelah di-deploy). Jika ada bug, buat file migrasi baru untuk memperbaikinya (forward-fix).
|
|
84
|
-
- Skrip harus sebisa mungkin bersifat idempoten.
|
|
85
|
-
- Untuk tabel besar, lakukan backfill data secara bertahap (chunking/batching) agar tidak terjadi table lock yang menyebabkan downtime aplikasi.
|
|
86
|
-
|
|
87
|
-
## Integrasi Orkestrasi
|
|
88
|
-
- Memperkuat `database-orm-expert` dengan strategi deployment yang aman.
|
|
89
|
-
- Melengkapi `ci-cd-devops-architect` dalam alur CI/CD untuk otomatisasi migrasi.
|
|
90
|
-
- Terintegrasi dengan `supabase-migration` untuk ekosistem spesifik Supabase.
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: edge-serverless-db-expert
|
|
3
|
-
description: "Expert guide for Serverless & Edge Databases (Neon Serverless Postgres, Cloudflare D1, Turso/libsql, Upstash Redis), cold-start mitigation, and connection pooling / Panduan ahli database Serverless & Edge (Neon, Cloudflare D1, Turso, Upstash)."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Edge & Serverless DB Expert
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Purpose & Overview
|
|
17
|
-
Best practices for building ultra-low-latency 2026/2027 applications powered by serverless and edge databases. Exploit Neon Serverless Postgres, Cloudflare D1, Turso, Upstash Serverless Redis & Vector. Implement zero-cold-start strategies and HTTP connection pooling.
|
|
18
|
-
|
|
19
|
-
### Key Capabilities
|
|
20
|
-
- **Neon & Cloudflare D1**: Serverless autoscaling Postgres with instant branching. Distributed edge SQLite.
|
|
21
|
-
- **Connection Pooling**: WebSocket/HTTP proxy pooling (Neon Serverless Driver, Upstash Redis over HTTP) for edge workers. Prevent TCP pool exhaustion.
|
|
22
|
-
- **Embedded Replicas**: Sync edge SQLite read-replicas with central cloud databases for sub-10ms queries.
|
|
23
|
-
|
|
24
|
-
```typescript
|
|
25
|
-
import { neon } from '@neondatabase/serverless';
|
|
26
|
-
import { drizzle } from 'drizzle-orm/neon-http';
|
|
27
|
-
|
|
28
|
-
const sql = neon(process.env.DATABASE_URL!);
|
|
29
|
-
export const db = drizzle({ client: sql });
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### Implementation Checklist
|
|
33
|
-
- [ ] Use HTTP/WebSocket drivers (e.g., `neon-http`) for querying databases from Edge Workers/Functions.
|
|
34
|
-
- [ ] Configure connection pooling (PgBouncer, Prisma Accelerate) for standard TCP connections to avoid exhausting database connection limits.
|
|
35
|
-
- [ ] Use read-replicas near the edge location for global deployments to minimize latency.
|
|
36
|
-
- [ ] Cache read-heavy queries at the edge using Upstash Redis or Cloudflare KV.
|
|
37
|
-
|
|
38
|
-
### Example: Upstash Redis Edge Caching
|
|
39
|
-
```typescript
|
|
40
|
-
import { Redis } from '@upstash/redis';
|
|
41
|
-
|
|
42
|
-
const redis = new Redis({
|
|
43
|
-
url: process.env.UPSTASH_REDIS_REST_URL!,
|
|
44
|
-
token: process.env.UPSTASH_REDIS_REST_TOKEN!,
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
export async function getCachedData(key: string) {
|
|
48
|
-
let data = await redis.get(key);
|
|
49
|
-
if (!data) {
|
|
50
|
-
data = await fetchFromDB();
|
|
51
|
-
await redis.set(key, data, { ex: 3600 }); // Cache for 1 hour
|
|
52
|
-
}
|
|
53
|
-
return data;
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Orchestration & Integration
|
|
58
|
-
- Integrates with: `database-orm-expert`, `js-backend-expert`, `cloud-hosting-expert`.
|
|
59
|
-
|
|
60
|
-
---
|
|
61
|
-
|
|
62
|
-
<a name="bahasa-indonesia"></a>
|
|
63
|
-
## Bahasa Indonesia
|
|
64
|
-
|
|
65
|
-
### Deskripsi
|
|
66
|
-
Praktik terbaik membangun aplikasi latensi rendah 2026/2027 dengan database serverless dan edge. Manfaatkan Neon Serverless Postgres, Cloudflare D1, Turso, Upstash Serverless Redis & Vector. Implementasi strategi tanpa cold-start dan connection pooling HTTP.
|
|
67
|
-
|
|
68
|
-
### Fitur Utama
|
|
69
|
-
- **Neon & Cloudflare D1**: Serverless Postgres autoscaling dengan branching instan. Distributed edge SQLite.
|
|
70
|
-
- **Connection Pooling**: Proxy pooling HTTP/WebSocket untuk edge worker. Cegah kehabisan koneksi TCP.
|
|
71
|
-
- **Embedded Replicas**: Sinkronisasi read-replica SQLite di edge dengan database utama untuk query di bawah 10ms.
|
|
72
|
-
|
|
73
|
-
### Checklist Implementasi
|
|
74
|
-
- [ ] Gunakan driver HTTP/WebSocket (misal: `neon-http`) untuk mengakses database dari Edge Workers/Functions.
|
|
75
|
-
- [ ] Konfigurasi connection pooling (PgBouncer, Prisma Accelerate) pada koneksi TCP standar untuk mencegah batas koneksi habis.
|
|
76
|
-
- [ ] Gunakan read-replicas di dekat lokasi edge untuk deployment global guna meminimalkan latensi.
|
|
77
|
-
- [ ] Cache query berat di edge menggunakan Upstash Redis atau Cloudflare KV.
|
|
78
|
-
|
|
79
|
-
### Contoh: Upstash Redis Edge Caching
|
|
80
|
-
```typescript
|
|
81
|
-
import { Redis } from '@upstash/redis';
|
|
82
|
-
|
|
83
|
-
const redis = new Redis({
|
|
84
|
-
url: process.env.UPSTASH_REDIS_REST_URL!,
|
|
85
|
-
token: process.env.UPSTASH_REDIS_REST_TOKEN!,
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
export async function getCachedData(key: string) {
|
|
89
|
-
let data = await redis.get(key);
|
|
90
|
-
if (!data) {
|
|
91
|
-
data = await fetchFromDB();
|
|
92
|
-
await redis.set(key, data, { ex: 3600 }); // Cache 1 jam
|
|
93
|
-
}
|
|
94
|
-
return data;
|
|
95
|
-
}
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
## Integrasi Orkestrasi
|
|
99
|
-
- Terintegrasi dengan: `database-orm-expert`, `js-backend-expert`, `cloud-hosting-expert`.
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: mcp-client-orchestrator
|
|
3
|
-
description: "Expert guide for the AI Agent to dynamically orchestrate and consume external MCP (Model Context Protocol) servers, giving it real-time superpowers over databases, GitHub, Slack, and local files."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# MCP Client Orchestrator
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Orchestration & Integration
|
|
17
|
-
Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
|
|
18
|
-
|
|
19
|
-
### Description
|
|
20
|
-
While `mcp-server-architect` teaches the agent how to *build* servers, this skill teaches the agent how to **consume** them as an MCP Client. This grants the agent "superpowers" by securely interacting with local PostgreSQL databases, GitHub repos, Figma APIs, and Slack channels in real-time, autonomously, using available MCP tool sets.
|
|
21
|
-
|
|
22
|
-
### Trigger Conditions
|
|
23
|
-
Activate this skill when:
|
|
24
|
-
- The user asks the agent to query the database, but the agent doesn't have a direct SQL tool.
|
|
25
|
-
- The user needs real-time context from an external system (e.g., "Read the latest Slack messages about this bug").
|
|
26
|
-
- The user wants the agent to orchestrate multiple tools across different domains simultaneously.
|
|
27
|
-
|
|
28
|
-
### Core Concepts
|
|
29
|
-
|
|
30
|
-
#### 1. MCP Resource & Tool Discovery
|
|
31
|
-
Before assuming a capability doesn't exist, the agent should dynamically inspect available tools.
|
|
32
|
-
- Use `list_resources` or check `mcp_config.json` to see what servers are running.
|
|
33
|
-
- Understand that MCP tools proxy capabilities securely. If there's a `postgres_mcp`, the agent can execute `execute_sql` through it.
|
|
34
|
-
|
|
35
|
-
#### 2. Workflow Orchestration
|
|
36
|
-
Example: "Find the bug reported on GitHub and fix it."
|
|
37
|
-
1. Use the GitHub MCP to `search_issues`.
|
|
38
|
-
2. Extract the stack trace from the issue comment.
|
|
39
|
-
3. Use `grep_search` to find the failing code.
|
|
40
|
-
4. Use `autonomous-tdd-debugger` to fix and test it.
|
|
41
|
-
5. Use the GitHub MCP to `create_pull_request`.
|
|
42
|
-
|
|
43
|
-
### Best Practices
|
|
44
|
-
- **Never guess schema:** Always use MCP tools like `list_tables` or `get_schema` before writing a query.
|
|
45
|
-
- **Respect Rate Limits:** If calling external APIs via MCP, avoid looping rapidly without timeouts.
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
|
-
### Integration with Other Skills (MANDATORY)
|
|
50
|
-
- `doku-mcp-server` — An example of a specific MCP server the agent can orchestrate.
|
|
51
|
-
- `ai-llm-integration-expert` — Provides context on how MCP fits into the broader LangGraph/AI landscape.
|
|
52
|
-
- `multi-agent-orchestration` — Used when delegating different MCP tool calls to specialized subagents.
|
|
53
|
-
|
|
54
|
-
### Referenced By Orchestrators (MANDATORY)
|
|
55
|
-
- `brainstorming` — Add to "AI & LLM Integration".
|
|
56
|
-
- `zero-to-prod-orchestrator` — Phase 4 (AI Agents).
|
|
57
|
-
|
|
58
|
-
---
|
|
59
|
-
|
|
60
|
-
<a name="bahasa-indonesia"></a>
|
|
61
|
-
## Bahasa Indonesia
|
|
62
|
-
|
|
63
|
-
### Integrasi Orkestrasi
|
|
64
|
-
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
|
|
65
|
-
|
|
66
|
-
### Deskripsi
|
|
67
|
-
Skill yang memandu Agen AI tentang cara menggunakan (consume) server Model Context Protocol (MCP) eksternal, memberikan kekuatan *real-time* untuk berinteraksi dengan Database, GitHub, Slack, dan sistem lainnya secara otonom.
|
|
68
|
-
|
|
69
|
-
### Kondisi Pemicu
|
|
70
|
-
- Saat Anda (sebagai agen) perlu mengeksekusi SQL ke database lokal/remote namun tidak memiliki akses terminal langsung.
|
|
71
|
-
- Saat Anda perlu membaca data *live* dari platform eksternal (Figma, GitHub, dll).
|
|
72
|
-
|
|
73
|
-
### Panduan Singkat
|
|
74
|
-
- **Eksplorasi Tool:** Selalu periksa tool MCP yang tersedia di sistem (misal `list_tables` atau `read_issue`). Jangan berasumsi Anda buta terhadap dunia luar jika server MCP-nya aktif.
|
|
75
|
-
- **Orkestrasi Lintas Platform:** Anda dapat membaca pesan error di Slack via MCP, mencari kode yang relevan di *file system*, memperbaikinya, dan membuat Pull Request di GitHub via MCP secara otomatis. Ini adalah definisi sebenarnya dari Agen Otonom.
|
|
76
|
-
- **Validasi Skema:** Jangan pernah menebak nama tabel. Selalu gunakan tool MCP untuk mengambil skema database terlebih dahulu sebelum menjalankan kueri `execute_sql`.
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: mobile-push-notification-expert
|
|
3
|
-
description: "Expert guide for Cross-Platform Push Notifications (Expo Push, FCM, APNs, Web Push), iOS Live Activities, and background payload handling / Panduan ahli notifikasi push mobile, FCM, APNs, dan Live Activities."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Mobile Push Notification & Live Activities Expert
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Purpose & Overview
|
|
17
|
-
Comprehensive guide for configuring cross-platform push notifications (Expo Push API, Firebase Cloud Messaging FCM, Apple APNs, Web Push API), iOS Live Activities / ActivityKit, background payload handlers, deep-linking routing, and push token lifecycle management.
|
|
18
|
-
|
|
19
|
-
### Key Capabilities
|
|
20
|
-
- **Expo & FCM Push**: Sending batched push notifications with rich media, actions, and custom data payloads.
|
|
21
|
-
- **iOS Live Activities**: Real-time status updates on iOS Dynamic Island and Lock Screen.
|
|
22
|
-
- **Deep Linking**: Routing push notification taps directly to targeted screens within Expo Router / React Native.
|
|
23
|
-
|
|
24
|
-
```typescript
|
|
25
|
-
import * as Notifications from 'expo-notifications';
|
|
26
|
-
|
|
27
|
-
export async function registerForPushNotificationsAsync() {
|
|
28
|
-
const { status: existingStatus } = await Notifications.getPermissionsAsync();
|
|
29
|
-
let finalStatus = existingStatus;
|
|
30
|
-
if (existingStatus !== 'granted') {
|
|
31
|
-
const { status } = await Notifications.requestPermissionsAsync();
|
|
32
|
-
finalStatus = status;
|
|
33
|
-
}
|
|
34
|
-
if (finalStatus !== 'granted') return null;
|
|
35
|
-
const token = (await Notifications.getExpoPushTokenAsync()).data;
|
|
36
|
-
return token;
|
|
37
|
-
}
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### Implementation Checklist
|
|
41
|
-
- [ ] Configure Apple Developer Account (APNs Key) and Google Firebase (FCM Service Account).
|
|
42
|
-
- [ ] Request push notification permissions explicitly from the user after they understand the value proposition.
|
|
43
|
-
- [ ] Save the device's Push Token to the database, associated with the user's ID.
|
|
44
|
-
- [ ] Handle token refresh events when the user uninstalls/reinstalls the app or changes devices.
|
|
45
|
-
- [ ] Set up background event handlers to process incoming messages when the app is killed.
|
|
46
|
-
|
|
47
|
-
## Orchestration & Integration
|
|
48
|
-
- Integrates with: `mobile-expo-expert`, `event-driven-architect`, `database-orm-expert`.
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
<a name="bahasa-indonesia"></a>
|
|
53
|
-
## Bahasa Indonesia
|
|
54
|
-
|
|
55
|
-
### Deskripsi
|
|
56
|
-
Panduan komprehensif untuk konfigurasi push notification lintas platform (Expo Push, FCM, APNs, Web Push), iOS Live Activities / ActivityKit, penanganan payload background, routing deep-linking, dan manajemen siklus token push.
|
|
57
|
-
|
|
58
|
-
### Fitur Utama
|
|
59
|
-
- **Expo & FCM Push**: Pengiriman push notification masal dengan media kaya, tombol aksi, dan payload kustom.
|
|
60
|
-
- **iOS Live Activities**: Update status real-time di Dynamic Island dan Lock Screen iOS.
|
|
61
|
-
- **Deep Linking**: Mengarahkan ketukan notifikasi secara langsung ke layar target di Expo Router / React Native.
|
|
62
|
-
|
|
63
|
-
### Checklist Implementasi
|
|
64
|
-
- [ ] Konfigurasi Akun Developer Apple (Kunci APNs) dan Google Firebase (Service Account FCM).
|
|
65
|
-
- [ ] Minta izin notifikasi push secara eksplisit dari pengguna setelah mereka memahami nilai gunanya.
|
|
66
|
-
- [ ] Simpan Push Token perangkat ke database, yang terkait dengan ID pengguna.
|
|
67
|
-
- [ ] Tangani event penyegaran token saat pengguna menghapus/menginstal ulang aplikasi atau mengganti perangkat.
|
|
68
|
-
- [ ] Siapkan handler event background untuk memproses pesan masuk saat aplikasi ditutup (killed).
|
|
69
|
-
|
|
70
|
-
## Integrasi Orkestrasi
|
|
71
|
-
- Terintegrasi dengan: `mobile-expo-expert`, `event-driven-architect`, `database-orm-expert`.
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: monday-design-aesthetic
|
|
3
|
-
description: "Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com."
|
|
4
|
-
author: "Roedy Rustam"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Monday.com Design Aesthetic
|
|
8
|
-
|
|
9
|
-
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
<a name="english"></a>
|
|
14
|
-
## English
|
|
15
|
-
|
|
16
|
-
### Orchestration & Integration
|
|
17
|
-
Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
|
|
18
|
-
|
|
19
|
-
### Description
|
|
20
|
-
This skill focuses on implementing the modern, spacious, and structured design aesthetic inspired by Monday.com. It is ideal for SaaS landing pages and dashboards.
|
|
21
|
-
|
|
22
|
-
### Trigger Conditions
|
|
23
|
-
Use this when the user asks for:
|
|
24
|
-
- A "Monday.com style" design.
|
|
25
|
-
- A modern SaaS landing page with clean structure.
|
|
26
|
-
- High-quality, spacious UI with vibrant accents.
|
|
27
|
-
|
|
28
|
-
### Core Design Tokens
|
|
29
|
-
- **Primary Brand Color**: Vibrant Blue (`#0073ea`) for active states and primary buttons.
|
|
30
|
-
- **Backgrounds**: Clean White (`#FFFFFF`) for main content, Light Grays (`#F9F9F9`, `#F5F6F8`) for section alternations, Dark Gray/Black (`#111111`) for footers.
|
|
31
|
-
- **Typography**: Clean geometric sans-serif (e.g., Figtree, Circular, Inter).
|
|
32
|
-
- Hero text is extra-bold (48-60px).
|
|
33
|
-
- Section headers are bold (32-40px) in dark slate (`#333333`).
|
|
34
|
-
- Body text is medium (16-18px) in muted gray (`#676879`).
|
|
35
|
-
|
|
36
|
-
### UI Components & Layout
|
|
37
|
-
- **Buttons**: Fully rounded corners (~8px). Primary buttons use vibrant blue with white text and generous padding (e.g., `px-6 py-3`).
|
|
38
|
-
- **Cards**: Large border radius (12-16px) with flat borders or extremely subtle drop shadows (`shadow-sm`).
|
|
39
|
-
- **Layout**: Centered max-width containers (1200-1400px).
|
|
40
|
-
- **Spacing**: Generous vertical padding between sections (80-120px) to let content breathe.
|
|
41
|
-
- **Interactions**: Smooth hover states, interactive tab systems, and collapsible accordions.
|
|
42
|
-
|
|
43
|
-
---
|
|
44
|
-
|
|
45
|
-
<a name="bahasa-indonesia"></a>
|
|
46
|
-
## Bahasa Indonesia
|
|
47
|
-
|
|
48
|
-
### Integrasi Orkestrasi
|
|
49
|
-
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
|
|
50
|
-
|
|
51
|
-
### Deskripsi
|
|
52
|
-
Skill ini berfokus pada implementasi desain yang modern, luas (spacious), dan terstruktur yang terinspirasi oleh Monday.com. Sangat cocok untuk landing page dan dashboard SaaS.
|
|
53
|
-
|
|
54
|
-
### Kondisi Pemicu
|
|
55
|
-
Gunakan saat pengguna meminta:
|
|
56
|
-
- Desain ala "Monday.com".
|
|
57
|
-
- Landing page SaaS modern dengan struktur bersih.
|
|
58
|
-
- UI berkualitas tinggi dengan ruang bernapas luas dan aksen cerah.
|
|
59
|
-
|
|
60
|
-
### Token Desain Utama
|
|
61
|
-
- **Warna Utama (Brand Color)**: Biru Cerah (`#0073ea`) untuk elemen aktif dan tombol utama.
|
|
62
|
-
- **Background**: Putih Bersih (`#FFFFFF`) untuk konten utama, Abu-abu Terang (`#F9F9F9`, `#F5F6F8`) untuk variasi bagian, Abu-abu Gelap/Hitam (`#111111`) untuk footer.
|
|
63
|
-
- **Tipografi**: Sans-serif geometris bersih (mis. Figtree, Circular, Inter).
|
|
64
|
-
- Teks Hero sangat tebal (48-60px).
|
|
65
|
-
- Header bagian tebal (32-40px) dengan warna dark slate (`#333333`).
|
|
66
|
-
- Teks isi sedang (16-18px) berwarna abu-abu redup (`#676879`).
|
|
67
|
-
|
|
68
|
-
### Komponen UI & Layout
|
|
69
|
-
- **Tombol (Buttons)**: Sudut melengkung (~8px). Tombol utama berwarna biru dengan padding luas (`px-6 py-3`).
|
|
70
|
-
- **Kartu (Cards)**: Radius sudut besar (12-16px) dengan border datar atau bayangan sangat halus (`shadow-sm`).
|
|
71
|
-
- **Tata Letak (Layout)**: Kontainer dengan lebar maksimal (1200-1400px) terpusat.
|
|
72
|
-
- **Jarak (Spacing)**: Jarak vertikal yang sangat lega antar bagian (80-120px).
|
|
73
|
-
- **Interaksi**: Efek hover halus, sistem tab interaktif, dan akordion lipat.
|