vibes-plug 2.5.0 → 2.11.0

package/skills/senior-frontend/SKILL.md

@@ -1,161 +1,141 @@
----
-name: senior-frontend
-description: "Frontend development for React 19, Next.js 15, TypeScript, and Tailwind CSS v4 / Pengembangan frontend dengan React 19, Next.js 15, TypeScript, dan Tailwind CSS v4."
-author: "Roedy Rustam"
----
-
-# Senior Frontend Specialist (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-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.
-
-### Trigger Conditions
-- Use when scaffolding a new React or Next.js 15 project with TypeScript and Tailwind CSS v4.
-- Use when generating new components, custom hooks, or Server Actions.
-- Use when analyzing and optimizing bundle sizes and Core Web Vitals.
-- Use to implement advanced React 19 patterns (`useActionState`, `useOptimistic`, `use()`).
-- Use when working in SPA mode — coordinate with `spa-orchestrator` for architecture decisions.
-- Use to ensure accessibility compliance (WCAG 2.2) and implement robust testing.
-
-### Technical Guidelines & Best Practices
-
-#### 1. Next.js 15: Server vs Client Components
-Use **Server Components** by default for performance and SEO. Use `'use client'` only when you need:
-- State (`useState`, `useEffect`), event handlers (`onClick`), browser APIs.
-- Interactive UI that must be hydrated on the client.
-
-*Next.js 15 Notes:*
-- `params` and `searchParams` are now `Promise`-based — always `await` them before reading properties.
-- **Partial Prerendering (PPR)**: Wrap dynamic sections in `<Suspense>` — Next.js will statically pre-render the shell and stream dynamic content. Enable with `experimental: { ppr: true }`.
-
-#### 2. React 19 — New Hooks & Compiler
-React 19 ships with a **compiler** that auto-applies memoization. You no longer need `useMemo`, `useCallback`, or `React.memo` in most cases — the compiler handles it.
-
-**New Hooks:**
-- **`useActionState`**: Manage form state, pending indicators, and action results natively with Server Actions.
-- **`useOptimistic`**: Instantly update UI before server confirms (likes, cart additions).
-- **`useFormStatus`**: Read form submission state inside child components.
-- **`use(promise)`**: Unwrap promises or context inside render — works with Suspense.
-```tsx
-// use() with context
-const theme = use(ThemeContext);
-
-// use() with a promise (suspends until resolved)
-const data = use(fetchUserPromise);
-```
-
-#### 3. View Transitions API
-Use the native browser View Transitions API for smooth page transitions without heavy libraries:
-```tsx
-import { unstable_ViewTransition as ViewTransition } from 'react';
-
-// Wrap changing elements
-<ViewTransition name="hero-image">
-  <img src={image} />
-</ViewTransition>
-```
-Next.js 15 App Router supports View Transitions natively via the `<Link>` component with `viewTransition` prop.
-
-#### 4. Tailwind CSS v4 CSS-First Configuration
-Tailwind CSS v4 uses **CSS-first configuration**. Define custom theme tokens using the `@theme` directive in your main CSS file. Use the new `@plugin` directive to register plugins:
-```css
-@import "tailwindcss";
-
-@theme {
-  --color-brand: oklch(55% 0.2 250);
-  --font-sans: "Inter", sans-serif;
-  --animate-fade-in: fade-in 0.3s ease-out;
-}
-
-@plugin "@tailwindcss/typography";
-```
-
-#### 5. Accessibility (WCAG 2.2) & Testing
-- Use semantic HTML tags (`<button>`, `<nav>`, `<main>`, `<article>`).
-- Ensure full keyboard navigability and proper `aria-*` labels.
-- Write unit tests using **Vitest** and **React Testing Library**.
-- Write E2E tests using **Playwright** (via `e2e-testing-expert` skill).
-
-#### 6. SPA Integration (spa-orchestrator)
-When building a decoupled SPA (not Next.js SSR):
-- Coordinate with `spa-orchestrator` for architecture decisions (routing, state, API layer).
-- Use **TanStack Router** for fully type-safe client-side routing (preferred over React Router for new projects).
-- Use **TanStack Query v5** for all server state — never use bare `useEffect` for data fetching.
-
-#### 7. Multi-Page Application (MPA) Integration
-When working within a centralized MPA (via `mpa-orchestrator`):
-- Use **Alpine.js** or **HTMX** for micro-interactions without heavy client bundles.
-- Apply **Progressive Enhancement**: ensure forms and links work without JavaScript first.
-
-#### 8. Advanced Animations (GSAP & Anime.js)
-- **GSAP (GreenSock)**: Use for complex, timeline-based, and scroll-driven animations (`ScrollTrigger`). In React, always use `@gsap/react` `useGSAP()` hook for automatic cleanup.
-- **Anime.js**: Use as a lightweight, powerful alternative for simpler sequencing, staggering, SVG path animations, and DOM attribute animations. It's often preferred when bundle size is a strict concern and scroll-driven features are not needed.
-- Prefer JS animations (GSAP/Anime.js) over CSS for sequences requiring pausing, reversing, or timeline control.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-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.
-
-### Kondisi Pemicu
-- Gunakan saat merancang proyek React atau Next.js 15 baru dengan TypeScript dan Tailwind CSS v4.
-- Gunakan saat membuat komponen baru, custom hooks, atau Server Actions.
-- Gunakan saat menganalisis dan mengoptimalkan bundle dan Core Web Vitals.
-- Gunakan untuk mengimplementasikan pola React 19 lanjutan (`useActionState`, `useOptimistic`, `use()`).
-- Gunakan saat membangun SPA — koordinasikan dengan `spa-orchestrator` untuk keputusan arsitektur.
-- Gunakan untuk memastikan kepatuhan aksesibilitas (WCAG 2.2) dan pengujian otomatis.
-
-### Panduan Teknis & Praktik Terbaik
-
-#### 1. Next.js 15: Server vs Client Components
-Gunakan **Server Components** secara default untuk performa dan SEO. Gunakan `'use client'` hanya saat dibutuhkan state, event handler, atau API browser.
-
-*Catatan Next.js 15:*
-- `params` dan `searchParams` sekarang bertipe `Promise` — lakukan `await` sebelum mengakses nilainya.
-- **Partial Prerendering (PPR)**: Bungkus bagian dinamis dengan `<Suspense>` — Next.js akan men-prerender shell statis dan meng-stream konten dinamis. Aktifkan dengan `experimental: { ppr: true }`.
-
-#### 2. React 19 — Hook Baru & Compiler
-React 19 hadir dengan **compiler** yang otomatis menerapkan memoization. Anda tidak lagi perlu `useMemo`, `useCallback`, atau `React.memo` di sebagian besar kasus.
-
-**Hook Baru:**
-- **`useActionState`**: Mengelola state form, indikator loading, dan hasil action dengan Server Actions.
-- **`useOptimistic`**: Memperbarui UI secara instan sebelum server mengonfirmasi.
-- **`useFormStatus`**: Membaca status form di dalam komponen anak.
-- **`use(promise)`**: Membuka *promise* atau context langsung di dalam render — bekerja bersama Suspense.
-
-#### 3. View Transitions API
-Gunakan View Transitions API bawaan browser untuk transisi halaman yang mulus tanpa library berat. Next.js 15 mendukung ini secara native melalui `<Link viewTransition>`.
-
-#### 4. Tailwind CSS v4 CSS-First Configuration
-Konfigurasi kustom tema dilakukan langsung di file CSS menggunakan direktif `@theme`. Gunakan `@plugin` untuk mendaftarkan plugin.
-
-#### 5. Aksesibilitas (WCAG 2.2) & Pengujian
-- Gunakan HTML semantik (`<button>`, `<nav>`, `<main>`).
-- Pastikan navigasi keyboard berfungsi penuh dengan label `aria-*` yang tepat.
-- Pengujian unit dengan Vitest + React Testing Library; E2E dengan Playwright.
-
-#### 6. Integrasi SPA (spa-orchestrator)
-Saat membangun SPA terpisah (bukan Next.js SSR):
-- Koordinasikan dengan `spa-orchestrator` untuk keputusan routing, state, dan API layer.
-- Gunakan **TanStack Router** untuk routing type-safe di sisi klien.
-- Gunakan **TanStack Query v5** untuk semua server state.
-
-#### 7. Integrasi MPA (mpa-orchestrator)
-Saat bekerja dalam arsitektur MPA terpusat:
-- Gunakan Alpine.js atau HTMX untuk interaksi mikro yang ringan.
-- Terapkan Progressive Enhancement: form dan link harus berfungsi tanpa JavaScript terlebih dahulu.
-
-#### 8. Animasi Tingkat Lanjut (GSAP & Anime.js)
-- **GSAP (GreenSock)**: Gunakan untuk animasi kompleks, berbasis timeline, dan *scroll-driven* (`ScrollTrigger`). Di React, selalu gunakan hook `useGSAP()` dari `@gsap/react` untuk mencegah kebocoran memori.
-- **Anime.js**: Gunakan sebagai alternatif yang lebih ringan namun sangat kuat untuk animasi DOM, properti CSS, SVG, dan *staggering* sederhana. Sangat cocok jika ukuran *bundle* menjadi prioritas utama.
-- Utamakan pustaka JS (GSAP/Anime.js) dibandingkan CSS murni untuk animasi yang membutuhkan kontrol *timeline*, jeda (*pause*), *reverse*, atau *stagger* dinamis.
+---
+name: senior-frontend
+description: "Frontend development for React 19, Next.js 15, TypeScript, and Tailwind CSS v4 / Pengembangan frontend dengan React 19, Next.js 15, TypeScript, dan Tailwind CSS v4."
+author: "Roedy Rustam"
+---
+
+# Senior Frontend Specialist (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+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.
+
+### Orchestration & Integration
+- `ui-components-expert`: For building robust UI components (Radix, shadcn).
+- `tailwind-expert`: For styling and custom @theme configurations.
+- `nextjs-app-router-expert`: For RSC, caching, and Next.js routing patterns.
+- `state-management-expert`: For client-side state (Zustand, Jotai).
+- `tanstack-query-expert`: For advanced data fetching and server state caching.
+- `spa-orchestrator`: For Single-Page Application architectures.
+- `mpa-orchestrator`: For Multi-Page Application architectures.
+
+### Trigger Conditions
+- Scaffold a new React or Next.js 15 project with TypeScript and Tailwind CSS v4.
+- Generate new components, custom hooks, or Server Actions.
+- Analyze and optimize bundle sizes and Core Web Vitals.
+- Implement advanced React 19 patterns (`useActionState`, `useOptimistic`, `use()`).
+- Build SPAs — coordinate with `spa-orchestrator`.
+- Ensure accessibility compliance (WCAG 2.2) and testing.
+
+### Technical Guidelines & Best Practices
+
+#### 1. Next.js 15: Server vs Client Components
+Use **Server Components** by default for performance and SEO. Use `'use client'` strictly for:
+- State (`useState`, `useEffect`), event handlers (`onClick`), browser APIs.
+- Interactive UI needing client hydration.
+
+*Next.js 15.2+ Requirements:*
+- Await `Promise`-based `params` and `searchParams` before accessing properties.
+- Use **Partial Prerendering (PPR)** natively. Wrap dynamic sections in `<Suspense>`.
+
+#### 2. React 19 Compiler & Hooks
+Do not use `useMemo`, `useCallback`, or `React.memo` unless explicitly required; rely on the React 19 compiler.
+
+**Mandatory Hooks:**
+- **`useActionState`**: Manage form state, pending indicators, and action results with Server Actions.
+- **`useOptimistic`**: Update UI instantly before server confirmation.
+- **`useFormStatus`**: Read form submission state in child components.
+- **`use(promise)`**: Unwrap promises or context inside render with Suspense.
+
+#### 3. View Transitions API
+Implement native View Transitions API for smooth page transitions. Use Next.js 15 `<Link viewTransition>` natively.
+
+#### 4. Tailwind CSS v4
+Use CSS-first configuration. Define custom tokens with `@theme` and register plugins with `@plugin` in the main CSS file.
+
+#### 5. Accessibility (WCAG 2.2) & Testing
+- Enforce semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`).
+- Enforce full keyboard navigability and valid `aria-*` labels.
+- Write unit tests using **Vitest** and **React Testing Library**.
+- Write E2E tests using **Playwright** via `e2e-testing-expert`.
+
+#### 6. Architecture Integration
+- **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.
+- **MPA (`mpa-orchestrator`)**: Use **Alpine.js** or **HTMX** for micro-interactions. Apply Progressive Enhancement.
+
+#### 7. Advanced Animations
+- **GSAP (GreenSock)**: Use for complex, timeline-based, scroll-driven animations (`ScrollTrigger`). Enforce `@gsap/react` `useGSAP()` hook for auto-cleanup.
+- **Anime.js**: Use as a lightweight alternative for simple sequencing, SVG path animations, and DOM attribute animations.
+- Prefer JS animations over CSS when timeline control (pause, reverse, dynamic stagger) is required.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+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.
+
+### Integrasi Orkestrasi
+- `ui-components-expert`: Untuk membangun komponen UI yang kuat (Radix, shadcn).
+- `tailwind-expert`: Untuk styling dan konfigurasi @theme kustom.
+- `nextjs-app-router-expert`: Untuk RSC, caching, dan pola routing Next.js.
+- `state-management-expert`: Untuk state client-side (Zustand, Jotai).
+- `tanstack-query-expert`: Untuk fetching data lanjutan dan caching server state.
+- `spa-orchestrator`: Untuk arsitektur Single-Page Application.
+- `mpa-orchestrator`: Untuk arsitektur Multi-Page Application.
+
+### Kondisi Pemicu
+- Buat proyek React atau Next.js 15 baru dengan TypeScript dan Tailwind CSS v4.
+- Buat komponen baru, custom hooks, atau Server Actions.
+- Analisis dan optimalkan ukuran bundle dan Core Web Vitals.
+- Terapkan pola React 19 lanjutan (`useActionState`, `useOptimistic`, `use()`).
+- Bangun SPA — koordinasikan dengan `spa-orchestrator`.
+- Pastikan kepatuhan aksesibilitas (WCAG 2.2) dan pengujian.
+
+### Panduan Teknis & Praktik Terbaik
+
+#### 1. Next.js 15: Server vs Client Components
+Gunakan **Server Components** secara default. Gunakan `'use client'` hanya untuk:
+- State (`useState`, `useEffect`), event handler, API browser.
+- UI interaktif yang membutuhkan hidrasi klien.
+
+*Persyaratan Next.js 15.2+:*
+- Wajib `await` pada `params` dan `searchParams` yang kini bertipe `Promise`.
+- Gunakan **Partial Prerendering (PPR)** secara native. Bungkus bagian dinamis dengan `<Suspense>`.
+
+#### 2. React 19 Compiler & Hook Baru
+Jangan gunakan `useMemo`, `useCallback`, atau `React.memo` kecuali sangat diperlukan; andalkan compiler React 19.
+
+**Hook Wajib:**
+- **`useActionState`**: Kelola state form, indikator loading, dan hasil action dengan Server Actions.
+- **`useOptimistic`**: Perbarui UI secara instan sebelum server mengonfirmasi.
+- **`useFormStatus`**: Baca status form di dalam komponen anak.
+- **`use(promise)`**: Buka promise atau context langsung di dalam render dengan Suspense.
+
+#### 3. View Transitions API
+Terapkan View Transitions API bawaan browser untuk transisi halaman. Gunakan `<Link viewTransition>` pada Next.js 15.
+
+#### 4. Tailwind CSS v4
+Gunakan konfigurasi CSS-first. Definisikan token kustom dengan `@theme` dan plugin dengan `@plugin` di file CSS utama.
+
+#### 5. Aksesibilitas (WCAG 2.2) & Pengujian
+- Wajib gunakan HTML semantik (`<button>`, `<nav>`, `<main>`).
+- Wajib pastikan navigasi keyboard dengan label `aria-*` yang valid.
+- Tulis pengujian unit dengan **Vitest** dan **React Testing Library**.
+- Tulis pengujian E2E dengan **Playwright** via `e2e-testing-expert`.
+
+#### 6. Integrasi Arsitektur
+- **SPA (`spa-orchestrator`)**: Gunakan **TanStack Router** untuk routing klien dan **TanStack Query v5** untuk server state. Jangan gunakan `useEffect` murni untuk fetching data.
+- **MPA (`mpa-orchestrator`)**: Gunakan **Alpine.js** atau **HTMX** untuk interaksi mikro. Terapkan Progressive Enhancement.
+
+#### 7. Animasi Tingkat Lanjut
+- **GSAP (GreenSock)**: Gunakan untuk animasi kompleks, berbasis timeline, dan scroll-driven. Wajib gunakan hook `useGSAP()` dari `@gsap/react`.
+- **Anime.js**: Gunakan untuk staggering sederhana, animasi SVG, dan DOM.
+- Utamakan animasi JS (GSAP/Anime.js) daripada CSS murni jika kontrol timeline (pause, reverse) dibutuhkan.

package/skills/seo/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: seo
 description: "Run a broad SEO audit across technical SEO, on-page SEO, schema, sitemaps, content quality, AI search readiness, and GEO / Audit SEO menyeluruh (Technical, On-Page, Schema, Sitemap, E-E-A-T, GEO)"
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # SEO Expert (2026 — AI Mode & Core Web Vitals Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 Comprehensive SEO audit covering technical SEO, on-page optimization, structured data, sitemaps, Core Web Vitals, E-E-A-T signals, and **Generative Engine Optimization (GEO)** for AI-powered search (Google AI Mode, ChatGPT Search, Perplexity).
 
@@ -156,10 +159,36 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 Google AI Mode (formerly AI Overviews) now powers the top of search results:
 - **Be the source**: Write comprehensive, authoritative content on your core topics.
 - **Q&A format**: Structure content as questions and answers — AI Mode quotes these directly.
+- **AEO Extraction Sentence**: Write one 25–40 word sentence that answers "What is [product]?" immediately after the H1. This is the sentence AI engines extract.
 - **Factual and specific**: Include statistics, named entities, and dates.
-- **`/llms.txt`**: Add an AI-readable site index (see `seo-geo` skill).
 - **Speed**: AI Mode favors fast-loading pages (TTFB < 600ms).
 
+#### The 2026 AI Search Landscape
+| AI Engine | Source | Citable Content | Key Signal |
+|---|---|---|---|
+| **Google AI Mode** | Google index + Gemini | Yes — with source links | E-E-A-T, structured data |
+| **ChatGPT Search** | Bing index + GPT-4o | Yes — with citations | Bing ranking, freshness |
+| **Perplexity** | Real-time web crawl | Yes — prominent citations | Authority, specificity |
+
+#### `/llms.txt` — AI Indexing Protocol
+Add an `/llms.txt` file at your domain root:
+```
+# /llms.txt
+# AI-friendly site map for LLM indexers
+## Product
+- [Features](/features): Complete feature list with pricing
+## Content
+- [Blog](/blog): Technical articles
+```
+
+#### Landing Page SEO/AEO Narrative Arc
+Follow this exact order for landing pages:
+1. Hero — H1 + AEO sentence + CTA
+2. Problem — Audience pain, no product mention yet
+3. Solution — Introduce product as the answer
+4. Features as Benefits — Table format
+5. Social Proof & FAQ (under 50 words each)
+
 ### On-Page SEO Standards
 ```
 H1: One per page — primary keyword, compelling, < 60 chars
@@ -177,6 +206,9 @@ Internal links: 3-5 per long-form page to related content
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
 ### Deskripsi
 Audit SEO komprehensif mencakup SEO teknikal, optimasi on-page, data terstruktur, sitemap, Core Web Vitals, sinyal E-E-A-T, dan **Generative Engine Optimization (GEO)** untuk pencarian bertenaga AI (Google AI Mode, ChatGPT Search, Perplexity).
 
@@ -213,23 +245,15 @@ Gunakan Metadata API Next.js 15 untuk SEO lengkap: `title`, `description`, `open
 ### Data Terstruktur (JSON-LD) untuk Kutipan AI
 Tambahkan schema `Organization` untuk membangun entitas merek dan schema `SoftwareApplication` untuk produk SaaS — termasuk `aggregateRating` jika tersedia.
 
-### GEO — Optimasi Google AI Mode
-Google AI Mode (sebelumnya AI Overviews) kini mendukung bagian atas hasil pencarian:
-- Tulis konten yang komprehensif dan otoritatif tentang topik inti.
-- Strukturkan konten sebagai Q&A — AI Mode langsung mengutip ini.
-- Sertakan statistik, entitas bernama, dan tanggal.
+### GEO — Optimasi AI Mode & Landing Page AEO
+Google AI Mode (sebelumnya AI Overviews) dan Perplexity sangat menyukai format berikut:
+- **Kalimat Ekstraksi AEO**: Buat satu kalimat ringkas 25–40 kata ("Apa itu [produk]?") di blockquote setelah H1.
+- Tulis konten Q&A dan sertakan statistik spesifik.
+- **Alur Narasi Landing Page**: Hero (H1+AEO) -> Problem -> Solution -> Features -> Social Proof -> FAQ (tiap jawaban <50 kata).
 - Tambahkan `/llms.txt` sebagai indeks situs yang dapat dibaca AI.
-- Kecepatan: AI Mode lebih memilih halaman yang memuat cepat (TTFB < 600ms).
+- Kecepatan: Halaman harus memuat sangat cepat (TTFB < 600ms).
 
 ### Standar SEO On-Page
 H1 satu per halaman, H2 untuk header seksi, meta title < 60 karakter, meta deskripsi < 155 karakter, URL lowercase dengan tanda hubung dan keyword di slug, alt text deskriptif untuk semua gambar, 3-5 internal link per halaman long-form.
 
----
-### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
-**MANDATORY**: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the `generate_image` tool to create a custom logo that perfectly matches the application's core concept and aesthetic. 
-This generated image MUST be explicitly used as:
-1. The primary application logo (e.g., in the header/navbar).
-2. The website favicon (`favicon.ico` or equivalent).
-3. The Open Graph (OG) image for SEO metadata (`og:image`).
-
-Do not use placeholders for these assets. Generate and integrate them automatically.
+

package/skills/session-context-loader/SKILL.md

@@ -1,77 +1,83 @@
----
-name: session-context-loader
-description: "Automatically loads and learns project context (Tech Stack, PRD, Roadmap, Blueprint) at the start of every new conversation session to ensure focused and directed development / Otomatis memuat dan mempelajari konteks proyek (Tech Stack, PRD, Roadmap, Blueprint) di awal setiap sesi percakapan baru untuk memastikan pengembangan yang terarah dan fokus."
+---
+name: session-context-loader
+description: "Automatically loads and learns project context (Tech Stack, PRD, Roadmap, Blueprint) at the start of every new conversation session to ensure focused and directed development / Otomatis memuat dan mempelajari konteks proyek (Tech Stack, PRD, Roadmap, Blueprint) di awal setiap sesi percakapan baru untuk memastikan pengembangan yang terarah dan fokus."
 author: "Roedy Rustam"
----
-
-# Session Context Loader
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-This skill ensures that the AI agent is always aligned with the project's core documentation. At the beginning of every new conversation session, it automatically searches for and reads essential project context files (Tech Stack, PRD, Roadmap, Blueprint). This guarantees that development remains focused, directed, and strictly adheres to established requirements and architectural decisions.
-
-### Trigger Conditions
-Activate this skill IMMEDIATELY when:
-- It is the very first message of a new conversation session.
-- The user says "start session", "initialize project", or "load context".
-- The AI realizes it lacks the high-level context of the current repository.
-
-### Execution Protocol
-
-When triggered, you MUST perform the following steps before answering the user's primary request or writing any code:
-
-1. **Locate Key Documentation Files:**
-   Use your file search tools (`list_dir`, `grep_search`, or `view_file`) to look for the following files in the project root or `.docs/` folder:
-   - `PRD.md` (Product Requirements Document)
-   - `ROADMAP.md` or `ROADMAP.txt`
-   - `BLUEPRINT.md` or `ARCHITECTURE.md`
-   - `TECH_STACK.md`, `package.json`, `go.mod`, `Cargo.toml`, or `requirements.txt` (to identify the tech stack)
-
-2. **Read and Internalize Context:**
-   - Read the contents of the found files.
-   - Understand the project's primary goal, current phase in the roadmap, architectural constraints (blueprint), and the specific tech stack being used.
-
-3. **Acknowledge and Align:**
-   - Briefly acknowledge to the user that the project context has been loaded successfully.
-   - State the current Tech Stack and the immediate goal based on the Roadmap/PRD.
-   - Proceed with addressing the user's actual request using the newly loaded context.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Skill ini memastikan bahwa agen AI selalu selaras dengan dokumentasi inti proyek. Di awal setiap sesi percakapan baru, agen akan secara otomatis mencari dan membaca file konteks proyek esensial (Tech Stack, PRD, Roadmap, Blueprint). Ini menjamin bahwa pengembangan proyek aplikasi tetap lebih terarah, fokus, dan sangat mematuhi persyaratan serta keputusan arsitektur yang telah ditetapkan.
-
-### Kondisi Pemicu
-Aktifkan skill ini SEGERA ketika:
-- Ini adalah pesan pertama dari sesi percakapan baru.
-- Pengguna berkata "mulai sesi", "inisialisasi proyek", atau "muat konteks".
-- AI menyadari bahwa ia kekurangan konteks tingkat tinggi dari repositori saat ini.
-
-### Protokol Eksekusi
-
-Saat dipicu, Anda HARUS melakukan langkah-langkah berikut sebelum menjawab permintaan utama pengguna atau menulis kode apa pun:
-
-1. **Temukan File Dokumentasi Kunci:**
-   Gunakan alat pencarian file Anda (`list_dir`, `grep_search`, atau `view_file`) untuk mencari file berikut di root proyek atau folder `.docs/`:
-   - `PRD.md` (Product Requirements Document)
-   - `ROADMAP.md` atau `ROADMAP.txt`
-   - `BLUEPRINT.md` atau `ARCHITECTURE.md`
-   - `TECH_STACK.md`, `package.json`, `go.mod`, `Cargo.toml`, atau `requirements.txt` (untuk mengidentifikasi tech stack)
-
-2. **Baca dan Pahami Konteks:**
-   - Baca isi dari file-file yang ditemukan.
-   - Pahami tujuan utama proyek, fase saat ini di roadmap, batasan arsitektur (blueprint), dan tech stack spesifik yang digunakan.
-
-3. **Konfirmasi dan Selaraskan:**
-   - Berikan konfirmasi singkat kepada pengguna bahwa konteks proyek telah berhasil dimuat.
-   - Sebutkan Tech Stack saat ini dan tujuan langsung berdasarkan Roadmap/PRD.
-   - Lanjutkan dengan menjawab permintaan pengguna yang sebenarnya menggunakan konteks yang baru dimuat.
+---
+
+# Session Context Loader
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
+### Description
+This skill ensures that the AI agent is always aligned with the project's core documentation. At the beginning of every new conversation session, it automatically searches for and reads essential project context files (Tech Stack, PRD, Roadmap, Blueprint). This guarantees that development remains focused, directed, and strictly adheres to established requirements and architectural decisions.
+
+### Trigger Conditions
+Activate this skill IMMEDIATELY when:
+- It is the very first message of a new conversation session.
+- The user says "start session", "initialize project", or "load context".
+- The AI realizes it lacks the high-level context of the current repository.
+
+### Execution Protocol
+
+When triggered, you MUST perform the following steps before answering the user's primary request or writing any code:
+
+1. **Locate Key Documentation Files:**
+   Use your file search tools (`list_dir`, `grep_search`, or `view_file`) to look for the following files in the project root or `.docs/` folder:
+   - `PRD.md` (Product Requirements Document)
+   - `ROADMAP.md` or `ROADMAP.txt`
+   - `BLUEPRINT.md` or `ARCHITECTURE.md`
+   - `TECH_STACK.md`, `package.json`, `go.mod`, `Cargo.toml`, or `requirements.txt` (to identify the tech stack)
+
+2. **Read and Internalize Context:**
+   - Read the contents of the found files.
+   - Understand the project's primary goal, current phase in the roadmap, architectural constraints (blueprint), and the specific tech stack being used.
+
+3. **Acknowledge and Align:**
+   - Briefly acknowledge to the user that the project context has been loaded successfully.
+   - State the current Tech Stack and the immediate goal based on the Roadmap/PRD.
+   - Proceed with addressing the user's actual request using the newly loaded context.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
+### Deskripsi
+Skill ini memastikan bahwa agen AI selalu selaras dengan dokumentasi inti proyek. Di awal setiap sesi percakapan baru, agen akan secara otomatis mencari dan membaca file konteks proyek esensial (Tech Stack, PRD, Roadmap, Blueprint). Ini menjamin bahwa pengembangan proyek aplikasi tetap lebih terarah, fokus, dan sangat mematuhi persyaratan serta keputusan arsitektur yang telah ditetapkan.
+
+### Kondisi Pemicu
+Aktifkan skill ini SEGERA ketika:
+- Ini adalah pesan pertama dari sesi percakapan baru.
+- Pengguna berkata "mulai sesi", "inisialisasi proyek", atau "muat konteks".
+- AI menyadari bahwa ia kekurangan konteks tingkat tinggi dari repositori saat ini.
+
+### Protokol Eksekusi
+
+Saat dipicu, Anda HARUS melakukan langkah-langkah berikut sebelum menjawab permintaan utama pengguna atau menulis kode apa pun:
+
+1. **Temukan File Dokumentasi Kunci:**
+   Gunakan alat pencarian file Anda (`list_dir`, `grep_search`, atau `view_file`) untuk mencari file berikut di root proyek atau folder `.docs/`:
+   - `PRD.md` (Product Requirements Document)
+   - `ROADMAP.md` atau `ROADMAP.txt`
+   - `BLUEPRINT.md` atau `ARCHITECTURE.md`
+   - `TECH_STACK.md`, `package.json`, `go.mod`, `Cargo.toml`, atau `requirements.txt` (untuk mengidentifikasi tech stack)
+
+2. **Baca dan Pahami Konteks:**
+   - Baca isi dari file-file yang ditemukan.
+   - Pahami tujuan utama proyek, fase saat ini di roadmap, batasan arsitektur (blueprint), dan tech stack spesifik yang digunakan.
+
+3. **Konfirmasi dan Selaraskan:**
+   - Berikan konfirmasi singkat kepada pengguna bahwa konteks proyek telah berhasil dimuat.
+   - Sebutkan Tech Stack saat ini dan tujuan langsung berdasarkan Roadmap/PRD.
+   - Lanjutkan dengan menjawab permintaan pengguna yang sebenarnya menggunakan konteks yang baru dimuat.

package/skills/session-handoff-resume/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: session-handoff-resume
 description: "Skill to save ultra-compact project checkpoints and seamlessly resume work across accounts or new chat sessions with minimum token consumption / Skill untuk menyimpan checkpoint proyek yang super ringkas dan melanjutkan pekerjaan secara efisien saat ganti akun/sesi tanpa boros token."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Session Handoff & Resume (2026 — Cross-Model Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 Saves ultra-compact project checkpoints and enables seamless work resumption across new chat sessions, different accounts, or different AI models (Gemini, Claude, GPT). Designed for minimum token consumption while preserving full context needed for continuation.
 
@@ -113,6 +116,9 @@ Proactively offer to create a checkpoint when:
 <a name="bahasa-indonesia"></a>
 ## Bahasa Indonesia
 
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
+
 ### Deskripsi
 Menyimpan checkpoint proyek yang ultra-ringkas dan memungkinkan kelanjutan pekerjaan yang mulus di sesi chat baru, akun yang berbeda, atau model AI yang berbeda (Gemini, Claude, GPT). Dirancang untuk konsumsi token minimum sambil mempertahankan konteks penuh yang diperlukan untuk kelanjutan.