vibes-plug 1.0.0

package/skills/tailwind-expert/SKILL.md

@@ -0,0 +1,188 @@
+---
+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"
+---
+
+# Tailwind CSS Expert (v4 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## 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.
+
+### 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.
+
+### Tailwind v4 — The CSS-First Paradigm Shift
+
+Tailwind v4 eliminates `tailwind.config.js` entirely. All configuration happens in CSS:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+
+/* Design tokens — replaces tailwind.config.js theme */
+@theme {
+  /* Colors using OKLCH 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;
+
+  /* Custom animations */
+  --animate-slide-in: slide-in 0.3s ease-out;
+  --animate-fade-up: fade-up 0.4s ease-out;
+
+  /* Breakpoints */
+  --breakpoint-3xl: 112rem;
+}
+
+/* Register plugins via @plugin directive */
+@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.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## 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.
+
+### 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
+
+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`.
+
+### Utilitas Baru di Tailwind v4
+
+#### 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.
+
+#### Container Queries
+Gunakan `@container` dan utilitas `@sm:`, `@lg:` untuk membuat komponen yang responsif terhadap ukuran container induknya, bukan ukuran viewport.
+
+#### `field-sizing` untuk Textarea Auto-Resize
+Kelas `field-sizing-content` membuat textarea otomatis menyesuaikan ukurannya dengan konten — tanpa JavaScript.
+
+### Migrasi dari v3 ke v4
+
+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)
+
+### 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.

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

@@ -0,0 +1,199 @@
+---
+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"
+---
+
+# TanStack Query Expert (v5 + TanStack Router/Start Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.
+
+### Trigger Conditions
+- Refactoring data fetching logic (replacing `useEffect` + `useState` patterns).
+- Designing query key factories (Array-based, strictly typed).
+- Writing `useMutation` hooks with immediate Optimistic Updates.
+- Implementing Infinite Scrolling (`useInfiniteQuery`).
+- Using React Suspense with `useSuspenseQuery`.
+- Integrating TanStack Query with Next.js App Router (Server Components prefetching + Client Boundary hydration).
+- Building type-safe SPAs with **TanStack Router** (typed routes, route-level loaders).
+- Building full-stack apps with **TanStack Start** (server functions, RSC-like patterns).
+
+### Core Concepts & Rules of Thumb
+- **Never** use `useEffect` to fetch data if TanStack Query is available.
+- **Never** sync query data into local React state (e.g., `useEffect(() => setLocalState(data), [data])`). Derive state during render instead.
+- **Stale != Garbage Collected**: `staleTime` dictates when background refetch triggers. `gcTime` dictates how long inactive data stays in memory.
+- **Always** use `queryOptions()` helper to co-locate query definition and reuse it across components and loaders.
+
+### Advanced Query Patterns
+
+#### 1. `queryOptions()` Helper — The 2026 Best Practice
+Co-locate your query definition using `queryOptions()` to share it between components and route loaders:
+```typescript
+import { queryOptions } from '@tanstack/react-query';
+
+export const userQueryOptions = (userId: string) =>
+  queryOptions({
+    queryKey: ['users', userId],
+    queryFn: () => fetchUser(userId),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+// In component:
+const { data } = useQuery(userQueryOptions(userId));
+
+// In TanStack Router loader:
+export const Route = createFileRoute('/users/$userId')({
+  loader: ({ context: { queryClient }, params }) =>
+    queryClient.ensureQueryData(userQueryOptions(params.userId)),
+  component: UserPage,
+});
+```
+
+#### 2. Custom Hook & Suspense Pattern
+Abstract `useQuery` into custom hooks. Use `useSuspenseQuery` for modern React architectures:
+```typescript
+export function useUser(userId: string) {
+  return useSuspenseQuery(userQueryOptions(userId));
+}
+```
+
+#### 3. Query Key Factories (Mandatory for Scale)
+Use factories to prevent typos and ensure invalidation targets the correct subsets:
+```typescript
+export const userKeys = {
+  all: ['users'] as const,
+  lists: () => [...userKeys.all, 'list'] as const,
+  list: (filters: string) => [...userKeys.lists(), { filters }] as const,
+  details: () => [...userKeys.all, 'detail'] as const,
+  detail: (id: string) => [...userKeys.details(), id] as const,
+};
+```
+
+#### 4. Optimistic Updates (v5 Best Practice)
+Give users instant feedback by updating the cache before the server responds:
+```typescript
+const mutation = useMutation({
+  mutationFn: updateTodo,
+  onMutate: async (newTodo) => {
+    await queryClient.cancelQueries({ queryKey: todoKeys.lists() });
+    const previous = queryClient.getQueryData(todoKeys.lists());
+    queryClient.setQueryData(todoKeys.lists(), (old) =>
+      old?.map(t => t.id === newTodo.id ? newTodo : t)
+    );
+    return { previous };
+  },
+  onError: (err, _, context) => {
+    queryClient.setQueryData(todoKeys.lists(), context?.previous);
+  },
+  onSettled: () => queryClient.invalidateQueries({ queryKey: todoKeys.lists() }),
+});
+```
+
+#### 5. TanStack Router — Type-Safe Client-Side Routing
+TanStack Router is the recommended router for SPAs in 2026 — fully type-safe routes, search params, and loaders:
+```typescript
+import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router';
+
+const rootRoute = createRootRoute({ component: RootLayout });
+
+const usersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/users',
+  loader: ({ context: { queryClient } }) =>
+    queryClient.ensureQueryData(usersQueryOptions()),
+  component: UsersPage,
+});
+```
+
+#### 6. TanStack Start — Full-Stack Framework
+TanStack Start brings server functions and SSR to TanStack Router apps — a Vite-powered alternative to Next.js for SPAs that need SSR:
+```typescript
+import { createServerFn } from '@tanstack/start';
+
+// Type-safe server function (runs on server)
+const getUser = createServerFn({ method: 'GET' })
+  .validator(z.object({ userId: z.string() }))
+  .handler(async ({ data }) => {
+    return db.user.findUnique({ where: { id: data.userId } });
+  });
+```
+
+#### 7. Next.js App Router SSR Hydration
+Prefetch on the server and hydrate on the client seamlessly:
+```typescript
+// Server Component (app/users/page.tsx)
+export default async function UsersPage() {
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery(usersQueryOptions());
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <UsersList />
+    </HydrationBoundary>
+  );
+}
+```
+
+### Troubleshooting
+- **Infinite Fetching Loops**: Check your `queryFn`. Unhandled exceptions trigger 3 auto-retries. Ensure stable query keys (no object literals in render).
+- **`staleTime` vs `gcTime`**: If `gcTime` < `staleTime`, data is deleted from memory before it becomes stale — this defeats the cache. Always set `gcTime >= staleTime`.
+- **Hydration Mismatch**: Ensure server and client produce identical initial query data — check for timezone or locale differences.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.
+
+### Kondisi Pemicu
+- Refactoring logika data fetching (menggantikan `useEffect` + `useState`).
+- Merancang query key factories berbasis Array yang type-safe.
+- Menulis hook `useMutation` dengan Optimistic Updates instan.
+- Mengimplementasikan Infinite Scrolling (`useInfiniteQuery`).
+- Memanfaatkan React Suspense dengan `useSuspenseQuery`.
+- Mengintegrasikan TanStack Query dengan Next.js App Router (prefetching RSC + hidrasi client boundary).
+- Membangun SPA type-safe dengan **TanStack Router** (rute bertipe, route-level loaders).
+- Membangun aplikasi full-stack dengan **TanStack Start** (server functions, pola mirip RSC).
+
+### Aturan Utama & Prinsip
+- **Jangan pernah** gunakan `useEffect` untuk fetch data jika TanStack Query tersedia.
+- **Jangan pernah** sinkronkan data query ke state lokal React.
+- `staleTime`: kapan refetch latar belakang dipicu. `gcTime`: berapa lama data tidak aktif di memori.
+- **Selalu** gunakan helper `queryOptions()` untuk mendefinisikan dan berbagi query definition.
+
+### Pola Tingkat Lanjut
+
+#### 1. Helper `queryOptions()` — Best Practice 2026
+Co-locate definisi query menggunakan `queryOptions()` untuk berbagi antara komponen dan route loader. Lihat contoh kode di bagian English.
+
+#### 2. Custom Hook & Suspense Pattern
+Abstraksikan `useQuery` ke dalam custom hook. Gunakan `useSuspenseQuery` untuk loading state yang ditangani oleh `<Suspense>`.
+
+#### 3. Query Key Factories
+Gunakan factory untuk mencegah typo dan memastikan invalidation menargetkan subset data yang tepat.
+
+#### 4. Optimistic Updates
+Perbarui cache sebelum server merespons untuk umpan balik instan kepada pengguna.
+
+#### 5. TanStack Router
+Router client-side yang fully type-safe untuk SPA — rute, search params, dan loader semuanya bertipe. Direkomendasikan untuk proyek SPA baru di 2026 (menggantikan React Router).
+
+#### 6. TanStack Start
+Framework full-stack berbasis Vite dengan server functions type-safe — alternatif Next.js untuk SPA yang membutuhkan SSR.
+
+#### 7. Hidrasi SSR Next.js App Router
+Prefetch di Server Component, lalu wrap dengan `<HydrationBoundary>` agar data langsung tersedia di Client Component tanpa request tambahan.
+
+### Pemecahan Masalah
+- **Loop Fetching**: Query key tidak stabil atau `queryFn` yang melempar error tak tertangani.
+- **`staleTime` vs `gcTime`**: Jangan set `gcTime` lebih kecil dari `staleTime`.
+- **Hydration Mismatch**: Pastikan server dan client menghasilkan data awal yang identik.

package/skills/tauri-expert/SKILL.md

@@ -0,0 +1,97 @@
+---
+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"
+---
+
+# Tauri Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### 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.
+
+### Instructions & Best Practices
+
+#### 1. Architecture & IPC (Inter-Process Communication)
+- Use `tauri::command` to define Rust functions callable from the frontend.
+- Invoke Rust functions from the frontend using `@tauri-apps/api/core` (`invoke`).
+- Utilize Tauri's event system (`emit` from Rust, `listen` on frontend) for real-time or async updates.
+- Keep heavy processing and filesystem access in Rust (backend), while the frontend focuses purely on UI.
+
+#### 2. State Management (Rust Backend)
+- Use `tauri::State` to store and manage global state in the Rust backend.
+- Use `std::sync::Mutex` or `tokio::sync::Mutex` (if async) for mutable state.
+- Initialize managed state during application setup: `tauri::Builder::default().manage(MyState::default())`.
+
+#### 3. Security & Capabilities
+- Enforce strict context isolation.
+- In Tauri v2, use the **Capabilities** system to restrict API access per window or plugin.
+- Never expose dangerous filesystem, shell, or network APIs globally. Only grant allowlist access to specific, required paths or commands.
+
+#### 4. Performance & Concurrency
+- Use `async fn` for `tauri::command` when handling heavy I/O to avoid blocking the main thread.
+- Use `serde` (`Serialize`, `Deserialize`) efficiently for data structures sent between Rust and the frontend.
+
+#### 5. Plugin Management (Tauri v2)
+- Use official Tauri plugins (e.g., `tauri-plugin-fs`, `tauri-plugin-store`, `tauri-plugin-dialog`) instead of writing custom I/O modules when available.
+- Initialize plugins in `main.rs` or `lib.rs`: `app.plugin(tauri_plugin_dialog::init())`.
+
+#### 6. Cross-Platform & Build
+- Avoid hardcoded paths. Use the `app_handle.path()` resolver for AppData, Cache, and other system directories.
+- Ensure dependencies in `Cargo.toml` support cross-compilation (Windows, macOS, Linux, iOS, Android).
+
+### Trigger Conditions
+Active when:
+- Building, debugging, or refactoring Tauri applications.
+- Writing IPC systems between the frontend (React/Svelte/Vue) and the Rust backend.
+- Configuring security (`tauri.conf.json`, capabilities, permissions).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### 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.
+
+### Instruksi & Praktik Terbaik
+
+#### 1. Arsitektur & IPC (Inter-Process Communication)
+- Gunakan `tauri::command` untuk mendefinisikan fungsi Rust yang bisa dipanggil dari frontend.
+- Panggil fungsi Rust dari frontend menggunakan `@tauri-apps/api/core` (`invoke`).
+- Manfaatkan sistem *event* Tauri (`emit` dari Rust, `listen` di frontend) untuk pembaruan *real-time* atau asinkron dari backend.
+- Lakukan operasi berat di sisi Rust (backend), sedangkan frontend hanya fokus pada UI.
+
+#### 2. Manajemen State (Rust Backend)
+- Gunakan `tauri::State` untuk menyimpan dan mengelola state global di backend Rust.
+- Gunakan `std::sync::Mutex` or `tokio::sync::Mutex` (jika asinkron) untuk state yang bisa berubah (mutable state).
+- Lakukan inisialisasi state saat setup aplikasi: `tauri::Builder::default().manage(MyState::default())`.
+
+#### 3. Keamanan (Security & Capabilities)
+- Terapkan isolasi konteks secara ketat.
+- Di Tauri v2, gunakan sistem **Capabilities** untuk membatasi akses API per jendela/plugin.
+- Jangan mengekspos API filesystem, shell, atau jaringan yang berbahaya secara global. Hanya beri akses (`allowlist`) ke path atau perintah (commands) yang spesifik dan dibutuhkan.
+
+#### 4. Kinerja & Asinkronisitas
+- Gunakan `async fn` pada `tauri::command` untuk I/O yang berat agar tidak memblokir *main thread*.
+- Gunakan `serde` (`Serialize`, `Deserialize`) secara efisien untuk mengirim struktur data kompleks antara Rust dan frontend.
+
+#### 5. Pengelolaan Plugin (Tauri v2)
+- Gunakan ekosistem plugin Tauri (seperti `tauri-plugin-fs`, `tauri-plugin-store`, `tauri-plugin-dialog`) alih-alih membuat modul I/O sendiri jika sudah tersedia.
+- Inisialisasi plugin di file `main.rs` atau `lib.rs`: `app.plugin(tauri_plugin_dialog::init())`.
+
+#### 6. Lintas Platform (Cross-Platform) & Build
+- Hindari *hardcode* path sistem operasi. Gunakan `app_handle.path()` resolver untuk direktori AppData, Cache, dsb.
+- Pastikan dependencies di `Cargo.toml` mendukung *cross-compilation* (Windows, macOS, Linux, iOS, Android).
+
+### Kondisi Pemicu
+Aktif saat:
+- Membangun, men-debug, atau melakukan *refactoring* pada aplikasi Tauri.
+- Menulis sistem IPC antara frontend (React/Svelte/Vue) dan backend Rust.
+- Mengonfigurasi keamanan (`tauri.conf.json`, capabilities, permission).

package/skills/token-saver/SKILL.md

@@ -0,0 +1,111 @@
+---
+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: "Roedy Rustam"
+---
+
+# Token Saver Protocol (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Implements token-efficient communication protocols for long-context AI coding sessions. Activates concise mode — minimizing response verbosity while maintaining precision and completeness of technical output.
+
+### Trigger Conditions
+- User asks for token-saving mode, concise responses, or minimal output.
+- Session is running long and context window is being consumed rapidly.
+- User explicitly says "be concise", "save tokens", or "minimal".
+
+### Token Budget Strategies for Long Context
+
+#### 1. Response Compression Rules (Active When Triggered)
+- **No preamble**: Skip "Of course! I'll help you with that...".
+- **No restatement**: Never repeat back what the user just said.
+- **No trailing summaries**: Don't summarize what you just did at the end.
+- **Code-first**: Show the code change immediately, explain briefly after.
+- **Diff format**: For small changes, show only the changed lines (not the full file).
+- **Bullet > prose**: Use bullet lists instead of paragraphs for explanations.
+
+#### 2. Tool Call Efficiency
+- **Batch parallel reads**: Read multiple files in a single turn (not sequentially).
+- **Targeted grep over full reads**: Use `grep_search` to find specific content before reading the whole file.
+- **Write once**: Produce correct output on first try — avoid edit-then-edit-again cycles.
+- **Skip confirmation requests**: Don't ask "Shall I proceed?" — just proceed.
+
+#### 3. Context Window Budget Awareness
+When working on a long session:
+```
+Token budget allocation (for 200K context):
+├── System prompt + skills:    ~15K
+├── Conversation history:      ~50K (truncates older turns)
+├── File contents read:        ~100K (most expensive)
+└── Response generation:       ~35K
+```
+- Prefer `grep_search` over reading full large files.
+- Summarize large files mentally; only `view_file` the specific section needed.
+- When context is nearly full, create a checkpoint with `session-handoff-resume` skill.
+
+#### 4. Output Size Minimization
+For file edits:
+```diff
+# Preferred: diff format showing only changes
+- const OLD_VALUE = 'old';
++ const NEW_VALUE = 'new';
+```
+
+For explanations:
+```
+# Preferred: 1-sentence rationale
+Changed X to Y because Z.
+
+# Avoid: multi-paragraph explanation of an obvious change
+```
+
+#### 5. Code Generation — First Draft Quality
+Generate correct, production-ready code on the first attempt:
+- Apply all relevant best practices from skills without being asked.
+- Include error handling, types, and edge cases inline.
+- Avoid TODOs, placeholder values, or "implement this later" comments.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Mengimplementasikan protokol komunikasi hemat token untuk sesi coding AI yang panjang. Mengaktifkan mode ringkas — meminimalkan verbositas respons sambil mempertahankan presisi dan kelengkapan output teknis.
+
+### Kondisi Pemicu
+- Pengguna meminta mode hemat token, respons ringkas, atau output minimal.
+- Sesi sudah panjang dan context window sedang dikonsumsi dengan cepat.
+- Pengguna secara eksplisit berkata "ringkas", "hemat token", atau "minimal".
+
+### Strategi Token Budget untuk Konteks Panjang
+
+#### 1. Aturan Kompresi Respons (Aktif Saat Dipicu)
+- Tanpa pembuka: Lewati "Tentu saja! Saya akan membantu Anda dengan...".
+- Tanpa pengulangan: Jangan pernah mengulangi apa yang baru saja dikatakan pengguna.
+- Tanpa ringkasan di akhir: Jangan rangkum apa yang baru saja dilakukan.
+- Code-first: Tunjukkan perubahan kode segera, jelaskan singkat setelahnya.
+- Format diff: Untuk perubahan kecil, tunjukkan hanya baris yang berubah.
+- Poin > prosa: Gunakan daftar poin daripada paragraf.
+
+#### 2. Efisiensi Pemanggilan Tool
+- Baca beberapa file secara paralel dalam satu giliran.
+- Gunakan `grep_search` untuk menemukan konten spesifik sebelum membaca file lengkap.
+- Hasilkan output yang benar pada percobaan pertama.
+- Jangan tanyakan "Apakah saya harus melanjutkan?" — langsung lanjutkan.
+
+#### 3. Kesadaran Budget Context Window
+Alokasikan token secara bijak: batasi baca file besar, gunakan `grep_search` daripada membaca file penuh, dan buat checkpoint dengan skill `session-handoff-resume` saat konteks hampir penuh.
+
+#### 4. Minimalisasi Ukuran Output
+Gunakan format diff untuk edit file. Berikan penjelasan 1 kalimat untuk perubahan yang jelas.
+
+#### 5. Kualitas Draft Kode Pertama
+Hasilkan kode yang benar dan siap produksi pada percobaan pertama — termasuk error handling, tipe, dan edge case secara inline. Hindari TODO, nilai placeholder, atau komentar "implementasikan ini nanti".