vibes-plug 1.0.0

package/skills/senior-fullstack/SKILL.md

@@ -0,0 +1,167 @@
+---
+name: senior-fullstack
+description: "Complete toolkit for senior fullstack with modern tools and best practices / Perangkat instruksi lengkap untuk pengembang fullstack tingkat senior dengan alat-alat dan best practices termutakhir."
+author: "Roedy Rustam"
+---
+
+# Senior Fullstack Developer (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Complete guidelines for senior fullstack developers building production-grade applications in 2026. Covers the modern AI-native stack, architecture decision-making, API design, frontend/backend integration, and team-level best practices.
+
+### Trigger Conditions
+- Making fullstack architecture decisions across frontend and backend.
+- Designing API contracts between React 19/Next.js 15 frontend and Node.js/Go/Python backend.
+- Integrating AI features (LLM, agents, RAG) into a fullstack application.
+- Setting up a monorepo with shared types between frontend and backend.
+- Reviewing and improving overall application architecture and code quality.
+
+### Modern 2026 Fullstack Stack
+
+#### Recommended Stacks by Use Case
+
+| Use Case | Frontend | Backend | Database | AI Layer |
+|---|---|---|---|---|
+| **SaaS App (default)** | Next.js 15 (App Router) | Hono / Fastify 5 | Postgres + Drizzle | Vercel AI SDK 5.x |
+| **AI-First App** | Next.js 15 + RSC streaming | Mastra.ai / LangGraph | pgvector + Supabase | Anthropic / OpenAI |
+| **Decoupled SPA** | TanStack Start + React 19 | Hono RPC | Postgres + Drizzle | Vercel AI SDK |
+| **Content Site** | Astro 5 + MDX | N/A (static) | Sanity / Contentful | — |
+| **Mobile** | Expo SDK 53 + React Native 0.79 | Hono / Fastify | SQLite (Expo) + Postgres | Vercel AI SDK |
+
+#### AI-Native Fullstack Patterns
+In 2026, AI is a first-class citizen in fullstack applications:
+- **Streaming AI Responses**: Use Next.js RSC + Vercel AI SDK `streamUI` to stream LLM responses as React components from the server.
+- **Server Actions as AI Triggers**: Use React 19 `useActionState` with Server Actions to invoke LLM calls without an API layer.
+- **Background AI Jobs**: Offload long LLM tasks to BullMQ + Redis workers; stream results via WebSockets or SSE.
+- **Structured AI Output**: Always use `zodResponseFormat` or Pydantic schemas for LLM responses — never parse free-form JSON.
+
+### API Design Principles (2026)
+
+#### Type-Safe Communication
+Choose one approach and be consistent:
+- **Hono RPC**: If backend is Hono — zero codegen, end-to-end types.
+- **tRPC**: If using React Query with Next.js — excellent DX with RSC support.
+- **OpenAPI + codegen**: If you have multiple consumers (mobile, third parties).
+
+#### API Versioning
+- Use URL versioning: `/api/v1/users`.
+- Pin major version in URL, minor versions are backward-compatible.
+- Deprecate with `Deprecation` and `Sunset` headers.
+
+#### Error Response Standard (RFC 9457 Problem Details)
+```typescript
+// Consistent error format across all endpoints
+interface ProblemDetail {
+  type: string;       // URI identifying the error type
+  title: string;      // Human-readable summary
+  status: number;     // HTTP status code
+  detail: string;     // Specific explanation
+  instance?: string;  // URI of the specific occurrence
+}
+```
+
+### SPA vs SSR vs Static — Decision Guide
+```
+SEO-critical + mostly read? → Next.js SSR / Astro 5 (static)
+Highly interactive dashboard? → SPA (TanStack Start / Vite + TanStack Router)
+   → see spa-orchestrator skill for architecture details
+Mixed (marketing + app)?    → Next.js 15 with hybrid routing
+Real-time data?             → SSR + WebSocket or SSE streaming
+```
+
+### Monorepo with Shared Types
+```typescript
+// packages/types/src/index.ts — single source of truth
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  plan: 'free' | 'pro' | 'enterprise';
+  isSuperAdmin: boolean;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  meta?: { page: number; total: number };
+}
+
+// apps/api — uses the type
+// apps/web — uses the same type
+// apps/admin — uses the same type
+import type { User } from '@myapp/types';
+```
+
+### Security Checklist (Fullstack)
+- [ ] All user inputs validated with Zod on the server (never trust the client).
+- [ ] JWT secrets rotated every 90 days; use short expiry + refresh tokens.
+- [ ] CSP headers configured (no `unsafe-inline` in production).
+- [ ] All DB queries use parameterized queries — no string concatenation.
+- [ ] File uploads validated for MIME type and scanned before storage.
+- [ ] Rate limiting on all public API endpoints.
+- [ ] Super Admin routes restricted to `admin.domain.com` with `isSuperAdmin` check.
+
+### Code Review Standards
+- Functions < 30 lines; files < 300 lines.
+- No business logic in UI components.
+- Every PR includes relevant tests (unit or E2E).
+- No `any` types in TypeScript production code.
+- Dependencies audited with `pnpm audit` on every PR.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan lengkap untuk pengembang fullstack senior yang membangun aplikasi tingkat produksi di 2026. Mencakup stack AI-native modern, pengambilan keputusan arsitektur, desain API, integrasi frontend/backend, dan best practices tingkat tim.
+
+### Kondisi Pemicu
+- Membuat keputusan arsitektur fullstack di frontend dan backend.
+- Merancang kontrak API antara frontend React 19/Next.js 15 dan backend Node.js/Go/Python.
+- Mengintegrasikan fitur AI (LLM, agen, RAG) ke dalam aplikasi fullstack.
+- Menyiapkan monorepo dengan shared types antara frontend dan backend.
+- Meninjau dan meningkatkan arsitektur dan kualitas kode aplikasi secara keseluruhan.
+
+### Stack Fullstack Modern 2026
+
+Rekomendasi stack berdasarkan use case:
+- **SaaS App**: Next.js 15 + Hono/Fastify + Postgres + Drizzle + Vercel AI SDK.
+- **AI-First App**: Next.js 15 RSC streaming + Mastra.ai/LangGraph + pgvector.
+- **SPA Terpisah**: TanStack Start + Hono RPC + Postgres — lihat `spa-orchestrator`.
+- **Situs Konten**: Astro 5 + MDX.
+- **Mobile**: Expo SDK 53 + Hono + SQLite.
+
+### Pola Fullstack AI-Native (2026)
+AI adalah warga kelas satu di aplikasi fullstack 2026:
+- **Streaming RSC**: Alirkan respons LLM sebagai komponen React dari server menggunakan `streamUI` Vercel AI SDK 5.x.
+- **Server Actions sebagai Pemicu AI**: Panggil LLM dari Server Actions React 19 tanpa lapisan API terpisah.
+- **Background AI Jobs**: Offload tugas LLM panjang ke BullMQ + Redis; stream hasil via WebSocket atau SSE.
+- **Output AI Terstruktur**: Selalu gunakan `zodResponseFormat` atau skema Pydantic — jangan pernah parse JSON bebas dari LLM.
+
+### Prinsip Desain API (2026)
+- **Hono RPC**: Zero codegen, end-to-end type-safe jika backend adalah Hono.
+- **tRPC**: Untuk React Query + Next.js dengan dukungan RSC.
+- **OpenAPI + codegen**: Jika memiliki banyak konsumen (mobile, pihak ketiga).
+- **Format Error RFC 9457**: Respons error yang konsisten dengan `type`, `title`, `status`, `detail`.
+
+### SPA vs SSR vs Static
+Gunakan SSR/Astro untuk situs kritis SEO dan banyak baca. Gunakan SPA (TanStack Start) untuk dashboard yang sangat interaktif. Gunakan Next.js 15 dengan routing hybrid untuk aplikasi campuran (marketing + app).
+
+### Monorepo dengan Shared Types
+Definisikan interface dan tipe bersama di `packages/types` — digunakan oleh semua app (web, admin, api, mobile) sebagai single source of truth.
+
+### Checklist Keamanan
+- Input pengguna divalidasi Zod di server.
+- JWT rotasi 90 hari; expiry pendek + refresh token.
+- Header CSP dikonfigurasi.
+- Semua query DB menggunakan parameterized query.
+- Upload file divalidasi MIME type.
+- Rate limiting di semua endpoint publik.
+- Rute Super Admin dibatasi di `admin.domain.com` dengan cek `isSuperAdmin`.

package/skills/senior-fullstack/references/architecture_patterns.md

@@ -0,0 +1,160 @@
+# Architecture Patterns
+
+## Overview
+This reference guide details high-performance architecture patterns for senior fullstack systems. It covers multi-tier caching (Redis), relational database partitioning, and resilient event-driven background queues.
+
+---
+
+## Production Architecture Designs
+
+### 1. Multi-Tier Caching Layer (Redis + Memory)
+
+For write-heavy/read-intensive endpoints (e.g., public API stats or product catalogs), hitting the relational database directly is a major bottleneck. Implement a Cache-Aside pattern using memory-first or Redis structures.
+
+#### Pattern: Type-Safe Cache-Aside Implementation (`lib/cache/redis.ts`)
+
+```typescript
+import { Redis } from '@upstash/redis'; // or ioredis
+
+export const redis = new Redis({
+  url: process.env.UPSTASH_REDIS_REST_URL!,
+  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
+});
+
+interface CacheOptions {
+  ttlSeconds?: number;
+}
+
+export async function getOrSetCache<T>(
+  key: string,
+  fetchFn: () => Promise<T>,
+  options: CacheOptions = {}
+): Promise<T> {
+  const ttl = options.ttlSeconds ?? 3600; // Default: 1 hour
+
+  try {
+    // Attempt cache read
+    const cachedData = await redis.get<string>(key);
+    if (cachedData) {
+      return typeof cachedData === 'string' ? JSON.parse(cachedData) : cachedData;
+    }
+  } catch (err) {
+    console.error(`⚠️ Redis read failed for key ${key}:`, err);
+  }
+
+  // Cache miss - execute database hit
+  const freshData = await fetchFn();
+
+  try {
+    // Populate cache asynchronously
+    await redis.set(key, JSON.stringify(freshData), { ex: ttl });
+  } catch (err) {
+    console.error(`⚠️ Redis write failed for key ${key}:`, err);
+  }
+
+  return freshData;
+}
+```
+
+---
+
+### 2. High-Performance Indexing and Query Tuning
+
+Poor database performance is almost always caused by missing indexes on fields targeted by `WHERE` and `JOIN` clauses. Use standard PostgreSQL compound indexes and profile execution paths.
+
+#### Pattern: Compound & Partial Indexing (`prisma/schema.prisma` or pure SQL)
+
+```prisma
+// Example Prisma compound index optimized for scoped tenant querying
+model Invoice {
+  id          String   @id @default(cuid())
+  tenantId    String
+  status      String   // PAID, UNPAID, OVERDUE
+  amount      Float
+  createdAt   DateTime @default(now())
+
+  // Optimize compound filters: WHERE tenantId = X AND status = Y ORDER BY createdAt DESC
+  @@index([tenantId, status, createdAt(sort: Desc)])
+}
+```
+
+#### Profiling Queries with PostgreSQL `EXPLAIN ANALYZE`
+
+Run the following SQL diagnostic query inside your migration console to detect costly Sequential Scans (Seq Scan):
+
+```sql
+EXPLAIN ANALYZE 
+SELECT * FROM "Invoice" 
+WHERE "tenantId" = 'tenant_123' 
+  AND "status" = 'PAID' 
+ORDER BY "createdAt" DESC;
+```
+
+*Look for:* `Index Scan using Invoice_tenantId_status_createdAt_idx` indicating the optimizer is executing query lookup paths with O(log N) complexity instead of O(N).
+
+---
+
+### 3. Resilient Webhooks & Resilient Background Workers
+
+Handling computationally heavy tasks (e.g., PDF generation, batch emails, image processing) in the standard request/response HTTP loop leads to poor UI performance and timeout failures. Decouple execution paths with background job queues (e.g., BullMQ, Inngest, or Celery).
+
+#### Pattern: Event-Driven Queue Producer (`lib/queue/jobs.ts`)
+
+```typescript
+import { Queue } from 'bullmq';
+import IORedis from 'ioredis';
+
+const connection = new IORedis(process.env.REDIS_URL!);
+
+// 1. Establish the queue
+export const emailQueue = new Queue('EmailQueue', { connection });
+
+export async function queueWelcomeEmail(userId: string, email: string) {
+  await emailQueue.add(
+    'send_welcome',
+    { userId, email },
+    {
+      attempts: 5, // High retry resilience
+      backoff: {
+        type: 'exponential',
+        delay: 5000, // Exponential backoff starting at 5s
+      },
+    }
+  );
+}
+```
+
+#### Pattern: Decoupled Queue Worker (`workers/email.ts`)
+
+```typescript
+import { Worker, Job } from 'bullmq';
+import IORedis from 'ioredis';
+import { sendWelcomeEmail } from '@/lib/email';
+
+const connection = new IORedis(process.env.REDIS_URL!);
+
+// Decoupled consumer execution running in a separate thread/container
+const emailWorker = new Worker(
+  'EmailQueue',
+  async (job: Job) => {
+    if (job.name === 'send_welcome') {
+      const { email, userId } = job.data;
+      await sendWelcomeEmail(email, userId);
+    }
+  },
+  { connection, concurrency: 10 }
+);
+
+emailWorker.on('completed', (job) => {
+  console.log(`✅ Job ${job.id} completed successfully`);
+});
+
+emailWorker.on('failed', (job, err) => {
+  console.error(`❌ Job ${job?.id} failed:`, err);
+});
+```
+
+---
+
+## Technical Summary
+Decoupling application layers using structured micro-tier architectures—caching, indexes, and background workers—prevents cascading performance issues, guarantees high availability, and maintains scalable SaaS responses.

package/skills/senior-fullstack/references/development_workflows.md

@@ -0,0 +1,222 @@
+# Development Workflows
+
+## Overview
+This reference guide details production-grade development workflows, automated testing matrices, and CI/CD pipelines for senior fullstack applications.
+
+---
+
+## Production Workflows & Pipelines
+
+### 1. High-Fidelity Test Matrix (Vitest & Playwright)
+
+Senior fullstack projects must enforce a multi-tiered test strategy:
+1. **Unit Testing**: Instant feedback cycles using Vitest or Jest for pure logic and schema validations.
+2. **End-to-End (E2E) Testing**: High-fidelity customer flow validations using Playwright.
+
+#### Pattern: Vitest Schema Validator Unit Test (`__tests__/signup.test.ts`)
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { SignupSchema } from '../lib/validators/auth';
+
+describe('Signup Schema Validation', () => {
+  it('should pass on complete, valid payload', () => {
+    const payload = {
+      email: 'test@example.com',
+      password: 'password123',
+      name: 'Jane Doe',
+    };
+    const result = SignupSchema.safeParse(payload);
+    expect(result.success).toBe(true);
+  });
+
+  it('should reject passwords shorter than 8 characters', () => {
+    const payload = {
+      email: 'test@example.com',
+      password: 'short',
+    };
+    const result = SignupSchema.safeParse(payload);
+    expect(result.success).toBe(false);
+  });
+});
+```
+
+#### Pattern: Playwright Multi-Role Customer E2E Flow (`e2e/onboarding.spec.ts`)
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Customer Workspace Onboarding', () => {
+  test('should allow authenticated customer to create a workspace and view dashboard', async ({ page }) => {
+    // 1. Visit landing page
+    await page.goto('/sign-in');
+
+    // 2. Perform mock login or enter user credentials
+    await page.fill('input[type="email"]', 'jane@company.com');
+    await page.fill('input[type="password"]', 'janePassword123');
+    await page.click('button[type="submit"]');
+
+    // 3. Confirm redirected to dashboard onboarding step
+    await expect(page).toHaveURL(/.*dashboard/);
+    await expect(page.locator('h1')).toContainText('Create Your Workspace');
+
+    // 4. Submit form
+    await page.fill('input[name="name"]', 'Jane Ventures');
+    await page.fill('input[name="slug"]', 'jane-ventures');
+    await page.click('button[type="submit"]');
+
+    // 5. Verify success state and layout rendering
+    await expect(page.locator('main')).toContainText('Jane Ventures');
+  });
+});
+```
+
+---
+
+### 2. Automated CI/CD Pipelines (GitHub Actions)
+
+Establish automated quality gates on every Pull Request to verify build integrity, linter standards, and security vulnerability profiles.
+
+#### Pattern: GitHub Actions Workflow (`.github/workflows/ci.yml`)
+
+```yaml
+name: Continuous Integration
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: postgres:15
+        env:
+          POSTGRES_USER: test_user
+          POSTGRES_PASSWORD: test_password
+          POSTGRES_DB: test_db
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: Checkout Source Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Verify Linter & Formatters
+        run: |
+          npm run lint
+          npm run format:check
+
+      - name: Run Database Migrations
+        env:
+          DATABASE_URL: postgresql://test_user:test_password@localhost:5432/test_db
+        run: npx prisma migrate deploy # or npx drizzle-kit migrate
+
+      - name: Execute Vitest Unit Suite
+        env:
+          DATABASE_URL: postgresql://test_user:test_password@localhost:5432/test_db
+        run: npm run test:unit
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Execute E2E Integration Suite
+        env:
+          DATABASE_URL: postgresql://test_user:test_password@localhost:5432/test_db
+        run: npm run test:e2e
+
+      - name: Validate Production Build
+        run: npm run build
+```
+
+---
+
+### 3. Containerized Local Environments (Docker & Compose)
+
+To guarantee absolute environment consistency between developer workstations and staging/production clouds, define lightweight multi-container environments.
+
+#### Pattern: Production-Grade Multi-Stage Dockerfile (`Dockerfile`)
+
+```dockerfile
+# --- Stage 1: Build Workspace ---
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# --- Stage 2: Minimalist Production Runner ---
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+
+EXPOSE 3000
+CMD ["npm", "run", "start"]
+```
+
+#### Pattern: Docker Compose Stack (`docker-compose.yml`)
+
+```yaml
+version: '3.8'
+
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - DATABASE_URL=postgresql://app_user:app_password@db:5432/app_db
+      - REDIS_URL=redis://redis:6379
+    depends_on:
+      - db
+      - redis
+
+  db:
+    image: postgres:15
+    environment:
+      POSTGRES_USER: app_user
+      POSTGRES_PASSWORD: app_password
+      POSTGRES_DB: app_db
+    ports:
+      - "5432:5432"
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+
+  redis:
+    image: redis:7-alpine
+    ports:
+      - "6379:6379"
+
+volumes:
+  pgdata:
+```
+
+---
+
+## Conclusion
+Setting up rigorous CI/CD gates, high-fidelity testing metrics, and matching container local stacks completely eliminates "works on my machine" failures and keeps server releases highly stable.