vibes-plug 1.0.0 → 2.5.0

package/skills/mobile-expo-expert/SKILL.md

@@ -1,186 +1,186 @@
----
-name: mobile-expo-expert
-description: "Expert guide for React Native 0.76+ and Expo SDK 52+ development. Covers cross-platform mobile architecture, Expo Router v4, New Architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native 0.76+ dan Expo SDK 52+ untuk aplikasi mobile."
-author: "Roedy Rustam"
----
-
-# Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Expert guide for building production-grade cross-platform mobile applications using **React Native 0.79+** and **Expo SDK 53+**. Covers the New Architecture (stable), Expo Router v4, OTA updates, native modules, and modern state management patterns for iOS and Android.
-
-### Trigger Conditions
-- Building a new iOS/Android cross-platform mobile app.
-- Using Expo SDK 53+ or React Native 0.79+ with the New Architecture.
-- Implementing file-based routing with **Expo Router v4**.
-- Setting up OTA (Over-the-Air) updates with EAS Update.
-- Writing native modules using **JSI** (JavaScript Interface) or **Expo Modules API**.
-- Integrating device features: camera, biometrics, notifications, location.
-
-### What's New in 2026
-
-#### React Native 0.79 — New Architecture Stable
-The **New Architecture** (Fabric + JSI + TurboModules) is now **fully stable** and the default for all new Expo SDK 53 projects:
-- **Fabric**: New rendering engine — synchronous rendering, better animations.
-- **JSI (JavaScript Interface)**: Direct C++ bridge — no more async serialization for native calls.
-- **TurboModules**: Lazy-loaded native modules — significantly faster startup time.
-- **Concurrent React**: Full support for `useTransition`, `useDeferredValue`, and Suspense on mobile.
-
-#### Expo SDK 53 — Key Updates
-- **Expo Router v4**: File-based routing with typed routes, API routes (Expo functions), and universal links.
-- **Expo Camera v15**: Unified camera API for iOS and Android.
-- **Expo SQLite v15**: Full SQLite with WAL mode and `useSQLiteContext` hook.
-- **Expo Modules API v2**: Easier native module authoring with Swift/Kotlin.
-- **EAS Build**: Faster builds with M-series Mac runners.
-
-### Core Architecture Patterns
-
-#### 1. Project Setup (Expo SDK 53 + New Arch)
-```bash
-npx create-expo-app@latest MyApp --template tabs
-cd MyApp
-# New Architecture is enabled by default in SDK 53
-```
-
-#### 2. Expo Router v4 — File-Based Routing
-```
-app/
-  _layout.tsx          # Root layout (navigation + providers)
-  (tabs)/
-    _layout.tsx         # Tab navigator
-    index.tsx           # Home tab
-    profile.tsx         # Profile tab
-  (auth)/
-    login.tsx           # Login screen
-    register.tsx
-  modal.tsx             # Modal screen
-```
-
-Use **typed routes** for compile-time safety:
-```typescript
-import { Link, useRouter } from 'expo-router';
-
-// Typed navigation — TypeScript errors on invalid paths
-<Link href="/profile">Profile</Link>
-
-const router = useRouter();
-router.push('/modal');
-```
-
-#### 3. API Routes (Expo Functions)
-Expo Router v4 supports API routes for serverless backend logic:
-```typescript
-// app/api/user+api.ts
-export async function GET(request: Request) {
-  const user = await db.user.findFirst();
-  return Response.json(user);
-}
-```
-
-#### 4. State Management
-- **TanStack Query v5**: Primary choice for server state (`useQuery`, `useMutation`).
-- **Zustand**: Lightweight client state management (replace Context for complex state).
-- **MMKV**: Ultra-fast synchronous storage (replace AsyncStorage).
-- **Expo SQLite + Drizzle**: Local-first database with full SQL support.
-
-#### 5. Navigation Patterns
-```typescript
-// Deep linking & Universal Links configuration
-// app.json
-{
-  "expo": {
-    "scheme": "myapp",
-    "ios": { "associatedDomains": ["applinks:myapp.com"] },
-    "android": { "intentFilters": [{ "action": "VIEW", "data": [{ "scheme": "https", "host": "myapp.com" }] }] }
-  }
-}
-```
-
-#### 6. Native Modules — Expo Modules API v2
-```typescript
-// modules/my-sensor/src/MyModule.ts
-import { requireNativeModule } from 'expo-modules-core';
-const MyModule = requireNativeModule('MyModule');
-
-export function readSensor(): Promise<number> {
-  return MyModule.readSensor();
-}
-```
-
-#### 7. OTA Updates with EAS Update
-```bash
-# Push an instant OTA update (no App Store review)
-eas update --branch production --message "Fix critical bug"
-```
-Use **channels** to target specific user groups (production, staging, beta).
-
-#### 8. Performance Best Practices
-- Use **FlashList** (Shopify) instead of `FlatList` for large lists.
-- Use **react-native-reanimated v3** for 60/120fps animations that run on the UI thread.
-- Use **react-native-gesture-handler** for gesture recognition on the native thread.
-- Enable **Hermes** engine (default in SDK 53) for faster startup and reduced memory.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan ahli untuk membangun aplikasi mobile cross-platform tingkat produksi menggunakan **React Native 0.79+** dan **Expo SDK 53+**. Mencakup New Architecture (stabil), Expo Router v4, OTA updates, native modules, dan pola state management modern untuk iOS dan Android.
-
-### Kondisi Pemicu
-- Membangun aplikasi mobile iOS/Android cross-platform baru.
-- Menggunakan Expo SDK 53+ atau React Native 0.79+ dengan New Architecture.
-- Mengimplementasikan routing berbasis file dengan **Expo Router v4**.
-- Menyiapkan OTA (Over-the-Air) updates dengan EAS Update.
-- Menulis native modules menggunakan JSI atau Expo Modules API v2.
-- Mengintegrasikan fitur perangkat: kamera, biometrik, notifikasi, lokasi.
-
-### Yang Baru di 2026
-
-#### React Native 0.79 — New Architecture Stabil
-**New Architecture** (Fabric + JSI + TurboModules) kini **sepenuhnya stabil** dan menjadi default untuk semua proyek baru Expo SDK 53:
-- **Fabric**: Engine rendering baru — rendering sinkron, animasi lebih baik.
-- **JSI**: Bridge C++ langsung — tidak ada lagi serialisasi async untuk panggilan native.
-- **TurboModules**: Modul native lazy-loaded — startup jauh lebih cepat.
-- **Concurrent React**: Dukungan penuh untuk `useTransition`, `useDeferredValue`, dan Suspense di mobile.
-
-#### Expo SDK 53 — Pembaruan Utama
-- **Expo Router v4**: Routing berbasis file dengan typed routes, API routes, dan universal links.
-- **Expo Camera v15**: API kamera terpadu untuk iOS dan Android.
-- **Expo SQLite v15**: SQLite lengkap dengan mode WAL dan hook `useSQLiteContext`.
-- **Expo Modules API v2**: Pembuatan modul native yang lebih mudah dengan Swift/Kotlin.
-- **EAS Build**: Build lebih cepat dengan runner Mac M-series.
-
-### Pola Arsitektur Inti
-
-#### 1. Routing Berbasis File (Expo Router v4)
-Expo Router menggunakan konvensi direktori `app/` untuk mendefinisikan semua layar dan navigasi. Gunakan **typed routes** untuk keamanan type-safe di waktu kompilasi.
-
-#### 2. API Routes (Expo Functions)
-Expo Router v4 mendukung API routes untuk logika backend serverless langsung di dalam proyek.
-
-#### 3. State Management
-- **TanStack Query v5**: Pilihan utama untuk server state.
-- **Zustand**: State klien yang ringan.
-- **MMKV**: Penyimpanan sinkron ultra-cepat (pengganti AsyncStorage).
-- **Expo SQLite + Drizzle**: Database lokal-first dengan dukungan SQL penuh.
-
-#### 4. Native Modules — Expo Modules API v2
-Gunakan Expo Modules API untuk membuat modul native kustom dengan Swift (iOS) dan Kotlin (Android) dengan boilerplate minimal.
-
-#### 5. OTA Updates dengan EAS Update
-Dorong pembaruan instan ke pengguna tanpa melalui review App Store. Gunakan channel (`production`, `staging`, `beta`) untuk menargetkan kelompok pengguna tertentu.
-
-#### 6. Praktik Terbaik Performa
-- **FlashList**: Pengganti FlatList yang jauh lebih cepat untuk daftar panjang.
-- **react-native-reanimated v3**: Animasi 60/120fps yang berjalan di UI thread.
-- **react-native-gesture-handler**: Pengenalan gesture di native thread.
-- **Hermes Engine**: Default di SDK 53 — startup lebih cepat, memori lebih sedikit.
+---
+name: mobile-expo-expert
+description: "Expert guide for React Native 0.76+ and Expo SDK 52+ development. Covers cross-platform mobile architecture, Expo Router v4, New Architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native 0.76+ dan Expo SDK 52+ untuk aplikasi mobile."
+author: "Roedy Rustam"
+---
+
+# Mobile Expert — React Native & Expo (SDK 53 / RN 0.79 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for building production-grade cross-platform mobile applications using **React Native 0.79+** and **Expo SDK 53+**. Covers the New Architecture (stable), Expo Router v4, OTA updates, native modules, and modern state management patterns for iOS and Android.
+
+### Trigger Conditions
+- Building a new iOS/Android cross-platform mobile app.
+- Using Expo SDK 53+ or React Native 0.79+ with the New Architecture.
+- Implementing file-based routing with **Expo Router v4**.
+- Setting up OTA (Over-the-Air) updates with EAS Update.
+- Writing native modules using **JSI** (JavaScript Interface) or **Expo Modules API**.
+- Integrating device features: camera, biometrics, notifications, location.
+
+### What's New in 2026
+
+#### React Native 0.79 — New Architecture Stable
+The **New Architecture** (Fabric + JSI + TurboModules) is now **fully stable** and the default for all new Expo SDK 53 projects:
+- **Fabric**: New rendering engine — synchronous rendering, better animations.
+- **JSI (JavaScript Interface)**: Direct C++ bridge — no more async serialization for native calls.
+- **TurboModules**: Lazy-loaded native modules — significantly faster startup time.
+- **Concurrent React**: Full support for `useTransition`, `useDeferredValue`, and Suspense on mobile.
+
+#### Expo SDK 53 — Key Updates
+- **Expo Router v4**: File-based routing with typed routes, API routes (Expo functions), and universal links.
+- **Expo Camera v15**: Unified camera API for iOS and Android.
+- **Expo SQLite v15**: Full SQLite with WAL mode and `useSQLiteContext` hook.
+- **Expo Modules API v2**: Easier native module authoring with Swift/Kotlin.
+- **EAS Build**: Faster builds with M-series Mac runners.
+
+### Core Architecture Patterns
+
+#### 1. Project Setup (Expo SDK 53 + New Arch)
+```bash
+npx create-expo-app@latest MyApp --template tabs
+cd MyApp
+# New Architecture is enabled by default in SDK 53
+```
+
+#### 2. Expo Router v4 — File-Based Routing
+```
+app/
+  _layout.tsx          # Root layout (navigation + providers)
+  (tabs)/
+    _layout.tsx         # Tab navigator
+    index.tsx           # Home tab
+    profile.tsx         # Profile tab
+  (auth)/
+    login.tsx           # Login screen
+    register.tsx
+  modal.tsx             # Modal screen
+```
+
+Use **typed routes** for compile-time safety:
+```typescript
+import { Link, useRouter } from 'expo-router';
+
+// Typed navigation — TypeScript errors on invalid paths
+<Link href="/profile">Profile</Link>
+
+const router = useRouter();
+router.push('/modal');
+```
+
+#### 3. API Routes (Expo Functions)
+Expo Router v4 supports API routes for serverless backend logic:
+```typescript
+// app/api/user+api.ts
+export async function GET(request: Request) {
+  const user = await db.user.findFirst();
+  return Response.json(user);
+}
+```
+
+#### 4. State Management
+- **TanStack Query v5**: Primary choice for server state (`useQuery`, `useMutation`).
+- **Zustand**: Lightweight client state management (replace Context for complex state).
+- **MMKV**: Ultra-fast synchronous storage (replace AsyncStorage).
+- **Expo SQLite + Drizzle**: Local-first database with full SQL support.
+
+#### 5. Navigation Patterns
+```typescript
+// Deep linking & Universal Links configuration
+// app.json
+{
+  "expo": {
+    "scheme": "myapp",
+    "ios": { "associatedDomains": ["applinks:myapp.com"] },
+    "android": { "intentFilters": [{ "action": "VIEW", "data": [{ "scheme": "https", "host": "myapp.com" }] }] }
+  }
+}
+```
+
+#### 6. Native Modules — Expo Modules API v2
+```typescript
+// modules/my-sensor/src/MyModule.ts
+import { requireNativeModule } from 'expo-modules-core';
+const MyModule = requireNativeModule('MyModule');
+
+export function readSensor(): Promise<number> {
+  return MyModule.readSensor();
+}
+```
+
+#### 7. OTA Updates with EAS Update
+```bash
+# Push an instant OTA update (no App Store review)
+eas update --branch production --message "Fix critical bug"
+```
+Use **channels** to target specific user groups (production, staging, beta).
+
+#### 8. Performance Best Practices
+- Use **FlashList** (Shopify) instead of `FlatList` for large lists.
+- Use **react-native-reanimated v3** for 60/120fps animations that run on the UI thread.
+- Use **react-native-gesture-handler** for gesture recognition on the native thread.
+- Enable **Hermes** engine (default in SDK 53) for faster startup and reduced memory.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi mobile cross-platform tingkat produksi menggunakan **React Native 0.79+** dan **Expo SDK 53+**. Mencakup New Architecture (stabil), Expo Router v4, OTA updates, native modules, dan pola state management modern untuk iOS dan Android.
+
+### Kondisi Pemicu
+- Membangun aplikasi mobile iOS/Android cross-platform baru.
+- Menggunakan Expo SDK 53+ atau React Native 0.79+ dengan New Architecture.
+- Mengimplementasikan routing berbasis file dengan **Expo Router v4**.
+- Menyiapkan OTA (Over-the-Air) updates dengan EAS Update.
+- Menulis native modules menggunakan JSI atau Expo Modules API v2.
+- Mengintegrasikan fitur perangkat: kamera, biometrik, notifikasi, lokasi.
+
+### Yang Baru di 2026
+
+#### React Native 0.79 — New Architecture Stabil
+**New Architecture** (Fabric + JSI + TurboModules) kini **sepenuhnya stabil** dan menjadi default untuk semua proyek baru Expo SDK 53:
+- **Fabric**: Engine rendering baru — rendering sinkron, animasi lebih baik.
+- **JSI**: Bridge C++ langsung — tidak ada lagi serialisasi async untuk panggilan native.
+- **TurboModules**: Modul native lazy-loaded — startup jauh lebih cepat.
+- **Concurrent React**: Dukungan penuh untuk `useTransition`, `useDeferredValue`, dan Suspense di mobile.
+
+#### Expo SDK 53 — Pembaruan Utama
+- **Expo Router v4**: Routing berbasis file dengan typed routes, API routes, dan universal links.
+- **Expo Camera v15**: API kamera terpadu untuk iOS dan Android.
+- **Expo SQLite v15**: SQLite lengkap dengan mode WAL dan hook `useSQLiteContext`.
+- **Expo Modules API v2**: Pembuatan modul native yang lebih mudah dengan Swift/Kotlin.
+- **EAS Build**: Build lebih cepat dengan runner Mac M-series.
+
+### Pola Arsitektur Inti
+
+#### 1. Routing Berbasis File (Expo Router v4)
+Expo Router menggunakan konvensi direktori `app/` untuk mendefinisikan semua layar dan navigasi. Gunakan **typed routes** untuk keamanan type-safe di waktu kompilasi.
+
+#### 2. API Routes (Expo Functions)
+Expo Router v4 mendukung API routes untuk logika backend serverless langsung di dalam proyek.
+
+#### 3. State Management
+- **TanStack Query v5**: Pilihan utama untuk server state.
+- **Zustand**: State klien yang ringan.
+- **MMKV**: Penyimpanan sinkron ultra-cepat (pengganti AsyncStorage).
+- **Expo SQLite + Drizzle**: Database lokal-first dengan dukungan SQL penuh.
+
+#### 4. Native Modules — Expo Modules API v2
+Gunakan Expo Modules API untuk membuat modul native kustom dengan Swift (iOS) dan Kotlin (Android) dengan boilerplate minimal.
+
+#### 5. OTA Updates dengan EAS Update
+Dorong pembaruan instan ke pengguna tanpa melalui review App Store. Gunakan channel (`production`, `staging`, `beta`) untuk menargetkan kelompok pengguna tertentu.
+
+#### 6. Praktik Terbaik Performa
+- **FlashList**: Pengganti FlatList yang jauh lebih cepat untuk daftar panjang.
+- **react-native-reanimated v3**: Animasi 60/120fps yang berjalan di UI thread.
+- **react-native-gesture-handler**: Pengenalan gesture di native thread.
+- **Hermes Engine**: Default di SDK 53 — startup lebih cepat, memori lebih sedikit.

package/skills/mobile-push-notification-expert/SKILL.md

@@ -0,0 +1,51 @@
+---
+name: mobile-push-notification-expert
+description: "Expert guide for Cross-Platform Push Notifications (Expo Push, FCM, APNs, Web Push), iOS Live Activities, and background payload handling / Panduan ahli notifikasi push mobile, FCM, APNs, dan Live Activities."
+author: "Roedy Rustam"
+---
+
+# Mobile Push Notification & Live Activities Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Comprehensive guide for configuring cross-platform push notifications (Expo Push API, Firebase Cloud Messaging FCM, Apple APNs, Web Push API), iOS Live Activities / ActivityKit, background payload handlers, deep-linking routing, and push token lifecycle management.
+
+### Key Capabilities
+- **Expo & FCM Push**: Sending batched push notifications with rich media, actions, and custom data payloads.
+- **iOS Live Activities**: Real-time status updates on iOS Dynamic Island and Lock Screen.
+- **Deep Linking**: Routing push notification taps directly to targeted screens within Expo Router / React Native.
+
+```typescript
+import * as Notifications from 'expo-notifications';
+
+export async function registerForPushNotificationsAsync() {
+  const { status: existingStatus } = await Notifications.getPermissionsAsync();
+  let finalStatus = existingStatus;
+  if (existingStatus !== 'granted') {
+    const { status } = await Notifications.requestPermissionsAsync();
+    finalStatus = status;
+  }
+  if (finalStatus !== 'granted') return null;
+  const token = (await Notifications.getExpoPushTokenAsync()).data;
+  return token;
+}
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan komprehensif untuk konfigurasi push notification lintas platform (Expo Push, FCM, APNs, Web Push), iOS Live Activities / ActivityKit, penanganan payload background, routing deep-linking, dan manajemen siklus token push.
+
+### Fitur Utama
+- **Expo & FCM Push**: Pengiriman push notification masal dengan media kaya, tombol aksi, dan payload kustom.
+- **iOS Live Activities**: Update status real-time di Dynamic Island dan Lock Screen iOS.
+- **Deep Linking**: Mengarahkan ketukan notifikasi secara langsung ke layar target di Expo Router / React Native.

package/skills/monday-design-aesthetic/SKILL.md

@@ -1,67 +1,67 @@
----
-name: monday-design-aesthetic
-description: "Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com."
-author: "Roedy Rustam"
----
-
-# Monday.com Design Aesthetic
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-This skill focuses on implementing the modern, spacious, and structured design aesthetic inspired by Monday.com. It is ideal for SaaS landing pages and dashboards.
-
-### Trigger Conditions
-Use this when the user asks for:
-- A "Monday.com style" design.
-- A modern SaaS landing page with clean structure.
-- High-quality, spacious UI with vibrant accents.
-
-### Core Design Tokens
-- **Primary Brand Color**: Vibrant Blue (`#0073ea`) for active states and primary buttons.
-- **Backgrounds**: Clean White (`#FFFFFF`) for main content, Light Grays (`#F9F9F9`, `#F5F6F8`) for section alternations, Dark Gray/Black (`#111111`) for footers.
-- **Typography**: Clean geometric sans-serif (e.g., Figtree, Circular, Inter).
-  - Hero text is extra-bold (48-60px).
-  - Section headers are bold (32-40px) in dark slate (`#333333`).
-  - Body text is medium (16-18px) in muted gray (`#676879`).
-
-### UI Components & Layout
-- **Buttons**: Fully rounded corners (~8px). Primary buttons use vibrant blue with white text and generous padding (e.g., `px-6 py-3`).
-- **Cards**: Large border radius (12-16px) with flat borders or extremely subtle drop shadows (`shadow-sm`).
-- **Layout**: Centered max-width containers (1200-1400px).
-- **Spacing**: Generous vertical padding between sections (80-120px) to let content breathe.
-- **Interactions**: Smooth hover states, interactive tab systems, and collapsible accordions.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Skill ini berfokus pada implementasi desain yang modern, luas (spacious), dan terstruktur yang terinspirasi oleh Monday.com. Sangat cocok untuk landing page dan dashboard SaaS.
-
-### Kondisi Pemicu
-Gunakan saat pengguna meminta:
-- Desain ala "Monday.com".
-- Landing page SaaS modern dengan struktur bersih.
-- UI berkualitas tinggi dengan ruang bernapas luas dan aksen cerah.
-
-### Token Desain Utama
-- **Warna Utama (Brand Color)**: Biru Cerah (`#0073ea`) untuk elemen aktif dan tombol utama.
-- **Background**: Putih Bersih (`#FFFFFF`) untuk konten utama, Abu-abu Terang (`#F9F9F9`, `#F5F6F8`) untuk variasi bagian, Abu-abu Gelap/Hitam (`#111111`) untuk footer.
-- **Tipografi**: Sans-serif geometris bersih (mis. Figtree, Circular, Inter).
-  - Teks Hero sangat tebal (48-60px).
-  - Header bagian tebal (32-40px) dengan warna dark slate (`#333333`).
-  - Teks isi sedang (16-18px) berwarna abu-abu redup (`#676879`).
-
-### Komponen UI & Layout
-- **Tombol (Buttons)**: Sudut melengkung (~8px). Tombol utama berwarna biru dengan padding luas (`px-6 py-3`).
-- **Kartu (Cards)**: Radius sudut besar (12-16px) dengan border datar atau bayangan sangat halus (`shadow-sm`).
-- **Tata Letak (Layout)**: Kontainer dengan lebar maksimal (1200-1400px) terpusat.
-- **Jarak (Spacing)**: Jarak vertikal yang sangat lega antar bagian (80-120px).
-- **Interaksi**: Efek hover halus, sistem tab interaktif, dan akordion lipat.
+---
+name: monday-design-aesthetic
+description: "Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com."
+author: "Roedy Rustam"
+---
+
+# Monday.com Design Aesthetic
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill focuses on implementing the modern, spacious, and structured design aesthetic inspired by Monday.com. It is ideal for SaaS landing pages and dashboards.
+
+### Trigger Conditions
+Use this when the user asks for:
+- A "Monday.com style" design.
+- A modern SaaS landing page with clean structure.
+- High-quality, spacious UI with vibrant accents.
+
+### Core Design Tokens
+- **Primary Brand Color**: Vibrant Blue (`#0073ea`) for active states and primary buttons.
+- **Backgrounds**: Clean White (`#FFFFFF`) for main content, Light Grays (`#F9F9F9`, `#F5F6F8`) for section alternations, Dark Gray/Black (`#111111`) for footers.
+- **Typography**: Clean geometric sans-serif (e.g., Figtree, Circular, Inter).
+  - Hero text is extra-bold (48-60px).
+  - Section headers are bold (32-40px) in dark slate (`#333333`).
+  - Body text is medium (16-18px) in muted gray (`#676879`).
+
+### UI Components & Layout
+- **Buttons**: Fully rounded corners (~8px). Primary buttons use vibrant blue with white text and generous padding (e.g., `px-6 py-3`).
+- **Cards**: Large border radius (12-16px) with flat borders or extremely subtle drop shadows (`shadow-sm`).
+- **Layout**: Centered max-width containers (1200-1400px).
+- **Spacing**: Generous vertical padding between sections (80-120px) to let content breathe.
+- **Interactions**: Smooth hover states, interactive tab systems, and collapsible accordions.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini berfokus pada implementasi desain yang modern, luas (spacious), dan terstruktur yang terinspirasi oleh Monday.com. Sangat cocok untuk landing page dan dashboard SaaS.
+
+### Kondisi Pemicu
+Gunakan saat pengguna meminta:
+- Desain ala "Monday.com".
+- Landing page SaaS modern dengan struktur bersih.
+- UI berkualitas tinggi dengan ruang bernapas luas dan aksen cerah.
+
+### Token Desain Utama
+- **Warna Utama (Brand Color)**: Biru Cerah (`#0073ea`) untuk elemen aktif dan tombol utama.
+- **Background**: Putih Bersih (`#FFFFFF`) untuk konten utama, Abu-abu Terang (`#F9F9F9`, `#F5F6F8`) untuk variasi bagian, Abu-abu Gelap/Hitam (`#111111`) untuk footer.
+- **Tipografi**: Sans-serif geometris bersih (mis. Figtree, Circular, Inter).
+  - Teks Hero sangat tebal (48-60px).
+  - Header bagian tebal (32-40px) dengan warna dark slate (`#333333`).
+  - Teks isi sedang (16-18px) berwarna abu-abu redup (`#676879`).
+
+### Komponen UI & Layout
+- **Tombol (Buttons)**: Sudut melengkung (~8px). Tombol utama berwarna biru dengan padding luas (`px-6 py-3`).
+- **Kartu (Cards)**: Radius sudut besar (12-16px) dengan border datar atau bayangan sangat halus (`shadow-sm`).
+- **Tata Letak (Layout)**: Kontainer dengan lebar maksimal (1200-1400px) terpusat.
+- **Jarak (Spacing)**: Jarak vertikal yang sangat lega antar bagian (80-120px).
+- **Interaksi**: Efek hover halus, sistem tab interaktif, dan akordion lipat.