vibes-plug 2.14.1 → 3.9.0

package/skills/svelte-sveltekit-expert/SKILL.md

@@ -1,91 +1,92 @@
----
-name: svelte-sveltekit-expert
-description: "Expert guide for Svelte 5 (Runes) and SvelteKit 2+ — fine-grained reactivity, server-first architecture, form actions, and SSR/SSG / Panduan ahli Svelte 5 (Runes) dan SvelteKit 2+ — reaktivitas fine-grained, arsitektur server-first, form actions, dan SSR/SSG."
-author: "Roedy Rustam"
----
-
-# Svelte & SvelteKit Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-- **`tailwind-expert`**: Tailwind CSS v4 integration with SvelteKit.
-- **`performance-web-vitals`**: Svelte's compile-time optimizations and zero-overhead reactivity.
-- **`e2e-testing-expert`**: Playwright testing for SvelteKit applications.
-- **`typescript-expert`**: TypeScript integration with Svelte 5 Runes.
-
-### Description
-Expert guide for building high-performance applications with Svelte 5 and SvelteKit 2+. Covers Runes (`$state`, `$derived`, `$effect`, `$props`), server-first architecture, form actions, load functions, streaming, SSR/SSG/ISR rendering modes, and migration from Svelte 4.
-
-### Trigger Conditions
-- Building applications with Svelte or SvelteKit.
-- Migrating from Svelte 4 to Svelte 5 Runes.
-- Choosing between Svelte and React/Vue for a new project.
-- Implementing server-side rendering with SvelteKit.
-
----
-
-### Svelte 5 Runes
-
-```svelte
-<script lang="ts">
-  // Svelte 5 Runes — fine-grained reactivity
-  let count = $state(0);
-  let doubled = $derived(count * 2);
-
-  $effect(() => {
-    console.log(`Count changed to ${count}`);
-  });
-
-  // Props with Runes
-  let { title, onSubmit }: { title: string; onSubmit: (v: number) => void } = $props();
-</script>
-
-<h1>{title}</h1>
-<button onclick={() => count++}>Count: {count} (doubled: {doubled})</button>
-<button onclick={() => onSubmit(count)}>Submit</button>
-```
-
-### SvelteKit Server Patterns
-
-```typescript
-// src/routes/posts/+page.server.ts
-import type { PageServerLoad, Actions } from './$types';
-import { fail } from '@sveltejs/kit';
-
-export const load: PageServerLoad = async ({ fetch }) => {
-  const posts = await fetch('/api/posts').then((r) => r.json());
-  return { posts };
-};
-
-export const actions: Actions = {
-  create: async ({ request }) => {
-    const data = await request.formData();
-    const title = data.get('title');
-    if (!title) return fail(400, { error: 'Title required' });
-    // Create post...
-    return { success: true };
-  },
-};
-```
-
-## Orchestration & Integration
-- `tailwind-expert`, `performance-web-vitals`, `e2e-testing-expert`, `typescript-expert`
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan ahli untuk membangun aplikasi berperforma tinggi dengan Svelte 5 dan SvelteKit 2+. Mencakup Runes, arsitektur server-first, form actions, load functions, streaming, dan mode rendering SSR/SSG/ISR.
-
-### Kondisi Pemicu
-- Membangun aplikasi dengan Svelte atau SvelteKit.
-- Migrasi dari Svelte 4 ke Svelte 5 Runes.
-- Memilih antara Svelte dan React/Vue untuk proyek baru.
+---
+name: svelte-sveltekit-expert
+description: "Expert guide for Svelte 5 (Runes) and SvelteKit 2+ — fine-grained reactivity, server-first architecture, form actions, and SSR/SSG / Panduan ahli Svelte 5 (Runes) dan SvelteKit 2+ — reaktivitas fine-grained, arsitektur server-first, form actions, dan SSR/SSG."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Svelte & SvelteKit Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`tailwind-expert`**: Tailwind CSS v4 integration with SvelteKit.
+- **`performance-web-vitals`**: Svelte's compile-time optimizations and zero-overhead reactivity.
+- **`e2e-testing-expert`**: Playwright testing for SvelteKit applications.
+- **`typescript-expert`**: TypeScript integration with Svelte 5 Runes.
+
+### Description
+Expert guide for building high-performance applications with Svelte 5 and SvelteKit 2+. Covers Runes (`$state`, `$derived`, `$effect`, `$props`), server-first architecture, form actions, load functions, streaming, SSR/SSG/ISR rendering modes, and migration from Svelte 4.
+
+### Trigger Conditions
+- Building applications with Svelte or SvelteKit.
+- Migrating from Svelte 4 to Svelte 5 Runes.
+- Choosing between Svelte and React/Vue for a new project.
+- Implementing server-side rendering with SvelteKit.
+
+---
+
+### Svelte 5 Runes
+
+```svelte
+<script lang="ts">
+  // Svelte 5 Runes — fine-grained reactivity
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+
+  $effect(() => {
+    console.log(`Count changed to ${count}`);
+  });
+
+  // Props with Runes
+  let { title, onSubmit }: { title: string; onSubmit: (v: number) => void } = $props();
+</script>
+
+<h1>{title}</h1>
+<button onclick={() => count++}>Count: {count} (doubled: {doubled})</button>
+<button onclick={() => onSubmit(count)}>Submit</button>
+```
+
+### SvelteKit Server Patterns
+
+```typescript
+// src/routes/posts/+page.server.ts
+import type { PageServerLoad, Actions } from './$types';
+import { fail } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+  const posts = await fetch('/api/posts').then((r) => r.json());
+  return { posts };
+};
+
+export const actions: Actions = {
+  create: async ({ request }) => {
+    const data = await request.formData();
+    const title = data.get('title');
+    if (!title) return fail(400, { error: 'Title required' });
+    // Create post...
+    return { success: true };
+  },
+};
+```
+
+## Orchestration & Integration
+- `tailwind-expert`, `performance-web-vitals`, `e2e-testing-expert`, `typescript-expert`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi berperforma tinggi dengan Svelte 5 dan SvelteKit 2+. Mencakup Runes, arsitektur server-first, form actions, load functions, streaming, dan mode rendering SSR/SSG/ISR.
+
+### Kondisi Pemicu
+- Membangun aplikasi dengan Svelte atau SvelteKit.
+- Migrasi dari Svelte 4 ke Svelte 5 Runes.
+- Memilih antara Svelte dan React/Vue untuk proyek baru.

package/skills/svg-animation-motion-expert/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: svg-animation-motion-expert
 description: "Expert guide for web animations: SVG manipulation, Framer Motion 12+, GSAP 3, CSS Scroll-Driven Animations, and View Transitions API / Panduan ahli animasi web."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # SVG & Web Animation Motion Expert
@@ -112,4 +113,4 @@ Manfaatkan CSS modern (`animation-timeline: view()`) untuk mengikat animasi ke p
 ## Integrasi Orkestrasi
 - Bekerja sama dengan `ui-ux-pro-max` dan `monday-design-aesthetic` untuk menghidupkan desain statis.
 - Melengkapi `senior-frontend` dengan menangani lapisan pergerakan (motion layer) UI.
-- Terintegrasi dengan `seo-aeo-landing-page-writer` untuk merancang landing page yang memukau secara visual.
+- Terintegrasi dengan `seo-aeo-landing-page-writer` untuk merancang landing page yang memukau secara visual.

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

@@ -1,155 +1,156 @@
----
-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.
+---
+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
+version: "3.0.0"
+---
+
+# 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,8 @@
 ---
 name: tailwind-expert
 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"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Tailwind CSS Expert (v4 Edition)
@@ -18,14 +19,14 @@ Strict guidelines and best practices for Tailwind CSS v4. Enforces the CSS-first
 
 ### Trigger Conditions
 - Scaffold or configure a Tailwind CSS v4 project.
-- Migrate a codebase from Tailwind CSS v3 to v4.
+- Migrate a codebase from Tailwind CSS v4 to v4.
 - Implement design tokens via `@theme`.
 - Apply 3D transforms, CSS container queries, or `field-sizing`.
 
 ## 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, senior-frontend`**: Provides the styling primitives for Radix/shadcn-style components.
 - **`design-system-architect`**: Establishes the core tokens mapped inside `@theme`.
 
 ### Execution Standards
@@ -75,6 +76,34 @@ When upgrading older codebases:
 - **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.
 
+#### 5. Bootstrap to Tailwind Migration Guide
+1. **Analyze the Legacy Structure**:
+   - Identify the version of Bootstrap being used.
+   - Locate custom CSS files that override Bootstrap defaults.
+   - Identify interactive components (modals, dropdowns, tooltips, tabs, carousels) that rely on Bootstrap's JavaScript or jQuery.
+2. **Setup Modern Tools**:
+   - Ensure **Tailwind CSS v4** is properly set up in the project (e.g., via CDN for simple projects, or PostCSS/Vite for build steps).
+   - Inject **Alpine.js** via CDN or module bundler to handle interactivity.
+3. **Migration Strategy**:
+   - **Grid & Layout**: Convert Bootstrap grids (`container`, `row`, `col-*`) to Tailwind flexbox (`flex`, `flex-col`, `gap-*`) or CSS Grid (`grid`, `grid-cols-*`).
+   - **Spacing & Typography**: Map Bootstrap spacing (`m-3`, `p-4`) to Tailwind spacing (`m-4`, `p-6`—noting scale differences). Map typography utilities (`text-center`, `font-weight-bold`) to Tailwind equivalents (`text-center`, `font-bold`).
+   - **Colors**: Update Bootstrap semantic colors (`primary`, `success`, `danger`) to Tailwind color palettes (e.g., `blue-600`, `green-500`, `red-500`) or define custom themes in CSS variables for Tailwind v4.
+   - **Components**: Rebuild Bootstrap components (cards, buttons, alerts, navbars) using Tailwind utility classes to match or improve the original design.
+4. **Interactivity with Alpine.js**:
+   - Remove jQuery and Bootstrap JS dependencies.
+   - Replace interactive Bootstrap components with Alpine.js data and directives.
+   - **Dropdowns**: Use `x-data="{ open: false }"` and `@click="open = !open"`.
+   - **Modals**: Use Alpine.js to manage the open state and handle background overlays and click-away events (`@click.outside`).
+   - **Tabs**: Manage active tab state with `x-data="{ tab: 'home' }"`.
+5. **UI/UX Modernization & Skill Integration**:
+   - Do NOT just do a 1:1 translation of Bootstrap classes. The goal is to elevate the design.
+   - You MUST orchestrate and apply guidelines from other UI/UX skills (`ui-ux-expert`, `ui-ux-pro-max`, and `hig`).
+   - Implement Human Interface Guidelines (HIG) principles: Hierarchy, Harmony, and Consistency.
+   - Use vibrant colors, smooth micro-animations, glassmorphism (if appropriate), and modern typography to "WOW" the user.
+6. **Quality Assurance**:
+   - Verify that responsive design behaves correctly across breakpoints (`sm:`, `md:`, `lg:`).
+   - Ensure interactive components (modals, dropdowns) feel premium with Alpine.js transitions (`x-transition`).
+
 ---
 
 <a name="bahasa-indonesia"></a>
@@ -85,14 +114,14 @@ Panduan ketat dan praktik terbaik untuk Tailwind CSS v4. Memaksa penggunaan mode
 
 ### Kondisi Pemicu
 - Menyiapkan atau mengonfigurasi proyek Tailwind CSS v4.
-- Migrasi codebase dari Tailwind CSS v3 ke v4.
+- Migrasi codebase dari Tailwind CSS v4 ke v4.
 - Implementasi design token via `@theme`.
 - Menggunakan 3D transform, container query, atau `field-sizing`.
 
 ## 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, senior-frontend`**: Menyediakan primitif styling untuk komponen gaya Radix/shadcn.
 - **`design-system-architect`**: Membangun token utama yang dipetakan di dalam `@theme`.
 
 ### Standar Eksekusi
@@ -138,3 +167,31 @@ Saat memperbarui codebase lama:
 - **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.
+
+#### 5. Panduan Migrasi Bootstrap ke Tailwind
+1. **Analisis Struktur Lama**:
+   - Identifikasi versi Bootstrap yang digunakan.
+   - Temukan file CSS kustom yang menimpa (override) default Bootstrap.
+   - Identifikasi komponen interaktif (modal, dropdown, tooltip, tab, carousel) yang mengandalkan JavaScript Bootstrap atau jQuery.
+2. **Setup Tools Modern**:
+   - Pastikan **Tailwind CSS v4** disiapkan dengan benar di proyek (misalnya, melalui CDN untuk proyek sederhana, atau PostCSS/Vite jika ada build step).
+   - Masukkan **Alpine.js** melalui CDN atau module bundler untuk menangani interaktivitas.
+3. **Strategi Migrasi**:
+   - **Grid & Layout**: Ubah grid Bootstrap (`container`, `row`, `col-*`) menjadi flexbox Tailwind (`flex`, `flex-col`, `gap-*`) atau CSS Grid (`grid`, `grid-cols-*`).
+   - **Spacing & Tipografi**: Petakan spasi Bootstrap (`m-3`, `p-4`) ke Tailwind (`m-4`, `p-6`—perhatikan perbedaan skala). Petakan utilitas teks (`text-center`, `font-weight-bold`) ke padanan Tailwind (`text-center`, `font-bold`).
+   - **Warna**: Perbarui warna semantik Bootstrap (`primary`, `success`, `danger`) ke palet warna Tailwind (misal: `blue-600`, `green-500`, `red-500`) atau definisikan tema kustom di variabel CSS untuk Tailwind v4.
+   - **Komponen**: Bangun ulang komponen Bootstrap (card, button, alert, navbar) menggunakan kelas utilitas Tailwind untuk mencocokkan atau memperbaiki desain aslinya.
+4. **Interaktivitas dengan Alpine.js**:
+   - Hapus dependensi jQuery dan Bootstrap JS.
+   - Ganti komponen interaktif Bootstrap dengan data dan direktif Alpine.js.
+   - **Dropdown**: Gunakan `x-data="{ open: false }"` dan `@click="open = !open"`.
+   - **Modal**: Gunakan Alpine.js untuk mengelola state terbuka, overlay latar belakang, dan event klik di luar (`@click.outside`).
+   - **Tab**: Kelola state tab aktif dengan `x-data="{ tab: 'home' }"`.
+5. **Modernisasi UI/UX & Integrasi Skill**:
+   - JANGAN hanya menerjemahkan kelas Bootstrap 1:1. Tujuannya adalah meningkatkan kualitas desain.
+   - Anda WAJIB mengorkestrasi dan menerapkan pedoman dari skill UI/UX lainnya (`ui-ux-expert`, `ui-ux-pro-max`, dan `hig`).
+   - Terapkan prinsip Human Interface Guidelines (HIG): Hierarchy, Harmony, dan Consistency.
+   - Gunakan warna cerah, mikro-animasi halus, glassmorphism (jika sesuai), dan tipografi modern untuk memberikan kesan "WOW" pada pengguna.
+6. **Quality Assurance**:
+   - Verifikasi bahwa desain responsif berfungsi dengan benar di semua breakpoint (`sm:`, `md:`, `lg:`).
+   - Pastikan komponen interaktif (modal, dropdown) terasa premium dengan transisi Alpine.js (`x-transition`).