--- 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 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia) --- ## English ### Description This skill provides a structured approach for building and orchestrating a Multi-Page Application (MPA) within a single repository. It acts as an orchestrator, connecting foundational MPA principles with other specialized skills (like `mvc-expert`, `saas-multi-tenant`, `senior-fullstack`, etc.) to deliver a cohesive, modern server-rendered application. ### Core MPA Principles in a Single Repository 1. **Centralized Architecture**: Keep frontend views, backend logic, and routing within a unified codebase to simplify deployment and reduce cognitive load. 2. **Server-Side Routing & Rendering**: Use a Front Controller (e.g., `index.php`, `main.go`, or Next.js Pages router) to intercept requests, fetch data, and render complete HTML pages per route. 3. **Shared UI Ecosystem**: - Maintain a `layouts/` directory for base HTML structures (e.g., ``, navigation, footers). - Maintain a `partials/` or `components/` directory for reusable UI elements. - Inject route-specific content into these layouts dynamically. 4. **Asset Management**: Centralize static assets (CSS, JS, images) in a `public/` directory. Implement cache-busting for production assets. 5. **Session-based State**: Leverage secure, server-side HTTP-only cookies and sessions for user authentication, tenant context, and flash messages across page navigations. ### Orchestration Guidelines When designing or refactoring an MPA, orchestrate the following skills contextually: - **With `mvc-expert`**: Ensure the MPA strictly follows the MVC pattern. Controllers handle business logic and data aggregation, passing clean variables to the Views for rendering. - **With `saas-multi-tenant`**: Integrate tenant identification in the core routing middleware. Ensure every page load initializes the `tenant_id` context securely before fetching any data for the View. - **With `senior-frontend` / `ui-ux-pro-max`**: While it's an MPA, enhance the frontend experience using lightweight JavaScript frameworks (like Alpine.js or HTMX) and Tailwind CSS for dynamic micro-interactions without sacrificing server-side rendering. - **With `seo`**: Maximize the MPA's inherent SEO advantages by ensuring every page returns fully populated HTML, correct meta tags, and structured schema data on the initial load. ### Trigger Conditions - Active when the user requests to build a web application using the Multi-Page Application (MPA) approach in a single repository. - Active when refactoring or migrating an existing app to a centralized MPA architecture. - Active when the user mentions combining MPA with SaaS, MVC, or modern backend frameworks. --- ## Bahasa Indonesia ### Deskripsi Skill ini memberikan pendekatan terstruktur untuk membangun dan mengorkestrasi Multi-Page Application (MPA) di dalam satu repositori (monolith/single repo). Skill ini bertindak sebagai orkestrator yang menghubungkan prinsip-prinsip dasar MPA dengan skill spesialis lainnya (seperti `mvc-expert`, `saas-multi-tenant`, `senior-fullstack`, dll.) untuk menghasilkan aplikasi *server-rendered* yang kohesif dan modern. ### Prinsip Inti MPA dalam Satu Repositori 1. **Arsitektur Terpusat**: Simpan tampilan frontend, logika backend, dan routing dalam satu codebase terpadu untuk menyederhanakan proses deployment dan mengurangi beban kognitif. 2. **Routing & Rendering Sisi Server**: Gunakan Front Controller (misalnya `index.php`, `main.go`, atau Next.js Pages router) untuk menangkap permintaan, mengambil data, dan me-render halaman HTML lengkap per rute. 3. **Ekosistem UI Bersama**: - Buat direktori `layouts/` untuk struktur dasar HTML (seperti ``, navigasi, footer). - Buat direktori `partials/` atau `components/` untuk elemen UI yang dapat digunakan kembali. - Suntikkan konten spesifik rute ke dalam layout ini secara dinamis. 4. **Manajemen Aset**: Pusatkan aset statis (CSS, JS, gambar) di dalam direktori `public/`. Terapkan teknik *cache-busting* untuk aset produksi. 5. **State Berbasis Session**: Manfaatkan cookie HTTP-only dan session sisi server yang aman untuk autentikasi pengguna, konteks tenant, dan pesan flash di setiap navigasi halaman. ### Panduan Orkestrasi Saat merancang atau melakukan refaktor MPA, orkestrasikan skill berikut secara kontekstual: - **Dengan `mvc-expert`**: Pastikan MPA secara ketat mengikuti pola MVC. Controller menangani logika bisnis dan agregasi data, lalu meneruskan variabel yang bersih ke View untuk di-render. - **Dengan `saas-multi-tenant`**: Integrasikan identifikasi tenant pada middleware routing inti. Pastikan setiap pemuatan halaman menginisialisasi konteks `tenant_id` secara aman sebelum mengambil data untuk View. - **Dengan `senior-frontend` / `ui-ux-pro-max`**: Meskipun ini adalah MPA, tingkatkan pengalaman frontend menggunakan framework JavaScript ringan (seperti Alpine.js atau HTMX) dan Tailwind CSS untuk interaksi mikro yang dinamis tanpa mengorbankan *server-side rendering*. - **Dengan `seo`**: Maksimalkan keuntungan SEO bawaan dari MPA dengan memastikan setiap halaman mengembalikan HTML yang terisi penuh, tag meta yang benar, dan data skema terstruktur pada pemuatan awal. ### Kondisi Pemicu - Aktif ketika pengguna meminta untuk membangun aplikasi web menggunakan pendekatan Multi-Page Application (MPA) dalam satu repositori. - Aktif ketika melakukan refaktor atau migrasi aplikasi yang sudah ada ke arsitektur MPA terpusat. - Aktif ketika pengguna menyebutkan penggabungan MPA dengan SaaS, MVC, atau framework backend modern.