Mpa Orchestrator

---
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: "vibes-plug-swarm"
---

# Multi-Page Application (MPA) Orchestrator (2026 Edition)

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Orchestration & Integration
Connects and orchestrates with relevant domain skills like `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.

### 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 `modern-web-guidance`**: MUST execute FIRST before any HTML/CSS task to ensure modern frontend standards.
- **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

### Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan seperti `modern-web-guidance`, `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.

### 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 `modern-web-guidance`**: WAJIB dieksekusi PERTAMA KALI sebelum tugas HTML/CSS untuk memastikan standar frontend modern.
- **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.

---
### 📄 Standard Pages Mandate (CRITICAL)
**MANDATORY**: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:
1. **About Page** (`/about`)
2. **Profile Page** (`/profile`)
3. **Contact Page** (`/contact`)
4. **Terms of Reference / Terms of Service** (`/terms`)
5. **Privacy Policy** (`/privacy-policy`)

These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / **WAJIB**: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.