vibes-plug 2.5.0 → 2.11.0

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/token-saver/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: token-saver
 description: "Skill to implement token saving scheme, concise, and focused on essential changes / Skill untuk menerapkan skema penghematan token, ringkas, dan fokus pada perubahan esensial tanpa basa-basi."
-author: vibes-plug-swarm
+author: "Roedy Rustam"
 ---
 
 # Token Saver Protocol (2026 Edition)

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.