vibes-plug 2.5.0 → 2.14.1

package/skills/synthetic-data-finetuning-expert/SKILL.md

@@ -0,0 +1,155 @@
+---
+name: synthetic-data-finetuning-expert
+description: "Expert guide for synthetic dataset generation, LLM-as-a-judge filtering, QLoRA fine-tuning (Unsloth), DPO alignment, and GGUF/Ollama export for local SLMs / Panduan ahli generasi data sintetis, fine-tuning QLoRA, DPO, dan ekspor GGUF/Ollama."
+author: vibes-plug-swarm
+---
+
+# Synthetic Data & Fine-Tuning Expert (Custom Domain SLMs)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with domain skills like `local-slm-edge-ai-expert`, `ai-prompt-engineering-expert`, `ai-evals-benchmark-expert`, `python-programming-expert`, and `ai-cost-token-optimizer` to build high-performance, cost-effective domain models.
+
+### Description
+Production-grade guide for generating synthetic training datasets, curating high-signal instruction pairs, executing Parameter-Efficient Fine-Tuning (QLoRA / LoRA) with **Unsloth** and Hugging Face TRL, performing Direct Preference Optimization (DPO), and quantizing custom Small Language Models (SLMs) to GGUF for edge or on-premise execution.
+
+**Swarm Synergy:** Within the **AI Engineering Swarm**, this skill serves as the Model Specialization Lead. When frontier API costs or latency become prohibitive, it trains, aligns, and deploys hyper-efficient domain SLMs (1B–8B parameters) in Phase 4.
+
+### Trigger Conditions
+- Generating domain-specific synthetic training data from seed documents, codebases, or APIs.
+- Filtering low-quality or hallucinated synthetic data using LLM-as-a-judge curation pipelines.
+- Fine-tuning open-weights models (Llama 3.3, Qwen 2.5, Mistral) on custom tasks using 4-bit QLoRA.
+- Aligning model outputs using Direct Preference Optimization (DPO) to enforce specific response styles.
+- Quantizing fine-tuned models to GGUF (q4_k_m, q8_0) for zero-latency local inference with Ollama or llama.cpp.
+
+### Synthetic Data & Fine-Tuning Lifecycle
+
+```
+1. SEED EXTRACTION & SYNTHESIS
+   [Raw Docs / Codebase] ──► [Frontier LLM / Distilabel] ──► Raw Instruction Pairs (10k+)
+
+2. QUALITY FILTERING (LLM-AS-A-JUDGE)
+   Raw Instruction Pairs ──► [Rubric Scorer / De-duplication] ──► Curated Gold Dataset (2k-5k)
+
+3. 4-BIT QLORA FINE-TUNING (UNSLOTH)
+   Base Model (e.g. Qwen 2.5-Coder) + LoRA Adapters ──► SFT / DPO Training Loop
+
+4. QUANTIZATION & LOCAL DEPLOYMENT
+   Merged 16-bit Weights ──► [llama.cpp GGUF Export] ──► Local Ollama Service (<50ms latency)
+```
+
+### Core Implementation Guidelines
+
+#### 1. Synthetic Instruction Generation & Rejection Sampling
+Use frontier models to generate input-output pairs with strict rejection criteria:
+```python
+from pydantic import BaseModel, Field
+from openai import OpenAI
+import json
+
+client = OpenAI()
+
+class SyntheticInstructionPair(BaseModel):
+    user_instruction: str = Field(description="Realistic developer query")
+    input_context: str = Field(description="Code snippet or API contract")
+    ground_truth_response: str = Field(description="Flawless, production-grade output")
+    quality_score: int = Field(ge=1, le=5, description="Self-evaluated quality score")
+
+def generate_synthetic_samples(seed_text: str) -> list[SyntheticInstructionPair]:
+    response = client.beta.chat.completions.parse(
+        model="gpt-4o-mini",
+        messages=[
+            {"role": "system", "content": "Generate 5 diverse, hard edge-case instruction pairs based on the seed code."},
+            {"role": "user", "content": seed_text}
+        ],
+        response_format=SyntheticInstructionPair,
+    )
+    # Filter out anything below score 4 (Rejection Sampling)
+    return [sample for sample in [response.choices[0].message.parsed] if sample.quality_score >= 4]
+```
+
+#### 2. High-Speed 4-Bit QLoRA with Unsloth
+Fine-tune on consumer GPUs (e.g., RTX 3090/4090 or single A10G) with 5x faster throughput:
+```python
+from unsloth import FastLanguageModel
+import torch
+from trl import SFTTrainer
+from transformers import TrainingArguments
+
+# 1. Load Model & Tokenizer in 4-bit
+max_seq_length = 2048
+model, tokenizer = FastLanguageModel.from_pretrained(
+    model_name="unsloth/Qwen2.5-Coder-7B-Instruct-bnb-4bit",
+    max_seq_length=max_seq_length,
+    load_in_4bit=True,
+)
+
+# 2. Add LoRA Adapters
+model = FastLanguageModel.get_peft_model(
+    model,
+    r=16,
+    target_modules=["q_proj", "k_proj", "v_proj", "o_proj", "gate_proj", "up_proj", "down_proj"],
+    lora_alpha=16,
+    lora_dropout=0, # Optimized 0 dropout for Unsloth
+    bias="none",
+)
+
+# 3. Supervised Fine-Tuning (SFT)
+trainer = SFTTrainer(
+    model=model,
+    tokenizer=tokenizer,
+    train_dataset=dataset,
+    dataset_text_field="text",
+    max_seq_length=max_seq_length,
+    args=TrainingArguments(
+        per_device_train_batch_size=2,
+        gradient_accumulation_steps=4,
+        warmup_steps=10,
+        max_steps=100,
+        learning_rate=2e-4,
+        fp16=not torch.cuda.is_bf16_supported(),
+        bf16=torch.cuda.is_bf16_supported(),
+        logging_steps=1,
+        output_dir="outputs",
+    ),
+)
+trainer.train()
+```
+
+#### 3. GGUF Export for Local Ollama Deployment
+Export merged model to 4-bit or 8-bit quantized GGUF format:
+```python
+# Save to 16bit or GGUF directly
+model.save_pretrained_gguf("custom-domain-coder", tokenizer, quantization_method="q4_k_m")
+
+# Generate Modelfile for Ollama:
+# FROM ./custom-domain-coder-q4_k_m.gguf
+# PARAMETER temperature 0.2
+# SYSTEM You are an expert domain coder.
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `local-slm-edge-ai-expert`, `ai-prompt-engineering-expert`, `ai-evals-benchmark-expert`, `python-programming-expert`, dan `ai-cost-token-optimizer` untuk membangun model spesialis domain dengan performa tinggi dan biaya hemat.
+
+### Deskripsi
+Panduan produksi untuk menghasilkan dataset pelatihan sintetis, mengurasi pasangan instruksi bernilai tinggi, mengeksekusi Parameter-Efficient Fine-Tuning (QLoRA / LoRA) dengan **Unsloth** dan Hugging Face TRL, menerapkan Direct Preference Optimization (DPO), dan mengkuantisasi Small Language Models (SLM) kustom ke format GGUF untuk inferensi lokal atau on-premise berlatensi ultra-rendah.
+
+**Sinergi Swarm:** Di dalam **AI Engineering Swarm**, skill ini memegang peranan sebagai Pemimpin Spesialisasi Model. Ketika biaya API atau latensi model cloud frontier terlalu tinggi, skill ini melatih, menyelaraskan (*align*), dan men-deploy SLM domain yang sangat efisien (1B–8B parameter) pada Fase 4.
+
+### Kondisi Pemicu
+- Menghasilkan data pelatihan sintetis spesifik domain dari dokumen panduan, codebase, atau skema API.
+- Menyaring data sintetis berkualitas rendah menggunakan pipeline penilaian otomatis *LLM-as-a-judge*.
+- Melakukan fine-tuning model berbobot terbuka (Llama 3.3, Qwen 2.5, Mistral) dengan QLoRA 4-bit secara hemat memori VRAM.
+- Menyelaraskan respon model dengan Direct Preference Optimization (DPO) agar mematuhi aturan format dan gaya tertentu.
+- Mengkuantisasi model hasil fine-tuning ke format GGUF (q4_k_m, q8_0) untuk inferensi lokal instan di Ollama atau llama.cpp.

package/skills/tailwind-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: tailwind-expert
-description: "Deep guide for Tailwind CSS v4, CSS-first configuration, theme customization, and responsive design / Panduan mendalam untuk Tailwind CSS v4, CSS-first configuration, theme kustomisasi, dan responsive design."
-author: "Roedy Rustam"
+description: "Expert guide for Tailwind CSS v4, CSS-first configuration, @theme customization, and modern responsive design / Panduan ahli untuk Tailwind CSS v4, konfigurasi CSS-first, kustomisasi @theme, dan desain responsif modern."
+author: "Roedy Rustam"
 ---
 
 # Tailwind CSS Expert (v4 Edition)
@@ -14,134 +14,66 @@ author: "Roedy Rustam"
 ## English
 
 ### Description
-Deep expert guide for **Tailwind CSS v4** — covering the new CSS-first configuration model, `@theme` directive for design tokens, `@plugin` for plugins, 3D transforms, gradient improvements, and migration from v3.
+Strict guidelines and best practices for Tailwind CSS v4. Enforces the CSS-first configuration model, `@theme` token definitions, dynamic utilities, and performance optimization via Lightning CSS.
 
 ### Trigger Conditions
-- Setting up or configuring a new Tailwind CSS v4 project.
-- Defining design tokens via `@theme` directive in CSS.
-- Migrating from Tailwind CSS v3 to v4.
-- Using new v4 utilities: 3D transforms, `field-sizing`, color mix functions.
-- Registering custom plugins with `@plugin` directive.
+- Scaffold or configure a Tailwind CSS v4 project.
+- Migrate a codebase from Tailwind CSS v3 to v4.
+- Implement design tokens via `@theme`.
+- Apply 3D transforms, CSS container queries, or `field-sizing`.
 
-### Tailwind v4 — The CSS-First Paradigm Shift
+## Orchestration & Integration
+Integrates tightly with the following skills:
+- **`senior-frontend`**: Feeds modern CSS capabilities into Next.js/React component architecture.
+- **`ui-components-expert`**: Provides the styling primitives for Radix/shadcn-style components.
+- **`design-system-architect`**: Establishes the core tokens mapped inside `@theme`.
 
-Tailwind v4 eliminates `tailwind.config.js` entirely. All configuration happens in CSS:
+### Execution Standards
+
+#### 1. CSS-First Architecture
+Do NOT create `tailwind.config.js`. Define all configuration inside CSS using the `@theme` directive.
 
 ```css
 /* app/globals.css */
 @import "tailwindcss";
 
-/* Design tokens — replaces tailwind.config.js theme */
 @theme {
-  /* Colors using OKLCH for wide-gamut displays */
+  /* OKLCH Colors for wide-gamut displays */
   --color-brand-50: oklch(97% 0.02 250);
   --color-brand-500: oklch(55% 0.2 250);
-  --color-brand-900: oklch(20% 0.1 250);
 
   /* Typography */
-  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace;
-
-  /* Spacing & Sizing */
-  --spacing-18: 4.5rem;
-  --spacing-112: 28rem;
+  --font-sans: "Inter Variable", system-ui, sans-serif;
 
-  /* Custom animations */
-  --animate-slide-in: slide-in 0.3s ease-out;
-  --animate-fade-up: fade-up 0.4s ease-out;
-
-  /* Breakpoints */
+  /* Custom breakpoints */
   --breakpoint-3xl: 112rem;
 }
 
-/* Register plugins via @plugin directive */
+/* Register plugins */
 @plugin "@tailwindcss/typography";
-@plugin "@tailwindcss/forms";
-@plugin "./plugins/animations.js";
-
-/* Custom keyframes */
-@keyframes slide-in {
-  from { transform: translateX(-100%); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-@keyframes fade-up {
-  from { transform: translateY(16px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-```
-
-### New Utilities in Tailwind v4
-
-#### 3D Transforms
-```html
-<!-- 3D perspective and rotation -->
-<div class="perspective-1000">
-  <div class="rotate-x-12 rotate-y-6 transform-3d hover:rotate-y-0 transition-transform duration-500">
-    Card content
-  </div>
-</div>
-
-<!-- perspective-{value}: sets perspective on parent -->
-<!-- rotate-x-{deg}, rotate-y-{deg}: 3D rotation -->
-<!-- transform-3d: enables 3D transform context -->
-<!-- backface-visible, backface-hidden: card flip effects -->
-```
-
-#### Color Mix & Relative Colors
-```html
-<!-- Mix colors at the utility level -->
-<div class="bg-brand-500/50">          <!-- 50% opacity -->
-<div class="text-[color-mix(in_oklch,blue_70%,white)]">  <!-- CSS color-mix -->
-<div class="border-brand-500 hover:border-brand-700">
-```
-
-#### Container Queries
-```html
-<!-- Responsive to parent container size, not viewport -->
-<div class="@container">
-  <div class="@sm:grid-cols-2 @lg:grid-cols-3 grid grid-cols-1">
-    <!-- Adapts to container width, not screen width -->
-  </div>
-</div>
-```
-
-#### `field-sizing` for Auto-Resizing Textareas
-```html
-<textarea class="field-sizing-content resize-none min-h-20 max-h-64">
-  Auto-resizes to fit content — no JavaScript needed!
-</textarea>
-```
-
-### Migration from v3 to v4
-
-#### Automated Migration Tool
-```bash
-npx @tailwindcss/upgrade
-```
-
-#### Key Breaking Changes
-| v3 | v4 Equivalent |
-|---|---|
-| `tailwind.config.js` | `@theme {}` in CSS |
-| `theme.extend.colors` | `--color-*` CSS vars in `@theme` |
-| `plugins: [require('@tailwindcss/typography')]` | `@plugin "@tailwindcss/typography"` |
-| `darkMode: 'class'` | `@variant dark (&:where(.dark, .dark *))` |
-| `screens` in config | `--breakpoint-*` in `@theme` |
-| `content` array | Auto-detected (no config needed) |
-
-#### Custom Variants in v4
-```css
-/* Custom variants — replaces addVariant() in plugins */
-@variant hocus (&:hover, &:focus);
-@variant dark (&:where(.dark, .dark *));
-@variant reduced-motion (@media (prefers-reduced-motion: reduce));
 ```
 
-### Performance Tips
-- Tailwind v4 uses **Lightning CSS** for transforms — 4x faster builds than v3 with PostCSS.
-- CSS bundle is now fully tree-shaken — only styles used in your HTML/JSX are generated.
-- Use `@layer utilities` for custom utilities that need Tailwind's specificity.
-- Avoid `@apply` in performance-critical loops — prefer utility classes directly in HTML.
+#### 2. Advanced Utilities
+Utilize v4-native features instead of custom CSS where possible:
+- **3D Transforms**: Use `perspective-1000`, `rotate-x-12`, `transform-3d`, `backface-hidden`.
+- **Color Mix**: Use inline mixing: `text-[color-mix(in_oklch,blue_70%,white)]`.
+- **Container Queries**: Use `@container` on the parent, `@sm:grid-cols-2` on children.
+- **Auto-sizing**: Use `field-sizing-content` for dynamically sizing textareas.
+
+#### 3. Migration (v3 to v4)
+When upgrading older codebases:
+1. Run `npx @tailwindcss/upgrade` automatically.
+2. Manually verify `tailwind.config.js` logic is perfectly translated to `@theme` CSS variables.
+3. Replace deprecated `addVariant` plugin code with `@variant` CSS directives:
+   ```css
+   @variant hocus (&:hover, &:focus);
+   @variant dark (&:where(.dark, .dark *));
+   ```
+
+#### 4. Performance Directives
+- **Zero Configuration**: Rely on v4's automatic content detection. Do not manually specify content paths.
+- **Specificity**: Use `@layer utilities` strictly when custom CSS requires Tailwind's specificity tier.
+- **No `@apply` Abuse**: Avoid `@apply` in loops or highly repeated components; use HTML utility classes to leverage Lightning CSS tree-shaking.
 
 ---
 
@@ -149,40 +81,60 @@ npx @tailwindcss/upgrade
 ## Bahasa Indonesia
 
 ### Deskripsi
-Panduan mendalam untuk **Tailwind CSS v4** — mencakup model konfigurasi CSS-first baru, direktif `@theme` untuk design token, `@plugin` untuk plugin, 3D transform, peningkatan gradient, dan migrasi dari v3.
+Panduan ketat dan praktik terbaik untuk Tailwind CSS v4. Memaksa penggunaan model konfigurasi CSS-first, definisi token `@theme`, utilitas dinamis, dan optimasi performa melalui Lightning CSS.
 
 ### Kondisi Pemicu
-- Menyiapkan atau mengonfigurasi proyek Tailwind CSS v4 baru.
-- Mendefinisikan design token via direktif `@theme` di CSS.
-- Migrasi dari Tailwind CSS v3 ke v4.
-- Menggunakan utilitas v4 baru: 3D transform, `field-sizing`, fungsi color mix.
-- Mendaftarkan plugin kustom dengan direktif `@plugin`.
-
-### Tailwind v4 — Pergeseran Paradigma CSS-First
+- Menyiapkan atau mengonfigurasi proyek Tailwind CSS v4.
+- Migrasi codebase dari Tailwind CSS v3 ke v4.
+- Implementasi design token via `@theme`.
+- Menggunakan 3D transform, container query, atau `field-sizing`.
 
-Tailwind v4 menghilangkan `tailwind.config.js` sepenuhnya. Semua konfigurasi dilakukan di CSS menggunakan direktif `@theme`. Plugin didaftarkan dengan `@plugin`. Breakpoint, warna, spacing, animasi — semuanya didefinisikan sebagai variabel CSS `--*` di dalam blok `@theme`.
+## Integrasi Orkestrasi
+Terintegrasi erat dengan skill berikut:
+- **`senior-frontend`**: Menyuplai kapabilitas CSS modern ke dalam arsitektur komponen Next.js/React.
+- **`ui-components-expert`**: Menyediakan primitif styling untuk komponen gaya Radix/shadcn.
+- **`design-system-architect`**: Membangun token utama yang dipetakan di dalam `@theme`.
 
-### Utilitas Baru di Tailwind v4
+### Standar Eksekusi
 
-#### 3D Transform
-Tailwind v4 menambahkan utilitas untuk 3D transform: `perspective-{nilai}`, `rotate-x-{derajat}`, `rotate-y-{derajat}`, `transform-3d`, `backface-visible`, `backface-hidden` — ideal untuk efek flip kartu dan galeri 3D.
+#### 1. Arsitektur CSS-First
+JANGAN membuat `tailwind.config.js`. Definisikan semua konfigurasi di dalam CSS menggunakan direktif `@theme`.
 
-#### Container Queries
-Gunakan `@container` dan utilitas `@sm:`, `@lg:` untuk membuat komponen yang responsif terhadap ukuran container induknya, bukan ukuran viewport.
+```css
+/* app/globals.css */
+@import "tailwindcss";
 
-#### `field-sizing` untuk Textarea Auto-Resize
-Kelas `field-sizing-content` membuat textarea otomatis menyesuaikan ukurannya dengan konten — tanpa JavaScript.
+@theme {
+  /* Warna OKLCH untuk layar wide-gamut */
+  --color-brand-50: oklch(97% 0.02 250);
+  --color-brand-500: oklch(55% 0.2 250);
 
-### Migrasi dari v3 ke v4
+  /* Tipografi */
+  --font-sans: "Inter Variable", system-ui, sans-serif;
+}
 
-Gunakan alat migrasi otomatis `npx @tailwindcss/upgrade` untuk konversi dasar. Perubahan kunci:
-- `tailwind.config.js` → `@theme {}` di CSS
-- `plugins: [require('...')]` → `@plugin "..."`
-- `darkMode: 'class'` → `@variant dark`
-- Array `content` → Deteksi otomatis (tidak perlu konfigurasi)
+/* Registrasi plugin */
+@plugin "@tailwindcss/typography";
+```
 
-### Tip Performa
-- Tailwind v4 menggunakan **Lightning CSS** — build 4x lebih cepat dari v3 dengan PostCSS.
-- Bundle CSS sepenuhnya di-tree-shake — hanya style yang digunakan yang dihasilkan.
-- Gunakan `@layer utilities` untuk utilitas kustom yang membutuhkan spesifisitas Tailwind.
-- Hindari `@apply` di loop kritis performa — gunakan kelas utilitas langsung di HTML.
+#### 2. Utilitas Lanjutan
+Gunakan fitur bawaan v4 alih-alih CSS kustom:
+- **3D Transform**: Gunakan `perspective-1000`, `rotate-x-12`, `transform-3d`, `backface-hidden`.
+- **Color Mix**: Gunakan `text-[color-mix(in_oklch,blue_70%,white)]`.
+- **Container Queries**: Gunakan `@container` pada induk, `@sm:grid-cols-2` pada anak.
+- **Auto-sizing**: Gunakan `field-sizing-content` untuk textarea agar ukurannya otomatis menyesuaikan.
+
+#### 3. Migrasi (v3 ke v4)
+Saat memperbarui codebase lama:
+1. Jalankan `npx @tailwindcss/upgrade` secara otomatis.
+2. Verifikasi manual logika `tailwind.config.js` agar diterjemahkan sempurna ke variabel CSS `@theme`.
+3. Ganti plugin `addVariant` lama dengan direktif CSS `@variant`:
+   ```css
+   @variant hocus (&:hover, &:focus);
+   @variant dark (&:where(.dark, .dark *));
+   ```
+
+#### 4. Arahan Performa
+- **Konfigurasi Nol**: Andalkan deteksi konten otomatis v4. Jangan tentukan path konten secara manual.
+- **Spesifisitas**: Gunakan `@layer utilities` secara ketat hanya jika CSS kustom memerlukan tingkat spesifisitas Tailwind.
+- **Dilarang Menyalahgunakan `@apply`**: Hindari `@apply` pada loop atau komponen berulang; gunakan kelas utilitas di HTML untuk memaksimalkan tree-shaking Lightning CSS.

package/skills/tanstack-query-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: tanstack-query-expert
 description: "Advanced TanStack Query (v5) expert. Covers useSuspenseQuery, infinite scrolling, optimistic mutations, SSR/React Server Components hydration, and advanced cache invalidation / Pakar manajemen state asinkron menggunakan TanStack Query (React Query) v5 dan Next.js App Router (SSR)."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # TanStack Query Expert (v5 + TanStack Router/Start 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
 Production-grade TanStack Query (v5) mastery for modern React (v18/19) and Next.js (App Router) applications. Covers declarative data fetching, advanced cache invalidation, optimistic UI updates, Suspense boundaries, SSR hydration, and the new **TanStack Router** + **TanStack Start** ecosystem for full-stack type-safe applications.
 
@@ -151,6 +154,9 @@ export default async function UsersPage() {
 <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
 Penguasaan TanStack Query (v5) tingkat produksi untuk aplikasi React modern (v18/19) dan Next.js (App Router). Mencakup data fetching deklaratif, invalidasi cache lanjutan, optimistic UI, Suspense boundaries, hidrasi SSR, serta ekosistem **TanStack Router** + **TanStack Start** untuk aplikasi full-stack yang type-safe.
 

package/skills/tauri-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: tauri-expert
 description: "Expert skill for Tauri (v2) development, Rust backend, IPC, and security / Panduan ahli untuk pengembangan Tauri v2, Rust backend, IPC, dan keamanan."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Tauri Expert
@@ -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
 This skill provides best practice guidance for building cross-platform desktop and mobile applications using Tauri (specifically Tauri v2). It covers frontend integration with the Rust backend, Inter-Process Communication (IPC), state management, and security.
 
@@ -57,6 +60,9 @@ Active 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
 Skill ini memberikan panduan praktik terbaik (best practices) untuk membangun aplikasi desktop dan mobile lintas platform menggunakan Tauri (terutama Tauri v2). Skill ini mencakup integrasi frontend dengan backend Rust, Inter-Process Communication (IPC), manajemen state, serta keamanan.
 

package/skills/typescript-expert/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: typescript-expert
-description: "Expert guide for TypeScript 5.5+ advanced type system, strict mode, generics, utility types, branded types, inferred type predicates, isolated declarations, and type-safe architectural patterns / Panduan ahli untuk sistem tipe TypeScript 5.5+, mode strict, generics, utility types, branded types, inferred type predicates, isolated declarations, dan pola arsitektur type-safe."
-author: "Roedy Rustam"
+description: "Expert guide for TypeScript 5.8+ advanced type system, strict mode, generics, utility types, branded types, inferred type predicates, isolated declarations, and type-safe architectural patterns / Panduan ahli untuk sistem tipe TypeScript 5.8+, mode strict, generics, utility types, branded types, inferred type predicates, isolated declarations, dan pola arsitektur type-safe."
+author: "Roedy Rustam"
 ---
 
-# TypeScript Expert (TypeScript 5.5+ Edition)
+# TypeScript Expert (TypeScript 5.8+ Edition)
 
 [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
 
@@ -13,8 +13,11 @@ 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
-Expert-level TypeScript development covering the advanced type system, strict mode enforcement, generic programming, utility types, branded types, and type-safe patterns for production applications. Targets **TypeScript 5.5+** features including inferred type predicates, isolated declarations, `NoInfer`, `using` declarations, variadic tuple improvements, and `const` type parameters.
+Expert-level TypeScript development covering the advanced type system, strict mode enforcement, generic programming, utility types, branded types, and type-safe patterns for production applications. Targets **TypeScript 5.8+** features including inferred type predicates, isolated declarations, `NoInfer`, `using` declarations, variadic tuple improvements, and `const` type parameters.
 
 ### Trigger Conditions
 - Writing TypeScript with advanced generic constraints.
@@ -66,7 +69,7 @@ const b = identity({ x: 10 });        // type: { readonly x: 10 }
 
 ---
 
-### TypeScript 5.5 / 5.6 — New Features
+### TypeScript 5.5 - 5.8 — New Features
 
 #### Inferred Type Predicates (TS 5.5)
 ```typescript
@@ -299,8 +302,11 @@ config.port.toFixed(2); // Works! Literal type preserved.
 <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
-Panduan TypeScript level ahli mencakup sistem tipe tingkat lanjut, penerapan strict mode, pemrograman generik, utility types, branded types, dan pola type-safe untuk aplikasi produksi. Menargetkan fitur **TypeScript 5.5+** termasuk inferred type predicates, isolated declarations, `NoInfer`, deklarasi `using`, peningkatan variadic tuple, dan parameter tipe `const`.
+Panduan TypeScript level ahli mencakup sistem tipe tingkat lanjut, penerapan strict mode, pemrograman generik, utility types, branded types, dan pola type-safe untuk aplikasi produksi. Menargetkan fitur **TypeScript 5.8+** termasuk inferred type predicates, isolated declarations, `NoInfer`, deklarasi `using`, peningkatan variadic tuple, dan parameter tipe `const`.
 
 ### Kondisi Pemicu
 - Menulis TypeScript dengan generic constraints tingkat lanjut.

package/skills/ui-ux-pro-max/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: ui-ux-pro-max
 description: "Comprehensive design guide & BM25 search engine for web and mobile applications across 11 tech stacks / Panduan desain komprehensif & mesin pencari BM25 untuk aplikasi web dan mobile di 11 tech stack."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # UI/UX Pro Max - Design Intelligence System
@@ -13,8 +13,11 @@ 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
-UI/UX Pro Max is a comprehensive design intelligence engine equipped with an offline BM25 search index covering color palettes, typography, responsive patterns, icon sets, chart recommendations, UX guidelines, and stack-specific best practices across **11 technology stacks**.
+UI/UX Pro Max is a comprehensive design intelligence engine equipped with an offline BM25 search index covering color palettes, typography, responsive patterns, icon sets, chart recommendations, UX guidelines, **Material Design 3 (M3)**, and stack-specific best practices across **11 technology stacks**.
 
 ### Trigger Conditions
 Reference these guidelines or run the CLI search engine when:
@@ -55,6 +58,8 @@ python scripts/search.py "<query>" --domain <domain> --max-results 3
   - `icons`: Icon usage guidance, SVG libraries (Lucide, Heroicons), and code imports
   - `react`: React & Next.js performance optimizations, re-render fixes & dynamic imports
   - `web`: Web interface guidelines (ARIA, focus traps, virtual list, form inputs)
+  - `m3`: Material Design 3 specific design tokens, color roles, elevation, and component specs
+  - `preset-monday`: Monday.com spacious SaaS aesthetic (Vibrant Blue `#0073ea`, Clean White `#FFFFFF` + Light Grays `#F9F9F9`/`#F5F6F8`, Dark Footer `#111111`, Figtree/Inter fonts, 12-16px card radius, 80-120px vertical spacing)
 
 *Example:* `python scripts/search.py "fintech dark theme" --domain color`
 
@@ -92,6 +97,7 @@ python scripts/search.py "<query>" --stack <stack> --max-results 3
 - **Dark Mode**: High contrast foreground elements over dark slate/gray backgrounds; avoid pure black `#000000` text containers unless requested.
 
 #### 5. Dashboard & Information Hierarchy
+- **Material Design 3 (M3) Integration**: Follow M3 Layouts (compact, medium, expanded). Use M3 elevation for layering instead of heavy borders.
 - **Layout Flow**: KPI summary cards top -> Trend charts middle -> Detailed data tables bottom.
 - **Visual Grid**: Consistent gaps/padding (16px / 24px). Clean subtle borders instead of heavy black dividers.
 - **Data Viz**: Maximum 3–5 coordinated colors in graphs. Responsive tooltips and legend alignment.
@@ -110,8 +116,11 @@ python scripts/search.py "<query>" --stack <stack> --max-results 3
 <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
-UI/UX Pro Max adalah mesin kecerdasan desain komprehensif yang dilengkapi indeks pencarian BM25 offline. Mencakup palet warna, tipografi, pola tata letak responsif, rekomendasi ikon, grafik visualisasi data, pedoman UX, serta praktik terbaik untuk **11 tumpukan teknologi (technology stacks)**.
+UI/UX Pro Max adalah mesin kecerdasan desain komprehensif yang dilengkapi indeks pencarian BM25 offline. Mencakup palet warna, tipografi, pola tata letak responsif, rekomendasi ikon, grafik visualisasi data, pedoman UX, **Material Design 3 (M3)**, serta praktik terbaik untuk **11 tumpukan teknologi (technology stacks)**.
 
 ### Kondisi Pemicu
 Gunakan pedoman ini atau jalankan mesin pencari CLI ketika:
@@ -151,6 +160,8 @@ python scripts/search.py "<kueri>" --domain <domain> --max-results 3
   - `icons`: Panduan penggunaan ikon, pustaka SVG (Lucide, Heroicons), & import kode
   - `react`: Optimasi performa React & Next.js, perbaikan re-render & dynamic import
   - `web`: Pedoman antarmuka web (ARIA, focus trap, virtual list, input form)
+  - `m3`: Token desain spesifik Material Design 3, peran warna, elevasi, dan spesifikasi komponen
+  - `preset-monday`: Estetika SaaS lapang ala Monday.com (Biru Cerah `#0073ea`, Putih Bersih `#FFFFFF` + Abu-abu Terang `#F9F9F9`/`#F5F6F8`, Footer Gelap `#111111`, font Figtree/Inter, radius kartu 12-16px, jarak seksi vertikal 80-120px)
 
 *Contoh:* `python scripts/search.py "fintech dark theme" --domain color`
 
@@ -188,6 +199,7 @@ python scripts/search.py "<kueri>" --stack <stack> --max-results 3
 - **Mode Gelap**: Kontras tinggi antara elemen latar depan dengan latar belakang gelap; hindari kontainer teks serba hitam pekat `#000000` kecuali diminta khusus.
 
 #### 5. Dashboard & Hierarki Informasi
+- **Integrasi Material Design 3 (M3)**: Ikuti tata letak M3 (compact, medium, expanded). Gunakan elevasi M3 untuk pelapisan alih-alih border tebal.
 - **Alur Tata Letak**: Kartu ringkasan KPI di atas -> Grafik tren di tengah -> Tabel detail data di bawah.
 - **Grid Visual**: Konsistensi gap/padding (16px / 24px). Gunakan border halus daripada pembatas tebal hitam.
 - **Visualisasi Data**: Maksimal 3–5 warna terkoordinasi dalam grafik. Tooltip responsif & perataan legenda yang rapi.
@@ -200,3 +212,13 @@ python scripts/search.py "<kueri>" --stack <stack> --max-results 3
 - [ ] **Kontras**: Rasio kontras teks minimal 4.5:1 pada mode terang. Border terlihat di kedua mode (terang & gelap).
 - [ ] **Tata Letak & Responsif**: Diuji pada breakpoint 375px, 768px, 1024px, 1440px. Tidak ada scroll horizontal tak disengaja pada perangkat mobile.
 - [ ] **Aksesibilitas**: Semua gambar memiliki `alt` text yang bermakna. Form input memiliki `<label>` terhubung atau `aria-label`.
+
+---
+### 🎨 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.