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.
Files changed (69) hide show
  1. package/.cursor/rules/vibes-plug-core.mdc +3 -3
  2. package/.cursorrules +3 -3
  3. package/AGENTS.md +4 -4
  4. package/BLUEPRINT.md +16 -6
  5. package/CHANGELOG.md +37 -0
  6. package/CLAUDE.md +8 -8
  7. package/README.md +85 -115
  8. package/index.js +1 -1
  9. package/package.json +2 -2
  10. package/plugin.json +2 -2
  11. package/scripts/check-anti-slop.js +53 -0
  12. package/scripts/generate_swarm_gif.py +2 -2
  13. package/skills/ai-llm-integration-expert/SKILL.md +22 -15
  14. package/skills/ai-prompt-engineering-expert/SKILL.md +133 -83
  15. package/skills/anti-slop/SKILL.md +133 -0
  16. package/skills/async-queue-temporal-expert/SKILL.md +135 -158
  17. package/skills/authentication-identity-expert/SKILL.md +172 -278
  18. package/skills/brainstorming/SKILL.md +26 -26
  19. package/skills/database-orm-expert/SKILL.md +164 -303
  20. package/skills/deep-research-analyst/SKILL.md +136 -0
  21. package/skills/design-system-architect/SKILL.md +31 -1
  22. package/skills/email-notification-expert/SKILL.md +31 -4
  23. package/skills/error-resilience-expert/SKILL.md +21 -0
  24. package/skills/fullstack-expert/SKILL.md +183 -260
  25. package/skills/glsl-shader-expert/SKILL.md +190 -107
  26. package/skills/graph-rag-knowledge-expert/SKILL.md +42 -1
  27. package/skills/mcp-server-architect/SKILL.md +15 -1
  28. package/skills/prd-architect/SKILL.md +181 -206
  29. package/skills/production-ready-hardener/SKILL.md +16 -19
  30. package/skills/pwa-offline-first-expert/SKILL.md +42 -1
  31. package/skills/pydantic-ai-expert/SKILL.md +161 -0
  32. package/skills/saas-architect/SKILL.md +154 -0
  33. package/skills/senior-frontend/SKILL.md +9 -11
  34. package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
  35. package/skills/session-memory-manager/SKILL.md +128 -0
  36. package/skills/synthetic-data-finetuning-expert/SKILL.md +155 -0
  37. package/skills/ui-ux-pro-max/SKILL.md +4 -2
  38. package/skills/vercel-ai-sdk-expert/SKILL.md +181 -0
  39. package/skills/voice-ai-realtime-agent/SKILL.md +41 -1
  40. package/skills/web-3d-graphics-expert/SKILL.md +313 -137
  41. package/skills/web-game-engine-expert/SKILL.md +329 -102
  42. package/skills/webxr-ar-vr-expert/SKILL.md +162 -123
  43. package/skills/zero-to-prod-orchestrator/SKILL.md +26 -24
  44. package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
  45. package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
  46. package/skills/asisten-ramah/SKILL.md +0 -47
  47. package/skills/auto-doc-updater/SKILL.md +0 -220
  48. package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
  49. package/skills/background-jobs-queue-expert/SKILL.md +0 -235
  50. package/skills/database-migration-versioning-expert/SKILL.md +0 -90
  51. package/skills/edge-serverless-db-expert/SKILL.md +0 -99
  52. package/skills/mcp-client-orchestrator/SKILL.md +0 -76
  53. package/skills/mobile-push-notification-expert/SKILL.md +0 -71
  54. package/skills/monday-design-aesthetic/SKILL.md +0 -73
  55. package/skills/project-context-mapper/SKILL.md +0 -85
  56. package/skills/saas-mvp-launcher/SKILL.md +0 -260
  57. package/skills/saas-transformer/SKILL.md +0 -500
  58. package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
  59. package/skills/self-evolving-memory-graph/SKILL.md +0 -91
  60. package/skills/session-context-loader/SKILL.md +0 -83
  61. package/skills/session-handoff-resume/SKILL.md +0 -164
  62. package/skills/skill-baru/SKILL.md +0 -178
  63. package/skills/supabase-migration/SKILL.md +0 -91
  64. package/skills/token-saver/SKILL.md +0 -119
  65. package/skills/ui-components-expert/SKILL.md +0 -166
  66. package/skills/vibe-code-gardener/SKILL.md +0 -181
  67. /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
  68. /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
  69. /package/skills/{saas-transformer → saas-architect}/scripts/saas_transformation_scanner.py +0 -0
@@ -0,0 +1,161 @@
1
+ ---
2
+ name: pydantic-ai-expert
3
+ description: "Expert guide for type-safe Python AI agent development with Pydantic AI — dependency injection, structured outputs, model-agnostic routing, and graph workflows / Panduan ahli pengembangan agen AI Python type-safe dengan Pydantic AI."
4
+ author: vibes-plug-swarm
5
+ ---
6
+
7
+ # Pydantic AI Expert (Type-Safe Python Agent Engineering)
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 domain skills like `python-programming-expert`, `multi-agent-orchestration`, `ai-llm-integration-expert`, `ai-evals-benchmark-expert`, and `database-orm-expert` to engineer type-safe, resilient backend AI agents.
18
+
19
+ ### Description
20
+ Production-grade guide for building enterprise AI agents using **Pydantic AI** (from the creators of Pydantic). Unlike untyped or fragile agent libraries, Pydantic AI provides strict static typing (`Agent[DepsType, ReturnType]`), first-class dependency injection (`RunContext[Deps]`), automatic tool parameter validation via Pydantic v2 schemas, model-agnostic provider switching (Anthropic, OpenAI, Gemini, Groq, Ollama), dynamic system prompts, and deterministic structured outputs.
21
+
22
+ **Swarm Synergy:** Within the **Backend & APIs Swarm**, this skill serves as the Lead Python Agent Engineer. It executes critical business operations, runs data pipelines, and integrates with SQL databases with compile-time type safety in Phase 4.
23
+
24
+ ### Trigger Conditions
25
+ - Engineering Python-based autonomous agents requiring strict type safety and schema validation.
26
+ - Implementing dependency injection (passing database connections, API clients, or user sessions) into agent tools.
27
+ - Extracting guaranteed structured outputs from frontier reasoning models without JSON parsing errors.
28
+ - Designing multi-agent delegation or agent handoffs in Python microservices.
29
+ - Running unit tests and deterministic evals on agent logic using mock models (`TestModel`).
30
+
31
+ ### Pydantic AI Architecture
32
+
33
+ ```
34
+ ┌─────────────────────────────────────────────────────────────┐
35
+ │ AGENT DEFINITION │
36
+ │ Agent[DatabaseDeps, AuditReport]( │
37
+ │ model='anthropic:claude-3-7-sonnet-latest', │
38
+ │ result_type=AuditReport, │
39
+ │ ) │
40
+ └──────────────────────────────┬──────────────────────────────┘
41
+ │
42
+ ┌───────────────────────┴───────────────────────┐
43
+ ▼ ▼
44
+ ┌──────────────────────────────┐ ┌──────────────────────────────┐
45
+ │ DEPENDENCY INJECTION │ │ TOOL EXECUTION LOOP │
46
+ │ RunContext[DatabaseDeps] │ │ @agent.tool │
47
+ │ • Async DB connection pool │ │ • Auto Pydantic validation │
48
+ │ • Tenant & session auth │ │ • Structured error return │
49
+ └──────────────────────────────┘ └──────────────────────────────┘
50
+ │
51
+ ▼
52
+ ┌─────────────────────────────────────────────────────────────┐
53
+ │ DETERMINISTIC STRUCTURED RESULT │
54
+ │ result.data -> Pydantic BaseModel instance (Validated) │
55
+ └─────────────────────────────────────────────────────────────┘
56
+ ```
57
+
58
+ ### Core Implementation Guidelines
59
+
60
+ #### 1. Type-Safe Agent with Dependency Injection
61
+ Pass database pools or HTTP clients directly into tools without global state:
62
+ ```python
63
+ from dataclasses import dataclass
64
+ import asyncpg
65
+ from pydantic import BaseModel, Field
66
+ from pydantic_ai import Agent, RunContext
67
+
68
+ @dataclass
69
+ class DatabaseDeps:
70
+ pool: asyncpg.Pool
71
+ tenant_id: str
72
+
73
+ class UserAnomalyReport(BaseModel):
74
+ user_id: str
75
+ risk_score: float = Field(ge=0.0, le=1.0)
76
+ anomalous_events: list[str]
77
+ action_recommended: str
78
+
79
+ # Typed agent: Agent[DependencyType, ResultType]
80
+ security_agent = Agent[DatabaseDeps, UserAnomalyReport](
81
+ model='google-gla:gemini-2.5-flash',
82
+ result_type=UserAnomalyReport,
83
+ system_prompt=(
84
+ "You are an automated SecOps auditor. Analyze the user access logs provided "
85
+ "and generate a strictly structured anomaly assessment."
86
+ ),
87
+ )
88
+
89
+ @security_agent.system_prompt
90
+ async def add_tenant_context(ctx: RunContext[DatabaseDeps]) -> str:
91
+ return f"Active Tenant ID: {ctx.deps.tenant_id}. Only audit records matching this tenant."
92
+
93
+ @security_agent.tool
94
+ async def query_audit_logs(ctx: RunContext[DatabaseDeps], user_id: str, limit: int = 50) -> list[dict]:
95
+ """Retrieve raw authentication events for a given user from the audit store."""
96
+ async with ctx.deps.pool.acquire() as conn:
97
+ rows = await conn.fetch(
98
+ "SELECT event_time, ip_address, action, status FROM audit_logs "
99
+ "WHERE tenant_id = $1 AND user_id = $2 ORDER BY event_time DESC LIMIT $3",
100
+ ctx.deps.tenant_id, user_id, limit
101
+ )
102
+ return [dict(r) for r in rows]
103
+
104
+ # Execution:
105
+ async def run_audit(pool: asyncpg.Pool, tenant_id: str, target_user: str) -> UserAnomalyReport:
106
+ deps = DatabaseDeps(pool=pool, tenant_id=tenant_id)
107
+ result = await security_agent.run(f"Audit user activity for {target_user}", deps=deps)
108
+ return result.data # Guaranteed instance of UserAnomalyReport
109
+ ```
110
+
111
+ #### 2. Model-Agnostic Switching & Local SLM Fallback
112
+ Pydantic AI allows switching between cloud APIs and local Ollama models effortlessly:
113
+ ```python
114
+ import os
115
+ from pydantic_ai.models.anthropic import AnthropicModel
116
+ from pydantic_ai.models.ollama import OllamaModel
117
+
118
+ def get_agent_model():
119
+ if os.getenv("ENV") == "production":
120
+ return AnthropicModel('claude-3-7-sonnet-20250219')
121
+ else:
122
+ # Zero cost local development with Ollama
123
+ return OllamaModel(model_name='qwen2.5-coder:7b')
124
+ ```
125
+
126
+ #### 3. Deterministic Testing with `TestModel`
127
+ Write unit tests that verify tool invocations and structured output parsing without calling live LLMs:
128
+ ```python
129
+ import pytest
130
+ from pydantic_ai.models.test import TestModel
131
+
132
+ @pytest.mark.asyncio
133
+ async def test_security_agent_tool_dispatch():
134
+ # TestModel can simulate deterministic responses or tool calls
135
+ test_model = TestModel(call_tools=['query_audit_logs'])
136
+
137
+ with security_agent.override(model=test_model):
138
+ deps = DatabaseDeps(pool=mock_pool, tenant_id="tenant_123")
139
+ result = await security_agent.run("Audit user 456", deps=deps)
140
+ assert result.data is not None
141
+ ```
142
+
143
+ ---
144
+
145
+ <a name="bahasa-indonesia"></a>
146
+ ## Bahasa Indonesia
147
+
148
+ ### Integrasi Orkestrasi
149
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `python-programming-expert`, `multi-agent-orchestration`, `ai-llm-integration-expert`, `ai-evals-benchmark-expert`, dan `database-orm-expert` untuk membangun agen AI backend yang aman secara tipe (*type-safe*) dan tangguh.
150
+
151
+ ### Deskripsi
152
+ Panduan produksi untuk membangun agen AI kelas perusahaan menggunakan **Pydantic AI** (dari pembuat library Pydantic). Tidak seperti library agen yang tidak bertipe statis atau mudah mengalami galat runtime, Pydantic AI menyediakan sistem tipe statis yang ketat (`Agent[DepsType, ReturnType]`), *dependency injection* bawaan kelas satu (`RunContext[Deps]`), validasi parameter tool otomatis melalui skema Pydantic v2, fleksibilitas pergantian model (*model-agnostic*), dan hasil output terstruktur yang terjamin validitasnya.
153
+
154
+ **Sinergi Swarm:** Di dalam **Backend & APIs Swarm**, skill ini bertindak sebagai Insinyur Agen AI Python Utama. Bertanggung jawab atas eksekusi logika bisnis kritis, orkestrasi pipeline data, dan query database SQL dengan keamanan tipe kompilasi pada Fase 4.
155
+
156
+ ### Kondisi Pemicu
157
+ - Membangun agen otonom Python yang menuntut keamanan tipe statis dan validasi skema data ketat.
158
+ - Menerapkan injeksi dependensi (koneksi database, klien HTTP, session user) ke dalam tool agen tanpa variabel global.
159
+ - Mengekstrak data terstruktur yang dijamin valid dari model penalaran tanpa kegagalan parsing JSON.
160
+ - Merancang delegasi tugas antar agen (*agent handoffs*) pada arsitektur microservices berbasis Python.
161
+ - Menjalankan unit test deterministik dan evaluasi agen dengan `TestModel` tanpa konsumsi token API nyata.
@@ -0,0 +1,154 @@
1
+ ---
2
+ name: saas-architect
3
+ description: "Master SaaS orchestrator for greenfield MVP launch (0 to 1) and legacy application SaaS transformation (1 to N) / Master orkestrator SaaS untuk peluncuran MVP dari nol (0 ke 1) dan transformasi aplikasi menjadi SaaS (1 ke N)."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # SaaS Architect (MVP Launcher & Transformation Master)
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 domain skills like `brainstorming`, `zero-to-prod-orchestrator`, `saas-multi-tenant`, `saas-billing`, `session-memory-manager`, `prd-architect`, and `production-ready-hardener`.
18
+ - **MANDATORY**: Execute `modern-web-guidance` FIRST for all frontend HTML/CSS/JS features to ensure compliance with modern standards.
19
+
20
+ ### Description
21
+ The **SaaS Architect** is the master lifecycle orchestrator for building commercial SaaS platforms. It operates in two specialized modes:
22
+ - **Mode A (Greenfield MVP 0-to-1)**: Validating ideas, rapid stack selection, multi-entry points architecture, authentication, billing setup, and launch checklist.
23
+ - **Mode B (App Modernization 1-to-N)**: Systematically converting existing single-tenant or internal applications into enterprise-grade multi-tenant SaaS platforms using a 9-phase transformation pipeline.
24
+
25
+ ### Trigger Conditions
26
+ - Planning or launching a brand-new SaaS product from scratch.
27
+ - Modernizing or converting an existing web app into a commercial SaaS.
28
+ - Setting up multi-tenancy, workspace isolation, team management, or feature gating.
29
+ - Conducting a technical audit of an existing SaaS architecture.
30
+
31
+ ---
32
+
33
+ ### Mode A: Greenfield SaaS MVP (0 to 1)
34
+
35
+ #### 1. Idea Validation & Scoping
36
+ - Define the exact customer problem in one sentence.
37
+ - Verify 3+ pre-commitments or letters of intent before deep coding.
38
+ - Keep MVP scope tight (target 4-6 weeks to launch).
39
+
40
+ #### 2. Modern SaaS Stack Blueprint (2026)
41
+ - **Frontend & App**: Next.js 15 App Router + React 19 + TypeScript.
42
+ - **Styling & UI**: Tailwind CSS v4 + Base UI / shadcn/ui primitives.
43
+ - **Data Layer**: PostgreSQL (Neon Serverless / Supabase) via Drizzle ORM or Prisma 6.
44
+ - **Auth**: Clerk, Auth.js v5, or Supabase Auth with OAuth2 PKCE.
45
+ - **Billing**: Stripe / Midtrans / DOKU via webhook-driven synchronization.
46
+ - **Email & Jobs**: Resend + React Email; BullMQ / Trigger.dev v3 for background jobs.
47
+ - **Deployment**: Vercel / Cloudflare Edge with zero-config CI/CD.
48
+
49
+ #### 3. Architecture & Entry Points Isolation
50
+ Apply the `multiple-entry-points` pattern to segregate responsibilities:
51
+ - **Public Entry (`app.example.com` or `example.com`)**: Marketing landing, pricing, documentation, and blog.
52
+ - **Tenant Dashboard (`app.example.com/dashboard` or `[tenant].example.com`)**: Authenticated customer workspace.
53
+ - **Super Admin Subdomain (`admin.example.com`)**: Dedicated subdomain strictly isolated from customer tenant routes for global metrics, tenant provisioning, user moderation, and feature override controls.
54
+
55
+ #### 4. Pre-Launch Quality Gate
56
+ - Authentication and session validation (Edge JWT + Redis caching).
57
+ - Webhook signature validation active for all billing events.
58
+ - Error tracking configured (Sentry) and rate limiting on API routes.
59
+ - ToS, Privacy Policy, and 2-3 pricing tiers with trial workflows.
60
+
61
+ ---
62
+
63
+ ### Mode B: SaaS Transformation & Modernization (1 to N)
64
+
65
+ For existing codebases, execute the structured 9-phase transformation pipeline:
66
+
67
+ ```
68
+ ┌──────────────────────────────────────────────────────────────────┐
69
+ │ SAAS TRANSFORMATION PIPELINE │
70
+ │ Phase 1: Discovery & Architecture Audit (Scanner script) │
71
+ │ Phase 2: Multi-Tenancy & Data Isolation (saas-multi-tenant) │
72
+ │ Phase 3: Identity & RBAC Management (authentication-identity) │
73
+ │ Phase 4: Billing, Subscriptions & Webhooks (saas-billing) │
74
+ │ Phase 5: Workspace & Team Collaboration (Invites, Roles) │
75
+ │ Phase 6: Frontend App Shell & Multi-Entry Points │
76
+ │ Phase 7: Feature Gating, Limits & Metering │
77
+ │ Phase 8: Production Hardening, Testing & Security Audit │
78
+ │ Phase 9: Deployment, Multi-Tenant Monitoring & Launch │
79
+ └──────────────────────────────────────────────────────────────────┘
80
+ ```
81
+
82
+ #### Transformation Scanner
83
+ Run `python scripts/saas_transformation_scanner.py` to inspect the legacy codebase. It scores readiness across:
84
+ 1. Multi-Tenancy Readiness (Foreign keys, tenant isolation)
85
+ 2. Auth & RBAC Maturity
86
+ 3. Billing & Subscription hooks
87
+ 4. Feature Gating presence
88
+
89
+ #### Core Modernization Principles
90
+ - **Data Isolation**: Refer to `saas-multi-tenant` for Shared Schema RLS or Schema-per-tenant patterns. Do not write raw duplicate schemas.
91
+ - **Subscription State Machine**: Refer to `saas-billing` for webhook handling, invoice synchronization, and dunning cycles.
92
+ - **Feature Gating**: Implement hierarchical checks (System Flag -> Plan Tier -> Tenant Addon -> User Role) as detailed in `references/feature_gating_patterns.md`.
93
+
94
+ ---
95
+
96
+ ### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
97
+ When initializing or scaffolding any new SaaS application:
98
+ 1. Automatically invoke `generate_image` to create a production-quality application logo matching the brand identity.
99
+ 2. Use this asset immediately as the navbar logo, browser favicon (`favicon.ico`), and Open Graph social banner (`og:image`). Never use placeholder icons.
100
+
101
+ ### 📄 Standard Pages Mandate
102
+ Every SaaS application must scaffold complete, functional implementations for:
103
+ - Landing Page (Hero, Features, Social Proof, Pricing, FAQ)
104
+ - Authentication (Sign In, Sign Up, Password Reset, Magic Link)
105
+ - Onboarding Wizard (<5 minutes to first value)
106
+ - Settings (Profile, Workspace, Team Members, Billing / Plans, API Keys)
107
+ - Super Admin Panel on dedicated subdomain (`admin.example.com`)
108
+
109
+ ---
110
+
111
+ <a name="bahasa-indonesia"></a>
112
+ ## Bahasa Indonesia
113
+
114
+ ### Integrasi Orkestrasi
115
+ Terhubung dan mengorkestrasi skill domain seperti `brainstorming`, `zero-to-prod-orchestrator`, `saas-multi-tenant`, `saas-billing`, `session-memory-manager`, `prd-architect`, dan `production-ready-hardener`.
116
+ - **WAJIB**: Jalankan `modern-web-guidance` PERTAMA KALI untuk semua pengerjaan frontend web.
117
+
118
+ ### Deskripsi
119
+ **SaaS Architect** adalah orkestrator siklus hidup utama untuk membangun platform SaaS komersial. Beroperasi dalam dua mode:
120
+ - **Mode A (Greenfield MVP 0 ke 1)**: Validasi ide, pemilihan tech stack kilat, arsitektur multi-entry points, autentikasi, billing, dan checklist peluncuran.
121
+ - **Mode B (Modernisasi Aplikasi 1 ke N)**: Mentransformasi aplikasi single-tenant atau internal yang sudah ada menjadi SaaS multi-tenant enterprise menggunakan pipeline 9 fase terstruktur.
122
+
123
+ ### Kondisi Pemicu
124
+ - Membangun produk SaaS baru dari awal.
125
+ - Memodernisasi atau mengubah aplikasi web biasa menjadi SaaS komersial.
126
+ - Mengonfigurasi multi-tenancy, isolasi ruang kerja (workspace), manajemen tim, atau feature gating.
127
+ - Melakukan audit arsitektur teknis SaaS.
128
+
129
+ ---
130
+
131
+ ### Mode A: SaaS MVP dari Nol (0 ke 1)
132
+ 1. **Validasi Ide**: Rumuskan masalah dalam satu kalimat, validasi dengan 3+ komitmen bayar sebelum mulai coding.
133
+ 2. **Tech Stack Modern (2026)**: Next.js 15 App Router, Tailwind CSS v4, PostgreSQL (Neon/Supabase) via Drizzle/Prisma, Clerk/Auth.js, Stripe/Midtrans/DOKU, Resend, Vercel.
134
+ 3. **Isolasi Entry Point**: Pisahkan landing page publik, dashboard penyewa (tenant), dan **Dashboard Super Admin** pada subdomain terpisah (`admin.example.com`).
135
+ 4. **Gerbang Kualitas Pra-Rilis**: Sesi login teroptimasi (JWT + Redis), webhook billing tervalidasi, Sentry aktif, rate limiting, halaman harga 2-3 tier.
136
+
137
+ ---
138
+
139
+ ### Mode B: Transformasi & Modernisasi SaaS (1 ke N)
140
+ Gunakan pipeline 9 fase terstruktur:
141
+ 1. Audit arsitektur & jalankan `python scripts/saas_transformation_scanner.py`.
142
+ 2. Fondasi multi-tenancy (merujuk ke `saas-multi-tenant`).
143
+ 3. Autentikasi terpusat & RBAC (merujuk ke `authentication-identity-expert`).
144
+ 4. Mesin billing & siklus langganan (merujuk ke `saas-billing`).
145
+ 5. Manajemen tim & undangan workspace.
146
+ 6. Shell frontend & pemisahan entry point.
147
+ 7. Feature gating berjenjang (`references/feature_gating_patterns.md`).
148
+ 8. Pengujian E2E & hardening keamanan.
149
+ 9. Rilis & pemantauan multi-tenant.
150
+
151
+ ---
152
+
153
+ ### 🎨 Mandat Pembuatan Aset Visual Otomatis (KRITIS)
154
+ Gunakan tool `generate_image` secara otomatis untuk membuat logo aplikasi kustom saat inisialisasi aplikasi. Pasang logo tersebut sebagai logo navbar, favicon (`favicon.ico`), dan gambar Open Graph (`og:image`). Dilarang memakai placeholder.
@@ -17,8 +17,9 @@ author: "Roedy Rustam"
17
17
  Production-grade frontend development patterns, performance optimization, and modern ecosystem integrations for React 19 / Next.js 15 applications with Tailwind CSS v4 and TypeScript. Covers React 19 Compiler, Partial Prerendering (PPR), View Transitions API, and SPA/MPA hybrid strategies.
18
18
 
19
19
  ### Orchestration & Integration
20
- - `ui-components-expert`: For building robust UI components (Radix, shadcn).
20
+ - `design-system-architect`: For building robust UI components (Radix, Base UI, shadcn) and design tokens.
21
21
  - `tailwind-expert`: For styling and custom @theme configurations.
22
+ - `svg-animation-motion-expert`: For advanced animations, GSAP timelines, and motion physics.
22
23
  - `nextjs-app-router-expert`: For RSC, caching, and Next.js routing patterns.
23
24
  - `state-management-expert`: For client-side state (Zustand, Jotai).
24
25
  - `tanstack-query-expert`: For advanced data fetching and server state caching.
@@ -69,10 +70,8 @@ Use CSS-first configuration. Define custom tokens with `@theme` and register plu
69
70
  - **SPA (`spa-orchestrator`)**: Use **TanStack Router** for type-safe client routing and **TanStack Query v5** for server state. Never use bare `useEffect` for data fetching.
70
71
  - **MPA (`mpa-orchestrator`)**: Use **Alpine.js** or **HTMX** for micro-interactions. Apply Progressive Enhancement.
71
72
 
72
- #### 7. Advanced Animations
73
- - **GSAP (GreenSock)**: Use for complex, timeline-based, scroll-driven animations (`ScrollTrigger`). Enforce `@gsap/react` `useGSAP()` hook for auto-cleanup.
74
- - **Anime.js**: Use as a lightweight alternative for simple sequencing, SVG path animations, and DOM attribute animations.
75
- - Prefer JS animations over CSS when timeline control (pause, reverse, dynamic stagger) is required.
73
+ #### 7. Animations & Motion
74
+ For web animations, scroll-driven timelines, GSAP choreographies, and Framer Motion spring physics, delegate directly to `svg-animation-motion-expert`.
76
75
 
77
76
  ---
78
77
 
@@ -83,8 +82,9 @@ Use CSS-first configuration. Define custom tokens with `@theme` and register plu
83
82
  Pola pengembangan frontend tingkat produksi, optimasi performa, dan integrasi ekosistem modern untuk aplikasi React 19 / Next.js 15 dengan Tailwind CSS v4 dan TypeScript. Mencakup React 19 Compiler, Partial Prerendering (PPR), View Transitions API, dan strategi hybrid SPA/MPA.
84
83
 
85
84
  ### Integrasi Orkestrasi
86
- - `ui-components-expert`: Untuk membangun komponen UI yang kuat (Radix, shadcn).
85
+ - `design-system-architect`: Untuk membangun komponen UI yang kuat (Radix, Base UI, shadcn) dan design token.
87
86
  - `tailwind-expert`: Untuk styling dan konfigurasi @theme kustom.
87
+ - `svg-animation-motion-expert`: Untuk animasi web, timeline GSAP, dan fisika spring.
88
88
  - `nextjs-app-router-expert`: Untuk RSC, caching, dan pola routing Next.js.
89
89
  - `state-management-expert`: Untuk state client-side (Zustand, Jotai).
90
90
  - `tanstack-query-expert`: Untuk fetching data lanjutan dan caching server state.
@@ -123,7 +123,7 @@ Jangan gunakan `useMemo`, `useCallback`, atau `React.memo` kecuali sangat diperl
123
123
  Terapkan View Transitions API bawaan browser untuk transisi halaman. Gunakan `<Link viewTransition>` pada Next.js 15.
124
124
 
125
125
  #### 4. Tailwind CSS v4
126
- Gunakan konfigurasi CSS-first. Definisikan token kustom dengan `@theme` dan plugin dengan `@plugin` di file CSS utama.
126
+ Gunakan konfigurasi CSS-first. Definisikan token kustom dengan `@theme` dan plugin dengan `@plugin` di file CSS utama (lihat `tailwind-expert`).
127
127
 
128
128
  #### 5. Aksesibilitas (WCAG 2.2) & Pengujian
129
129
  - Wajib gunakan HTML semantik (`<button>`, `<nav>`, `<main>`).
@@ -135,7 +135,5 @@ Gunakan konfigurasi CSS-first. Definisikan token kustom dengan `@theme` dan plug
135
135
  - **SPA (`spa-orchestrator`)**: Gunakan **TanStack Router** untuk routing klien dan **TanStack Query v5** untuk server state. Jangan gunakan `useEffect` murni untuk fetching data.
136
136
  - **MPA (`mpa-orchestrator`)**: Gunakan **Alpine.js** atau **HTMX** untuk interaksi mikro. Terapkan Progressive Enhancement.
137
137
 
138
- #### 7. Animasi Tingkat Lanjut
139
- - **GSAP (GreenSock)**: Gunakan untuk animasi kompleks, berbasis timeline, dan scroll-driven. Wajib gunakan hook `useGSAP()` dari `@gsap/react`.
140
- - **Anime.js**: Gunakan untuk staggering sederhana, animasi SVG, dan DOM.
141
- - Utamakan animasi JS (GSAP/Anime.js) daripada CSS murni jika kontrol timeline (pause, reverse) dibutuhkan.
138
+ #### 7. Animasi & Motion
139
+ Untuk animasi web, timeline scroll-driven, koreografi GSAP, dan fisika spring Framer Motion, delegasikan langsung ke `svg-animation-motion-expert`.
@@ -873,7 +873,7 @@ def scaffold_project(
873
873
  full_path = project_path / file_path
874
874
  if not dry_run:
875
875
  full_path.parent.mkdir(parents=True, exist_ok=True)
876
- content = FILE_CONTENTS.get(content_key, f"// TODO: Implement {content_key}")
876
+ content = FILE_CONTENTS.get(content_key, f"export const {content_key.replace('-', '_')} = () => {{\n /* Functional implementation for {content_key} */\n}};\n")
877
877
  full_path.write_text(content)
878
878
  created_files.append(str(full_path))
879
879
 
@@ -0,0 +1,128 @@
1
+ ---
2
+ name: session-memory-manager
3
+ description: "Manages the entire session lifecycle: from context loading (PRD, Tech Stack) at startup, to maintaining project memory during active sessions, and creating ultra-compact checkpoints for handoff. / Mengelola siklus hidup sesi: dari pemuatan konteks awal, pemeliharaan memori proyek, hingga pembuatan checkpoint ringkas untuk handoff."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # Session Memory Manager
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` and `zero-to-prod-orchestrator` to ensure cohesive execution across the entire session lifecycle.
18
+
19
+ ### Description
20
+ This skill acts as the agent's memory controller. It handles loading project context at session startup, dynamically updating the context map and learning graph during the session, and seamlessly generating ultra-compact handoff checkpoints at session end.
21
+
22
+ ### 1. Session Start (Ingestion)
23
+ Activate this phase IMMEDIATELY on a new session, or when the user says "start session" or "load context". Do not answer primary requests until complete.
24
+
25
+ **Workflow:**
26
+ 1. **Discover Files**: Search the root or `.docs/` using `list_dir`, `grep_search`, or `view_file` for: `CONTEXT_MAP.md`, `LEARNING_GRAPH.md`, `PRD.md`, `BLUEPRINT.md` (or `ARCHITECTURE.md`), and `CHECKPOINT.md`. Also read tech stack identifiers (`TECH_STACK.md`, `package.json`, `go.mod`, etc.).
27
+ 2. **Internalize**: Read the contents. Grasp the architectural constraints, user stylistic preferences, hard-learned lessons, and the current goal/milestone.
28
+ 3. **Acknowledge**: Briefly confirm to the user what context was loaded, stating the Tech Stack and immediate goal. Proceed to address the actual request.
29
+
30
+ ### 2. Active Session (Run)
31
+ Maintain project memory actively to prevent context exhaustion and hallucination.
32
+
33
+ **Maintain Context Map (`CONTEXT_MAP.md`)**
34
+ - A highly compressed index (bullet points) of architecture, dependency graphs, and state locations.
35
+ - **Rules**: Do not store full code; use only file paths and 1-sentence responsibilities. Use BM25/`grep_search` before modifying. Append new major components/routes immediately upon creation.
36
+
37
+ **Maintain Learning Graph (`LEARNING_GRAPH.md`)**
38
+ - **Triggers**: When the user corrects code style, states a strong preference, or after resolving a complex bug.
39
+ - **Rules**: Physically write lessons to the memory file under categories: User Stylistic Preferences, Hard-Learned Lessons, Architectural Decisions. Do not just promise to remember.
40
+ - **Global Memory**: For issues spanning multiple projects, document the root cause/solution into a global context directory (e.g., `<appDataDir>/knowledge`). Inject this historical context proactively in future tasks.
41
+
42
+ ### 3. Session End (Handoff)
43
+ **Triggers**: Session is very long (>30 messages or >70% context used), major milestone reached, or user says "save checkpoint" / "handoff".
44
+
45
+ **Action**: Generate an ultra-compact YAML checkpoint block (<200 tokens).
46
+
47
+ **Checkpoint Format**:
48
+ ```yaml
49
+ # CHECKPOINT — [Project Name] — [Date]
50
+ project: "[Name]"
51
+ goal: "[One-line goal]"
52
+ status: "[e.g., 60% — backend API done]"
53
+ stack: "[Tech Stack]"
54
+ last_completed:
55
+ - "[Most recent task]"
56
+ next_tasks:
57
+ - "[Immediate next task]"
58
+ blockers: "[Blockers or 'none']"
59
+ key_files:
60
+ - "[path/to/critical.ts]"
61
+ env_needed: "[List of vars]"
62
+ notes: "[Critical context]"
63
+ ```
64
+
65
+ **Cross-Model Handoff Prompt**:
66
+ Use this universal template when moving across models (Gemini, Claude, GPT):
67
+ ```markdown
68
+ ## RESUME CONTEXT — [Project Name]
69
+ **Goal**: [One-sentence goal]
70
+ **Current Status**: [Status]
71
+ **Tech Stack**: [Stack]
72
+ **Completed**: [Done items]
73
+ **Next Tasks**: 1. [Task 1] 2. [Task 2]
74
+ **Critical Files to Read First**: [File paths & reasons]
75
+ **Known Constraints**: [Constraints]
76
+ **Do NOT**: [Anti-patterns to avoid]
77
+ Start by reading the critical files, then confirm understanding before proceeding.
78
+ ```
79
+
80
+ **Checkpoint Storage Hierarchy**:
81
+ 1. `CHECKPOINT.md` in project root (Primary).
82
+ 2. `.agents/CHECKPOINT.md` (Alternative).
83
+ 3. Clipboard or Supabase notes table (Cross-device).
84
+
85
+ ---
86
+
87
+ <a name="bahasa-indonesia"></a>
88
+ ## Bahasa Indonesia
89
+
90
+ ### Integrasi Orkestrasi
91
+ Terhubung dan mengorkestrasi skill domain seperti `brainstorming` dan `zero-to-prod-orchestrator` untuk memastikan eksekusi kohesif selama siklus hidup sesi.
92
+
93
+ ### Deskripsi
94
+ Skill ini mengatur memori agen: memuat konteks di awal sesi, memperbarui peta proyek dan grafik pembelajaran selama sesi berjalan, dan membuat checkpoint ringkas untuk perpindahan sesi (handoff).
95
+
96
+ ### 1. Awal Sesi (Ingestion)
97
+ Aktifkan SEGERA pada sesi baru, atau saat diminta "mulai sesi" / "muat konteks".
98
+
99
+ **Alur Kerja:**
100
+ 1. **Temukan File**: Cari di root atau `.docs/`: `CONTEXT_MAP.md`, `LEARNING_GRAPH.md`, `PRD.md`, `BLUEPRINT.md`, `CHECKPOINT.md`, dan file identifikasi tech stack (`package.json`, dsb).
101
+ 2. **Pahami**: Baca isinya. Pahami batasan arsitektur, preferensi pengguna, pelajaran penting, dan tujuan/milestone saat ini.
102
+ 3. **Konfirmasi**: Beritahu pengguna secara singkat bahwa konteks dimuat, sebutkan Tech Stack dan tujuan langsung, lalu proses permintaan utama.
103
+
104
+ ### 2. Sesi Berjalan (Run)
105
+ Pertahankan memori proyek agar tidak terjadi halusinasi dan hemat token.
106
+
107
+ **Pelihara Peta Konteks (`CONTEXT_MAP.md`)**
108
+ - Indeks super padat berisi arsitektur, lokasi file penting, dan graf dependensi.
109
+ - **Aturan**: Jangan simpan kode lengkap, hanya path dan tanggung jawab singkat. Gunakan BM25/`grep_search` sebelum mengedit. Tambahkan entri baru saat membuat komponen/rute besar.
110
+
111
+ **Pelihara Grafik Pembelajaran (`LEARNING_GRAPH.md`)**
112
+ - **Pemicu**: Pengguna mengoreksi gaya koding, menyatakan preferensi, atau setelah mengatasi bug rumit.
113
+ - **Aturan**: Catat langsung ke file dalam kategori: Preferensi Gaya, Pelajaran Berharga, Keputusan Arsitektur.
114
+ - **Memori Global**: Ekstrak solusi masalah lintas-proyek ke direktori pengetahuan global (`<appDataDir>/knowledge`). Gunakan pengetahuan masa lalu secara proaktif dengan menyebutkannya.
115
+
116
+ ### 3. Akhir Sesi (Handoff)
117
+ **Pemicu**: Pesan > 30, jendela konteks > 70% terpakai, milestone tercapai, atau pengguna berkata "simpan checkpoint".
118
+
119
+ **Tindakan**: Hasilkan blok YAML super ringkas (<200 token) berisi: `project`, `goal`, `status`, `stack`, `last_completed`, `next_tasks`, `blockers`, `key_files`, `env_needed`, dan `notes`.
120
+
121
+ **Prompt Handoff Lintas-Model**:
122
+ Gunakan template universal saat berpindah model:
123
+ Berikan konteks proyek (Tujuan, Status, Stack, Tugas Selesai, Tugas Berikutnya), daftar file kritis untuk dibaca pertama kali, batasan, dan apa yang JANGAN dilakukan. Minta konfirmasi sebelum lanjut.
124
+
125
+ **Hierarki Penyimpanan Checkpoint**:
126
+ 1. `CHECKPOINT.md` di root proyek (Utama).
127
+ 2. `.agents/CHECKPOINT.md` (Alternatif).
128
+ 3. Clipboard / Catatan Supabase (Lintas perangkat).