vibes-plug 1.0.0

package/skills/mpa-orchestrator/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: mpa-orchestrator
+description: "Orchestrates Multi-Page Application (MPA) architecture within a single repository, integrating with relevant skills / Mengorkestrasi arsitektur Multi-Page Application (MPA) dalam satu repositori, terintegrasi dengan skill relevan lainnya."
+author: "Antigravity"
+---
+
+# Multi-Page Application (MPA) Orchestrator (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A structured approach for building and orchestrating Multi-Page Application (MPA) architectures within a single repository. Acts as an orchestrator connecting MPA principles with specialized skills (like `mvc-expert`, `saas-multi-tenant`, `senior-frontend`) to deliver cohesive, server-rendered applications. In 2026, MPAs are increasingly built with **Astro 5** for content-heavy sites or **traditional server frameworks** (Laravel, Django, Go) augmented with **HTMX 2** or **Alpine.js** for interactivity.
+
+### Core MPA Principles in a Single Repository
+1. **Centralized Architecture**: Frontend views, backend logic, and routing in a unified codebase — simplifies deployment and reduces cognitive load.
+2. **Server-Side Routing & Rendering**: A Front Controller intercepts requests, fetches data, and renders complete HTML per route. Options in 2026:
+   - **Astro 5**: Best for content-heavy sites — renders to static HTML by default, hydrates islands on demand.
+   - **Next.js 15 (Pages Router)**: Traditional MPA feel with React components.
+   - **Backend-driven**: Laravel/Django/Gin templates rendered server-side.
+3. **Islands Architecture (Astro 5)**:
+   - Render 100% static HTML for non-interactive content.
+   - Use `client:load`, `client:idle`, or `client:visible` directives to hydrate interactive islands only when needed.
+   - Supports React, Vue, Svelte, Solid, or vanilla JS islands side by side.
+4. **HTMX 2 — HTML-First Interactivity**:
+   - Enhance any server-rendered page with partial HTML swaps without writing JavaScript.
+   - Works with any backend — Django, Laravel, Go, Node.js.
+   - `hx-get`, `hx-post`, `hx-target`, `hx-swap` for declarative AJAX.
+5. **Shared UI Ecosystem**:
+   - Maintain a `layouts/` directory for base HTML structures.
+   - Maintain a `components/` directory for reusable UI elements.
+6. **Asset Management**: Centralize static assets in `public/`. Implement cache-busting for production.
+7. **Session-based State**: Use secure HTTP-only cookies and server sessions for auth, tenant context, and flash messages.
+
+### Framework Selection Guide
+
+| Need | Recommended Stack |
+|---|---|
+| Content site / Blog / Docs | **Astro 5** + MDX + Tailwind v4 |
+| Full server-rendered app (PHP) | **Laravel 11** + Livewire 3 / Alpine.js |
+| Full server-rendered app (Python) | **Django 5** + HTMX 2 + Alpine.js |
+| Full server-rendered app (Go) | **Templ** + HTMX 2 + Tailwind v4 |
+| React MPA with SSR | **Next.js 15** Pages Router or App Router |
+
+### Orchestration Guidelines
+- **With `mvc-expert`**: Enforce MVC pattern — Controllers handle logic, Views handle rendering.
+- **With `saas-multi-tenant`**: Integrate tenant identification in core routing middleware — every page load initializes `tenant_id` context securely.
+- **With `senior-frontend` / `ui-ux-pro-max`**: Enhance with Alpine.js for reactive UI or HTMX 2 for HTML-driven partial updates — no heavy client-side bundles.
+- **With `seo`**: Maximize MPA's inherent SEO advantages — every page returns fully populated HTML, correct meta tags, and Schema.org JSON-LD on initial load.
+- **vs `spa-orchestrator`**: Choose MPA when SEO is critical, data is mostly read-heavy, and complex client-side state is not required. Choose SPA when the app is highly interactive and session-based (like dashboards).
+
+### Trigger Conditions
+- Building a web application using the Multi-Page Application (MPA) approach in a single repository.
+- Refactoring or migrating an existing app to a centralized MPA architecture.
+- Building content sites, marketing pages, or SEO-critical applications.
+- Using Astro 5 for static or content-heavy sites with optional interactive islands.
+- Adding interactivity to server-rendered pages with HTMX 2 without a full SPA rewrite.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page Application (MPA) di dalam satu repositori. Bertindak sebagai orkestrator yang menghubungkan prinsip MPA dengan skill spesialis lain untuk menghasilkan aplikasi server-rendered yang kohesif dan modern. Di 2026, MPA semakin banyak dibangun dengan **Astro 5** untuk situs konten-berat atau framework server tradisional yang diperkuat dengan **HTMX 2** atau **Alpine.js**.
+
+### Prinsip Inti MPA
+1. **Arsitektur Terpusat**: View frontend, logika backend, dan routing dalam satu codebase.
+2. **Routing & Rendering Sisi Server**: Front Controller menangkap permintaan, mengambil data, dan me-render HTML lengkap per rute.
+3. **Islands Architecture (Astro 5)**: Render HTML statis 100% secara default, hidrate island interaktif hanya saat diperlukan.
+4. **HTMX 2 — Interaktivitas HTML-First**: Tingkatkan halaman server-rendered dengan pertukaran HTML parsial tanpa menulis JavaScript.
+5. **Ekosistem UI Bersama**: Direktori `layouts/` dan `components/` untuk elemen UI yang dapat digunakan kembali.
+6. **State Berbasis Session**: Cookie HTTP-only dan session sisi server untuk autentikasi dan konteks tenant.
+
+### Panduan Pemilihan Framework
+
+| Kebutuhan | Stack yang Direkomendasikan |
+|---|---|
+| Situs konten / Blog / Docs | **Astro 5** + MDX + Tailwind v4 |
+| Aplikasi server-rendered (PHP) | **Laravel 11** + Livewire 3 / Alpine.js |
+| Aplikasi server-rendered (Python) | **Django 5** + HTMX 2 + Alpine.js |
+| Aplikasi server-rendered (Go) | **Templ** + HTMX 2 + Tailwind v4 |
+| React MPA dengan SSR | **Next.js 15** Pages Router atau App Router |
+
+### Panduan Orkestrasi
+- **Dengan `mvc-expert`**: Pastikan MPA mengikuti pola MVC secara ketat.
+- **Dengan `saas-multi-tenant`**: Integrasikan identifikasi tenant di middleware routing inti.
+- **Dengan `senior-frontend` / `ui-ux-pro-max`**: Tingkatkan dengan Alpine.js atau HTMX 2 untuk interaksi tanpa bundle berat.
+- **Dengan `seo`**: Setiap halaman mengembalikan HTML penuh, tag meta, dan JSON-LD terisi saat load awal.
+- **vs `spa-orchestrator`**: Pilih MPA saat SEO kritis dan data kebanyakan read-heavy. Pilih SPA saat aplikasi sangat interaktif seperti dashboard.
+
+### Kondisi Pemicu
+- Membangun aplikasi web dengan pendekatan MPA dalam satu repositori.
+- Refaktor atau migrasi aplikasi yang ada ke arsitektur MPA terpusat.
+- Membangun situs konten, halaman marketing, atau aplikasi kritis SEO.
+- Menggunakan Astro 5 untuk situs statis atau konten-berat dengan island interaktif opsional.
+- Menambahkan interaktivitas ke halaman server-rendered dengan HTMX 2 tanpa menulis ulang ke SPA.

package/skills/multi-agent-orchestration/SKILL.md

@@ -0,0 +1,234 @@
+---
+name: multi-agent-orchestration
+description: "Expert guide for designing and orchestrating multi-agent systems, agent swarms, graph-based workflows (LangGraph, CrewAI, AutoGen), shared state memory, and human-in-the-loop guardrails in English and Indonesian."
+author: "Roedy Rustam"
+---
+
+# Multi-Agent Orchestration Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for designing, building, and deploying production-grade multi-agent AI systems. Covers agent orchestration frameworks (LangGraph, OpenAI Agents SDK, Google ADK, Mastra.ai, CrewAI, AutoGen), shared state and memory management, tool execution, human-in-the-loop (HITL) guardrails, and observability for agentic workflows.
+
+**Swarm Synergy:** This skill acts as a powerful orchestrator when combined with `mcp-server-architect` (for external tool integration) and `ai-llm-integration-expert` (for foundation model setup). Together, they form a complete, end-to-end **AI Engineering Swarm**.
+
+### Trigger Conditions
+- Building autonomous AI agents that execute multi-step tasks.
+- Designing systems where multiple specialized AI agents collaborate.
+- Implementing graph-based agent workflows with LangGraph or similar frameworks.
+- Integrating human-in-the-loop checkpoints for high-stakes decisions.
+- Building AI pipelines with tool-calling, RAG retrieval, code execution, or browser control.
+- Evaluating and selecting agent frameworks (LangGraph vs OpenAI Agents SDK vs Google ADK).
+
+### Agent Framework Comparison (2026)
+
+| Framework | Language | Best For | Key Differentiator |
+|---|---|---|---|
+| **LangGraph** | Python / TypeScript | Complex stateful workflows | Graph-based, any LLM, full control |
+| **OpenAI Agents SDK** | Python | GPT-5 native agents | Built-in handoffs, tracing, guardrails |
+| **Google ADK** | Python | Gemini-powered agents | Multi-agent, Vertex AI, streaming |
+| **Mastra.ai** | TypeScript | TS-first agent apps | Built-in memory, evals, RAG, MCP |
+| **CrewAI** | Python | Team-of-agents tasks | Role-based agents, easy to start |
+| **AutoGen** | Python | Research & LLM evaluation | Conversation-driven agents |
+
+### Core Architecture Principles
+
+#### 1. Agent Roles & Specialization
+Design agents with single responsibilities — avoid "do-everything" agents:
+- **Orchestrator Agent**: Routes tasks, decomposes goals, delegates to specialists.
+- **Specialist Agents**: Domain-specific (research agent, code agent, data analyst, writer).
+- **Tool Agents**: Wrap external capabilities (browser agent, SQL agent, file agent).
+- **Critic/Validator Agent**: Reviews output of other agents before finalizing.
+
+#### 2. LangGraph — Stateful Graph Workflows
+LangGraph models agent workflows as directed graphs with persistent state — ideal for complex, multi-step tasks with branching logic and HITL:
+```python
+from langgraph.graph import StateGraph, END
+from langgraph.checkpoint.memory import MemorySaver
+from typing import TypedDict, Annotated
+import operator
+
+class AgentState(TypedDict):
+    messages: Annotated[list, operator.add]
+    task: str
+    result: str
+
+def research_node(state: AgentState):
+    # Call research agent
+    return {"messages": [research_agent.invoke(state["task"])]}
+
+def write_node(state: AgentState):
+    # Call writing agent with research result
+    return {"result": writing_agent.invoke(state["messages"])}
+
+def should_revise(state: AgentState) -> str:
+    # Conditional routing
+    return "revise" if needs_revision(state["result"]) else "end"
+
+builder = StateGraph(AgentState)
+builder.add_node("research", research_node)
+builder.add_node("write", write_node)
+builder.add_conditional_edges("write", should_revise, {"revise": "research", "end": END})
+
+# Persist state for HITL
+memory = MemorySaver()
+graph = builder.compile(checkpointer=memory, interrupt_before=["write"])
+```
+
+#### 3. OpenAI Agents SDK — Handoffs & Guardrails
+Use the OpenAI Agents SDK for native GPT-5 agent workflows with built-in tracing:
+```python
+from agents import Agent, Runner, handoff, input_guardrail, GuardrailFunctionOutput
+
+# Define specialist agents
+researcher = Agent(
+    name="Researcher",
+    instructions="Search and retrieve relevant information.",
+    tools=[web_search, document_retrieval],
+)
+
+writer = Agent(
+    name="Writer",
+    instructions="Write high-quality content based on research.",
+    handoffs=[handoff(researcher, tool_name_override="get_research")],
+)
+
+# Input guardrail to prevent harmful requests
+@input_guardrail
+async def content_filter(ctx, agent, input) -> GuardrailFunctionOutput:
+    if contains_harmful_content(input):
+        return GuardrailFunctionOutput(output_info="Blocked", tripwire_triggered=True)
+    return GuardrailFunctionOutput(output_info="OK", tripwire_triggered=False)
+
+# Run with tracing
+result = await Runner.run(writer, "Write an article about...", guardrails=[content_filter])
+```
+
+#### 4. Google ADK — Gemini Multi-Agent
+Google Agent Development Kit (ADK) for building Gemini-powered agents with Vertex AI integration:
+```python
+from google.adk.agents import Agent
+from google.adk.tools import google_search, code_execution
+
+root_agent = Agent(
+    model="gemini-2.5-pro",
+    name="orchestrator",
+    instruction="Coordinate research and analysis tasks.",
+    sub_agents=[research_agent, analysis_agent],
+    tools=[google_search, code_execution],
+)
+```
+
+#### 5. Mastra.ai — TypeScript-First Agents
+For TypeScript teams, Mastra provides the most complete agentic framework:
+```typescript
+import { Agent, MastraMemory } from '@mastra/core';
+import { createTool } from '@mastra/core/tools';
+
+const webSearchTool = createTool({
+  id: 'web-search',
+  description: 'Search the web for current information',
+  inputSchema: z.object({ query: z.string() }),
+  execute: async ({ context: { query } }) => searchWeb(query),
+});
+
+const researchAgent = new Agent({
+  name: 'researcher',
+  instructions: 'Find and summarize information accurately.',
+  model: { provider: 'ANTHROPIC', name: 'claude-sonnet-4-5' },
+  tools: { webSearch: webSearchTool },
+  memory: new MastraMemory({ storage: supabaseStorage }),
+});
+```
+
+#### 6. Human-in-the-Loop (HITL) Guardrails
+Mandatory for high-stakes agent actions (financial transactions, email sending, code deployment):
+- **Interrupt Checkpoints**: Pause graph execution before irreversible actions.
+- **Approval Flows**: Send pending action to a UI for human review before continuing.
+- **Confidence Thresholds**: Auto-approve if confidence > 90%, escalate if < 70%.
+
+#### 7. Agent Memory Architecture
+- **Working Memory (In-context)**: Recent messages and task state in the prompt window.
+- **Episodic Memory**: Summarized past sessions stored as embeddings (Mem0, MemGPT).
+- **Semantic Memory**: Domain knowledge in a vector store (pgvector, Qdrant).
+- **Procedural Memory**: Learned tool-use patterns stored as structured data.
+
+#### 8. Observability & Evaluation
+- **LangSmith**: Native tracing for LangGraph, LangChain agents.
+- **OpenAI Tracing**: Built-in in OpenAI Agents SDK — view agent runs, handoffs, tool calls.
+- **Mastra Evals**: Built-in evaluation framework for Mastra agents.
+- **Custom Metrics**: Track task completion rate, tool call accuracy, latency, and cost per run.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk merancang, membangun, dan men-deploy sistem multi-agen AI tingkat produksi. Mencakup framework orkestrasi agen (LangGraph, OpenAI Agents SDK, Google ADK, Mastra.ai), manajemen state dan memori bersama, eksekusi tool, guardrail human-in-the-loop (HITL), dan observabilitas untuk alur kerja agentik.
+
+**Sinergi Swarm:** Skill ini bertindak sebagai orkestrator yang sangat *powerful* jika dikombinasikan dengan `mcp-server-architect` (untuk integrasi eksternal tool) dan `ai-llm-integration-expert` (untuk penyiapan foundation model). Bersama-sama, ketiganya membentuk **AI Engineering Swarm** yang komprehensif dari ujung ke ujung.
+
+### Kondisi Pemicu
+- Membangun agen AI otonom yang mengeksekusi tugas multi-langkah.
+- Merancang sistem di mana beberapa agen AI khusus berkolaborasi.
+- Mengimplementasikan alur kerja agen berbasis graph dengan LangGraph atau framework serupa.
+- Mengintegrasikan checkpoint human-in-the-loop untuk keputusan berisiko tinggi.
+- Membangun pipeline AI dengan tool-calling, RAG, eksekusi kode, atau kontrol browser.
+- Mengevaluasi dan memilih framework agen yang tepat.
+
+### Perbandingan Framework Agen (2026)
+
+| Framework | Bahasa | Terbaik Untuk | Diferensiasi Kunci |
+|---|---|---|---|
+| **LangGraph** | Python / TS | Alur kerja stateful kompleks | Berbasis graph, LLM apa saja, kontrol penuh |
+| **OpenAI Agents SDK** | Python | Agen GPT-5 native | Handoffs, tracing, guardrails bawaan |
+| **Google ADK** | Python | Agen berbasis Gemini | Multi-agen, Vertex AI, streaming |
+| **Mastra.ai** | TypeScript | Aplikasi agen TS-first | Memori, evaluasi, RAG, MCP bawaan |
+| **CrewAI** | Python | Tugas tim-agen | Agen berbasis peran, mudah dimulai |
+| **AutoGen** | Python | Riset & evaluasi LLM | Agen berbasis percakapan |
+
+### Prinsip Arsitektur Inti
+
+#### 1. Peran & Spesialisasi Agen
+Rancang agen dengan tanggung jawab tunggal:
+- **Orchestrator Agent**: Mendelegasikan tugas ke agen spesialis.
+- **Specialist Agents**: Domain-spesifik (agen riset, kode, analis data, penulis).
+- **Tool Agents**: Membungkus kemampuan eksternal (browser, SQL, file).
+- **Critic/Validator Agent**: Meninjau output agen lain sebelum difinalisasi.
+
+#### 2. LangGraph — Alur Kerja Graf Stateful
+LangGraph memodelkan alur kerja agen sebagai graf terarah dengan state persisten — ideal untuk tugas kompleks dengan logika percabangan dan HITL. State disimpan di checkpointer (MemorySaver atau PostgreSQL) untuk resume antar sesi.
+
+#### 3. OpenAI Agents SDK — Handoffs & Guardrails
+SDK native untuk agen GPT-5 dengan handoffs agen-ke-agen, tracing bawaan, dan guardrails untuk mencegah output berbahaya.
+
+#### 4. Google ADK — Agen Gemini Multi-Agent
+ADK untuk membangun agen Gemini dengan integrasi Vertex AI, sub-agents, dan tool seperti Google Search dan eksekusi kode.
+
+#### 5. Mastra.ai — Agen TypeScript-First
+Framework paling lengkap untuk tim TypeScript: memori bawaan, evaluasi, RAG, dan dukungan MCP native.
+
+#### 6. Human-in-the-Loop (HITL) Guardrails
+Wajib untuk aksi agen berisiko tinggi (transaksi keuangan, pengiriman email, deployment kode):
+- **Interrupt Checkpoints**: Jeda eksekusi graf sebelum aksi tidak dapat dibalik.
+- **Approval Flows**: Kirim aksi yang menunggu ke UI untuk ditinjau manusia.
+- **Confidence Thresholds**: Auto-approve jika keyakinan > 90%, eskalasi jika < 70%.
+
+#### 7. Arsitektur Memori Agen
+- **Working Memory**: Riwayat percakapan recent dalam context window.
+- **Episodic Memory**: Sesi masa lalu yang diringkas sebagai embedding (Mem0).
+- **Semantic Memory**: Pengetahuan domain dalam vector store (pgvector, Qdrant).
+- **Procedural Memory**: Pola penggunaan tool yang dipelajari sebagai data terstruktur.
+
+#### 8. Observabilitas & Evaluasi
+- **LangSmith**: Tracing native untuk LangGraph.
+- **OpenAI Tracing**: Bawaan di OpenAI Agents SDK — lihat run, handoff, tool call.
+- **Mastra Evals**: Framework evaluasi bawaan untuk agen Mastra.
+- **Metrik Kustom**: Lacak tingkat penyelesaian tugas, akurasi tool call, latensi, dan biaya per run.

package/skills/multiple-entry-points/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: multiple-entry-points
+description: "Expert guide for designing and implementing Multiple Entry Points architecture in web applications / Panduan ahli untuk merancang dan mengimplementasikan arsitektur Multiple Entry Points pada aplikasi web."
+author: "Antigravity"
+---
+
+# Multiple Entry Points Architecture
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill outlines the architectural pattern of using Multiple Entry Points in a web application. Instead of forcing all traffic through a single Front Controller (like a monolithic `index.php`), the application separates traffic logically into distinct entry files such as `index.php` (public), `admin.php`, and `api.php`. This provides stronger isolation, optimized loading, and stricter security boundaries.
+
+### Core Principles of Multiple Entry Points
+1. **Logical Separation**: Isolate different application domains into their own entry files. For example: `public/index.php` for user-facing pages, `public/admin.php` for back-office operations, and `public/api.php` for stateless API routes.
+2. **Dedicated Bootstrapping**: Each entry point can bootstrap only the necessary dependencies, configurations, and middlewares it requires. For example, `api.php` does not need to initialize HTML template engines or stateful session cookies, while `admin.php` can enforce strict authentication middleware immediately upon execution.
+3. **Security Boundaries**: By physically separating entry points, you can apply distinct server-level security rules (via `.htaccess`, Nginx configurations, or WAF). For example, you can restrict access to `admin.php` to specific internal IP addresses or enforce mutual TLS.
+4. **Frontend Asset Bundling (Vite / Webpack)**: In a modern frontend context (especially for MPAs), define multiple entry points in the bundler configuration. This generates separate, optimized JavaScript and CSS bundles for the public site versus the complex admin dashboard, drastically reducing overall payload sizes for general users.
+
+### Orchestration with Other Skills
+- **With `mpa-orchestrator`**: In a Multi-Page Application, multiple entry points allow you to split heavy dashboard assets from fast-loading public marketing pages, enhancing both SEO and performance.
+- **With `mvc-expert`**: Each entry point acts as a distinct Front Controller, initiating its own lightweight Router instance configured specifically for that domain's controllers (e.g., an AdminRouter vs an ApiRouter).
+- **With `saas-multi-tenant`**: You can design a `tenant.php` entry point that strictly mandates a valid `tenant_id` resolution before bootstrapping the app, while a `landing.php` entry point handles anonymous public traffic safely.
+
+### Trigger Conditions
+- Active when building or refactoring applications that require strict separation between public, admin, and API traffic.
+- Active when optimizing frontend bundler configurations (like Vite) for Multi-Page Applications.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini menguraikan pola arsitektur menggunakan *Multiple Entry Points* dalam aplikasi web. Alih-alih memaksa semua lalu lintas (traffic) melalui satu Front Controller tunggal (seperti `index.php` monolitik), aplikasi memisahkan lalu lintas secara logis ke dalam file entri yang berbeda seperti `index.php` (publik), `admin.php`, dan `api.php`. Pola ini memberikan isolasi yang lebih kuat, pemuatan (loading) yang dioptimalkan, dan batas keamanan yang lebih ketat.
+
+### Prinsip Inti Multiple Entry Points
+1. **Pemisahan Logis**: Isolasi domain aplikasi yang berbeda ke dalam file entrinya masing-masing. Contoh: `public/index.php` untuk pengguna umum, `public/admin.php` untuk operasional *back-office*, dan `public/api.php` untuk rute API yang *stateless*.
+2. **Bootstrapping Terdedikasi**: Setiap titik masuk (entry point) hanya memuat dependensi, konfigurasi, dan middleware yang benar-benar diperlukannya. Contohnya, `api.php` tidak perlu menginisialisasi *template engine* HTML atau *session cookies*, sementara `admin.php` dapat langsung memberlakukan middleware autentikasi secara ketat sejak awal file dieksekusi.
+3. **Batas Keamanan (Security Boundaries)**: Dengan memisahkan titik masuk secara fisik, Anda dapat menerapkan aturan keamanan tingkat server yang berbeda (melalui `.htaccess`, konfigurasi Nginx, atau WAF). Misalnya, membatasi akses ke `admin.php` hanya untuk alamat IP internal tertentu.
+4. **Bundling Aset Frontend (Vite / Webpack)**: Dalam konteks frontend modern (khususnya untuk MPA), tentukan beberapa *entry points* pada konfigurasi *bundler*. Ini akan menghasilkan bundel JavaScript dan CSS yang terpisah dan optimal antara situs publik dan dashboard admin, sehingga secara drastis mengurangi ukuran *payload* bagi pengguna umum.
+
+### Orkestrasi dengan Skill Lain
+- **Dengan `mpa-orchestrator`**: Dalam aplikasi MPA, penggunaan beberapa *entry point* memungkinkan Anda memisahkan aset dashboard yang berat dari halaman *marketing* publik yang butuh kecepatan muat tinggi, sehingga meningkatkan SEO dan performa sekaligus.
+- **Dengan `mvc-expert`**: Setiap *entry point* bertindak sebagai Front Controller yang terpisah, menginisiasi instans Router yang ringan dan dikonfigurasi khusus untuk controller di domain tersebut (misalnya AdminRouter vs ApiRouter).
+- **Dengan `saas-multi-tenant`**: Anda dapat memiliki *entry point* `tenant.php` yang secara ketat mewajibkan resolusi `tenant_id` yang valid sebelum memuat aplikasi, sementara *entry point* `landing.php` melayani lalu lintas publik anonim dengan aman.
+
+### Kondisi Pemicu
+- Aktif saat membangun atau melakukan refaktor aplikasi yang membutuhkan pemisahan ketat antara lalu lintas publik, admin, dan API.
+- Aktif saat mengoptimalkan konfigurasi *bundler* frontend (seperti Vite) untuk proyek Multi-Page Application.

package/skills/mvc-expert/SKILL.md

@@ -0,0 +1,231 @@
+---
+name: mvc-expert
+description: "Expert guidelines to refactor legacy PHP codebases into clean, modern, and scalable MVC-structured projects / Pedoman ahli untuk merefaktor codebase PHP lama menjadi proyek terstruktur MVC yang bersih, modern, dan skalabel."
+author: "Antigravity"
+---
+
+# PHP MVC Expert & Modernization
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill provides the agent with structured protocols, coding patterns, and architectural guidelines to audit, refactor, and modernize legacy/obsolete PHP codebases (plain spaghetti PHP) into a clean, modern, secure, and scalable Model-View-Controller (MVC) structure adhering to PSR standards and modern PHP (v8.2+) capabilities.
+
+### Instructions
+
+#### 1. Audit Protocol for Legacy PHP
+Before writing new structures, run a detailed audit on the legacy files to map out:
+- **Routing & Entry Points**: Identify raw `.php` files acting as endpoints (e.g., `about.php`, `contact.php`, `process.php`).
+- **Data Access & SQL**: Find inline SQL queries, string-concatenated queries (SQL Injection risks), and direct `mysqli` or `mysql_*` usages.
+- **Session & Global State**: Identify direct session mutations (`$_SESSION`), raw cookies, and unchecked global variables (`$_GET`, `$_POST`, `$_REQUEST`).
+- **Spaghetti Mixing**: Locate files where database connection, business logic, session validation, and HTML rendering are in a single script.
+- **Hardcoded Secrets**: Identify database credentials, API keys, and configurations defined inside individual files.
+
+#### 2. Modernization Strategy & Composer Setup
+Apply a standard project directory structure and initialize dependency management:
+- **PSR-4 Autoloading**: Create a `composer.json` file and define namespace mappings:
+  ```json
+  {
+    "autoload": {
+      "psr-4": {
+        "App\\": "src/"
+      }
+    }
+  }
+  ```
+- **Standard Directory Structure**:
+  - `public/`: Single entry point containing `index.php` (Front Controller), assets (CSS, JS), and uploaded files.
+  - `src/`: Root namespace for MVC structure (`src/Models/`, `src/Controllers/`, `src/Views/`, `src/Core/`).
+  - `config/`: Database configurations, router configurations, and app configurations.
+  - `.env` & `.env.example`: Store environment configurations.
+
+#### 3. Implementing MVC Architecture
+Refactor the spaghetti code into distinct MVC layers:
+- **Front Controller (Unified Routing)**:
+  Use a clean routing engine (like AltoRouter or a lightweight custom router) in `public/index.php`. Map all requests through a single file using `.htaccess` or server redirects:
+  ```php
+  // public/index.php
+  require_once __DIR__ . '/../vendor/autoload.php';
+  
+  $router = new App\Core\Router();
+  $router->add('GET', '/', 'HomeController@index');
+  $router->add('GET', '/users', 'UserController@index');
+  $router->dispatch($_SERVER['REQUEST_URI'], $_SERVER['REQUEST_METHOD']);
+  ```
+- **Models**:
+  Isolate all database access inside Model classes. Implement prepared statements using PDO:
+  ```php
+  namespace App\Models;
+  use App\Core\Database;
+  use PDO;
+
+  class User {
+      private PDO $db;
+      public function __construct() {
+          $this->db = Database::getInstance()->getConnection();
+      }
+      public function getAll(): array {
+          $stmt = $this->db->prepare("SELECT id, name, email FROM users ORDER BY name ASC");
+          $stmt->execute();
+          return $stmt->fetchAll(PDO::FETCH_ASSOC);
+      }
+  }
+  ```
+- **Controllers**:
+  Extract requests and input parameters, invoke models, and return/render views:
+  ```php
+  namespace App\Controllers;
+  use App\Models\User;
+
+  class UserController {
+      public function index(): void {
+          $model = new User();
+          $users = $model->getAll();
+          render_view('users/index', ['users' => $users]);
+      }
+  }
+  ```
+- **Views**:
+  Never echo HTML directly in controllers. Implement clean PHP template rendering or integrate a lightweight template engine like Twig. Ensure all HTML output is properly escaped.
+
+#### 4. Security Enhancements
+Integrate the following standard security gates during refactoring:
+- **SQL Injection Prevention**: Enforce prepared statements with parameters for every SQL query.
+- **XSS Prevention**: Build or use a global escape helper (e.g., `htmlspecialchars($str, ENT_QUOTES, 'UTF-8')`) for all dynamic view output.
+- **CSRF Protection**: Generate and validate CSRF tokens for all state-changing requests (`POST`, `PUT`, `DELETE`).
+- **Secrets Management**: Load configuration via `.env` files using `vlucas/phpdotenv`.
+
+#### 5. Leveraging Modern PHP (v8.2+)
+Refactor old PHP logic to use modern constructs:
+- **Constructor Property Promotion** and **Typed Properties**.
+- **Readonly Classes** for immutable service/data classes.
+- **Strict Types Declaration**: Add `declare(strict_types=1);` to all class files.
+
+#### 6. Multi-Page Application (MPA) Approach in a Single Repository
+When organizing a project as a Multi-Page Application within a single repository, adhere to the following guidelines:
+- **Centralized Routing**: Use the Front Controller (`public/index.php`) to handle all page requests. Route each request to its respective controller and view, ensuring each page load is fully processed on the server side.
+- **Shared Layouts & Partials**: Avoid duplicating HTML (headers, footers, navigation). Create a `src/Views/layouts/` directory for base templates and a `src/Views/partials/` directory for reusable UI components. Controllers should inject page-specific content into the base layout.
+- **Asset Management**: Store all static assets (CSS, JS, images) in the `public/` directory. Use cache-busting techniques (e.g., appending file modification time `?v=123`) when linking assets in the views.
+- **State Management**: Use server-side sessions securely for user authentication, flash messages, and tracking state across full page reloads.
+
+### Trigger Conditions
+Active whenever the user requests to:
+- Modernize a legacy PHP project or spaghetti PHP script.
+- Design an MVC architecture or introduce a clean routing pattern in plain PHP.
+- Implement object-oriented programming (OOP), Composer namespaces (PSR-4), or clean up database access via PDO in a PHP application.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini memberikan protokol terstruktur, pola penulisan kode, dan panduan arsitektur bagi agen untuk melakukan audit, refaktorisasi, dan modernisasi terhadap codebase PHP lama yang usang (Plain Spaghetti PHP) menjadi struktur Model-View-Controller (MVC) yang bersih, modern, aman, dan skalabel yang mematuhi standar PSR serta kemampuan PHP modern (v8.2+).
+
+### Instruksi
+
+#### 1. Protokol Audit Kode PHP Lama
+Sebelum membuat struktur baru, jalankan langkah audit terperinci pada file-file proyek lama untuk memetakan:
+- **Titik Entri & Routing**: Identifikasi file-file `.php` mentah yang bertindak langsung sebagai endpoint (misal `about.php`, `contact.php`, `process.php`).
+- **Akses Data & SQL**: Cari query SQL inline, penggabungan query menggunakan string concatenation (berisiko SQL Injection), dan penggunaan langsung `mysqli` atau `mysql_*`.
+- **Session & State Global**: Identifikasi mutasi langsung session (`$_SESSION`), cookie mentah, dan variabel global yang tidak divalidasi (`$_GET`, `$_POST`, `$_REQUEST`).
+- **Pencampuran Logika (Spaghetti)**: Temukan file di mana koneksi database, logika bisnis, validasi session, dan render HTML berada dalam satu berkas tunggal.
+- **Secret Hardcoded**: Identifikasi kredensial database, API key, dan konfigurasi lainnya yang didefinisikan di dalam file.
+
+#### 2. Strategi Modernisasi & Konfigurasi Composer
+Terapkan struktur direktori proyek standar dan inisialisasi manajemen dependensi:
+- **PSR-4 Autoloading**: Buat file `composer.json` dan definisikan pemetaan namespace:
+  ```json
+  {
+    "autoload": {
+      "psr-4": {
+        "App\\": "src/"
+      }
+    }
+  }
+  ```
+- **Struktur Direktori Standar**:
+  - `public/`: Titik entri tunggal yang berisi `index.php` (Front Controller), aset (CSS, JS), serta file upload.
+  - `src/`: Namespace root untuk struktur MVC (`src/Models/`, `src/Controllers/`, `src/Views/`, `src/Core/`).
+  - `config/`: Konfigurasi database, konfigurasi router, dan konfigurasi aplikasi.
+  - `.env` & `.env.example`: Menyimpan konfigurasi environment.
+
+#### 3. Menerapkan Arsitektur MVC
+Refaktorkan kode spageti ke dalam lapisan MVC yang terpisah:
+- **Front Controller (Routing Terpusat)**:
+  Gunakan library routing yang bersih (seperti AltoRouter atau router kustom ringan) di `public/index.php`. Arahkan semua request melalui satu file menggunakan `.htaccess` atau pengalihan server:
+  ```php
+  // public/index.php
+  require_once __DIR__ . '/../vendor/autoload.php';
+  
+  $router = new App\Core\Router();
+  $router->add('GET', '/', 'HomeController@index');
+  $router->add('GET', '/users', 'UserController@index');
+  $router->dispatch($_SERVER['REQUEST_URI'], $_SERVER['REQUEST_METHOD']);
+  ```
+- **Models**:
+  Pisahkan semua akses database di dalam kelas Model. Gunakan prepared statements dengan PDO:
+  ```php
+  namespace App\Models;
+  use App\Core\Database;
+  use PDO;
+
+  class User {
+      private PDO $db;
+      public function __construct() {
+          $this->db = Database::getInstance()->getConnection();
+      }
+      public function getAll(): array {
+          $stmt = $this->db->prepare("SELECT id, name, email FROM users ORDER BY name ASC");
+          $stmt->execute();
+          return $stmt->fetchAll(PDO::FETCH_ASSOC);
+      }
+  }
+  ```
+- **Controllers**:
+  Ekstrak request dan parameter input, panggil model, lalu return/render view:
+  ```php
+  namespace App\Controllers;
+  use App\Models\User;
+
+  class UserController {
+      public function index(): void {
+          $model = new User();
+          $users = $model->getAll();
+          render_view('users/index', ['users' => $users]);
+      }
+  }
+  ```
+- **Views**:
+  Jangan pernah me-render atau menggunakan `echo` HTML langsung di dalam controller. Terapkan render template PHP yang bersih atau gunakan template engine ringan seperti Twig. Pastikan semua output HTML divalidasi dan lolos proses escaping.
+
+#### 4. Peningkatan Keamanan
+Integrasikan filter keamanan standar berikut selama refaktorisasi:
+- **Pencegahan SQL Injection**: Wajibkan prepared statements dengan parameter terikat untuk setiap query SQL.
+- **Pencegahan XSS**: Buat atau gunakan fungsi helper escape global (misal `htmlspecialchars($str, ENT_QUOTES, 'UTF-8')`) pada setiap output dinamis pada view.
+- **Proteksi CSRF**: Hasilkan dan validasi token CSRF untuk setiap request yang mengubah state data (`POST`, `PUT`, `DELETE`).
+- **Manajemen Secrets**: Muat konfigurasi via file `.env` menggunakan library `vlucas/phpdotenv`.
+
+#### 5. Memanfaatkan PHP Modern (v8.2+)
+Refaktorkan logika PHP lama agar menggunakan fitur modern:
+- **Constructor Property Promotion** dan **Typed Properties** untuk properti kelas.
+- **Readonly Classes** untuk kelas layanan atau data yang bersifat immutable (tidak dapat diubah).
+- **Deklarasi Strict Types**: Tambahkan `declare(strict_types=1);` di bagian paling atas setiap file kelas.
+
+#### 6. Pendekatan Multi-Page Application (MPA) dalam Satu Repositori
+Saat mengatur proyek sebagai Multi-Page Application di dalam satu repositori, ikuti panduan berikut:
+- **Routing Terpusat (Centralized Routing)**: Gunakan Front Controller (`public/index.php`) untuk menangani semua permintaan halaman. Arahkan setiap permintaan ke controller dan view masing-masing, memastikan setiap pemuatan halaman diproses sepenuhnya di sisi server.
+- **Layout & Parsial Bersama (Shared Layouts & Partials)**: Hindari duplikasi HTML (header, footer, navigasi). Buat direktori `src/Views/layouts/` untuk template dasar dan direktori `src/Views/partials/` untuk komponen UI yang dapat digunakan kembali. Controller harus menyuntikkan konten spesifik halaman ke dalam layout dasar.
+- **Manajemen Aset**: Simpan semua aset statis (CSS, JS, gambar) di direktori `public/`. Gunakan teknik cache-busting (misalnya, menambahkan waktu modifikasi file `?v=123`) saat menautkan aset di dalam view.
+- **Manajemen State**: Gunakan session sisi server secara aman untuk autentikasi pengguna, pesan flash, dan melacak state di seluruh proses reload halaman secara penuh.
+
+### Kondisi Pemicu
+Aktif setiap kali pengguna meminta untuk:
+- Memodernisasi proyek PHP lama atau script PHP spageti.
+- Merancang arsitektur MVC atau memperkenalkan pola routing yang bersih di plain PHP.
+- Menerapkan pemrograman berorientasi objek (OOP), namespace Composer (PSR-4), atau membersihkan akses database via PDO pada aplikasi PHP.