npm - vibes-plug - Versions diffs - 1.0.0 → 2.5.0 - Mend

vibes-plug 1.0.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/.github/workflows/publish.yml +20 -0
package/AGENTS.md +66 -0
package/BLUEPRINT.md +152 -60
package/CHANGELOG.md +50 -0
package/README.md +346 -194
package/package.json +25 -25
package/plugin.json +1 -1
package/skills/ai-cost-token-optimizer/SKILL.md +52 -0
package/skills/ai-llm-integration-expert/SKILL.md +180 -162
package/skills/api-design-expert/SKILL.md +314 -310
package/skills/app-analyzer-optimizer/SKILL.md +193 -189
package/skills/apple-ecosystem-expert/SKILL.md +142 -0
package/skills/async-queue-temporal-expert/SKILL.md +54 -0
package/skills/authentication-identity-expert/SKILL.md +251 -20
package/skills/auto-doc-updater/SKILL.md +214 -204
package/skills/autonomous-chaos-monkey/SKILL.md +63 -0
package/skills/autonomous-red-teamer/SKILL.md +59 -0
package/skills/autonomous-swarm-director/SKILL.md +69 -0
package/skills/autonomous-tdd-debugger/SKILL.md +65 -0
package/skills/bootstrap-to-modern/SKILL.md +90 -86
package/skills/brainstorming/SKILL.md +373 -353
package/skills/browser-automation-expert/SKILL.md +46 -0
package/skills/ci-cd-devops-architect/SKILL.md +72 -45
package/skills/cloud-hosting-expert/SKILL.md +244 -244
package/skills/coderabbit/SKILL.md +192 -192
package/skills/cron-scheduler-expert/SKILL.md +298 -0
package/skills/data-telemetry-expert/SKILL.md +213 -213
package/skills/database-orm-expert/SKILL.md +294 -294
package/skills/dependency-upgrade-migrator/SKILL.md +295 -0
package/skills/design-system-architect/SKILL.md +27 -10
package/skills/doku-mcp-server/SKILL.md +251 -0
package/skills/doku-payment-gateway/SKILL.md +227 -0
package/skills/e2e-testing-expert/SKILL.md +315 -315
package/skills/edge-serverless-db-expert/SKILL.md +43 -0
package/skills/email-notification-expert/SKILL.md +362 -0
package/skills/error-resilience-expert/SKILL.md +480 -0
package/skills/event-driven-architect/SKILL.md +81 -81
package/skills/feature-flag-analytics-expert/SKILL.md +46 -0
package/skills/file-upload-media-expert/SKILL.md +431 -0
package/skills/form-validation-expert/SKILL.md +401 -0
package/skills/fullstack-expert/SKILL.md +202 -202
package/skills/fullstack-expert/references/api_design_guide.md +466 -466
package/skills/fullstack-expert/references/multi_language_backend.md +528 -528
package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -253
package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -326
package/skills/gemini-agent-booster/SKILL.md +135 -135
package/skills/global-a11y-i18n-expert/SKILL.md +81 -81
package/skills/glsl-shader-expert/SKILL.md +101 -0
package/skills/go-programming-expert/SKILL.md +295 -295
package/skills/graphql-apollo-expert/SKILL.md +108 -0
package/skills/hig/SKILL.md +188 -188
package/skills/hyper-context-synthesizer/SKILL.md +55 -0
package/skills/js-backend-expert/SKILL.md +34 -9
package/skills/legacy-code-translator/SKILL.md +65 -0
package/skills/llm-cost-arbitrage-router/SKILL.md +59 -0
package/skills/logging-error-tracking-expert/SKILL.md +338 -0
package/skills/mcp-client-orchestrator/SKILL.md +70 -0
package/skills/mcp-server-architect/SKILL.md +194 -194
package/skills/micro-frontend-architect/SKILL.md +106 -0
package/skills/mobile-expo-expert/SKILL.md +186 -186
package/skills/mobile-push-notification-expert/SKILL.md +51 -0
package/skills/monday-design-aesthetic/SKILL.md +67 -67
package/skills/monorepo-architect/SKILL.md +227 -227
package/skills/mpa-orchestrator/SKILL.md +101 -101
package/skills/multi-agent-orchestration/SKILL.md +234 -234
package/skills/multiple-entry-points/SKILL.md +55 -55
package/skills/mvc-expert/SKILL.md +231 -231
package/skills/payment-gateway-expert/SKILL.md +45 -45
package/skills/performance-web-vitals/SKILL.md +332 -332
package/skills/post-quantum-crypto-migrator/SKILL.md +57 -0
package/skills/prd-architect/SKILL.md +201 -191
package/skills/proactive-background-watcher/SKILL.md +62 -0
package/skills/production-ready-hardener/PRODUCTION_READINESS_REPORT.md +67 -0
package/skills/production-ready-hardener/SKILL.md +173 -186
package/skills/production-ready-hardener/references/production_checklist.md +161 -161
package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +881 -875
package/skills/project-context-mapper/SKILL.md +79 -0
package/skills/python-programming-expert/SKILL.md +263 -132
package/skills/rate-limit-abuse-prevention/SKILL.md +371 -0
package/skills/realtime-collaboration-expert/SKILL.md +45 -45
package/skills/rust-programming-expert/SKILL.md +235 -235
package/skills/saas-billing/SKILL.md +377 -377
package/skills/saas-multi-tenant/SKILL.md +251 -237
package/skills/saas-mvp-launcher/SKILL.md +10 -0
package/skills/saas-transformer/SKILL.md +187 -144
package/skills/saas-transformer/references/billing_integration_guide.md +401 -401
package/skills/saas-transformer/references/feature_gating_patterns.md +137 -137
package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -121
package/skills/saas-transformer/scripts/saas_transformation_scanner.py +39 -29
package/skills/scalability-clean-code/SKILL.md +229 -229
package/skills/self-evolving-memory-graph/SKILL.md +75 -0
package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -0
package/skills/senior-frontend/SKILL.md +161 -161
package/skills/senior-fullstack/SKILL.md +167 -167
package/skills/seo/SKILL.md +235 -225
package/skills/seo-geo/SKILL.md +188 -188
package/skills/session-context-loader/SKILL.md +77 -0
package/skills/session-handoff-resume/SKILL.md +158 -158
package/skills/skill_baru/SKILL.md +172 -147
package/skills/spa-orchestrator/SKILL.md +288 -288
package/skills/state-management-expert/SKILL.md +272 -272
package/skills/supabase-security-expert/SKILL.md +243 -243
package/skills/tailwind-expert/SKILL.md +188 -188
package/skills/tanstack-query-expert/SKILL.md +199 -199
package/skills/token-saver/SKILL.md +119 -111
package/skills/typescript-expert/SKILL.md +324 -279
package/skills/ui-components-expert/SKILL.md +263 -46
package/skills/ui-ux-pro-max/SKILL.md +202 -201
package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
package/skills/ui_ux_expert/SKILL.md +17 -6
package/skills/vector-db-rag-expert/SKILL.md +52 -0
package/skills/vibe-code-gardener/SKILL.md +181 -173
package/skills/visual-qa-vision-agent/SKILL.md +65 -0
package/skills/vue-frontend-expert/SKILL.md +126 -0
package/skills/web-3d-graphics-expert/SKILL.md +131 -0
package/skills/web-game-engine-expert/SKILL.md +96 -0
package/skills/web-scraper/SKILL.md +207 -205
package/skills/website-design-cloner/SKILL.md +174 -0
package/skills/webxr-ar-vr-expert/SKILL.md +117 -0
package/skills/zero-to-prod-orchestrator/SKILL.md +206 -180
package/skills/zero-trust-secret-vault/SKILL.md +40 -0
package/vibes-swarm-demo.gif +0 -0

package/skills/performance-web-vitals/SKILL.md CHANGED Viewed

@@ -1,332 +1,332 @@
----
-name: performance-web-vitals
-description: "Expert guide for Web Performance optimization: Core Web Vitals (LCP, INP, CLS), bundle analysis, image optimization, rendering strategies, and Lighthouse score improvement / Panduan ahli untuk optimasi performa web: Core Web Vitals (LCP, INP, CLS), analisis bundle, optimasi gambar, strategi rendering, dan peningkatan skor Lighthouse."
-author: "Roedy Rustam"
----
-# Web Performance & Core Web Vitals Expert
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
----
-<a name="english"></a>
-## English
-### Description
-Expert guide for measuring, diagnosing, and optimizing web application performance with a focus on **Core Web Vitals** (LCP, INP, CLS), JavaScript bundle optimization, image and font loading strategies, rendering performance, and achieving high Lighthouse scores. Covers Next.js 15, React 19, and modern browser APIs.
-### Trigger Conditions
-- Improving Lighthouse performance score below 90.
-- Diagnosing poor LCP, INP, or CLS metrics.
-- Reducing JavaScript bundle size or eliminating render-blocking resources.
-- Optimizing image loading, lazy loading, or font delivery.
-- Implementing React performance patterns (memo, useDeferredValue, Suspense).
-- Setting up Real User Monitoring (RUM) for Core Web Vitals.
-- Optimizing server response times (TTFB).
----
-### Core Web Vitals Targets (2024+)
-| Metric | Good | Needs Improvement | Poor | Measures |
-|---|---|---|---|---|
-| **LCP** (Largest Contentful Paint) | ≤ 2.5s | 2.5–4.0s | > 4.0s | Loading performance |
-| **INP** (Interaction to Next Paint) | ≤ 200ms | 200–500ms | > 500ms | Interactivity (replaced FID) |
-| **CLS** (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 | Visual stability |
-| **FCP** (First Contentful Paint) | ≤ 1.8s | 1.8–3.0s | > 3.0s | Perceived loading |
-| **TTFB** (Time to First Byte) | ≤ 800ms | 800–1800ms | > 1800ms | Server responsiveness |
----
-### LCP Optimization Strategies
-#### 1. Identify and Optimize the LCP Element
-```typescript
-// Measure LCP with web-vitals library
-import { onLCP, onINP, onCLS } from 'web-vitals';
-onLCP((metric) => {
-  console.log('LCP:', metric.value, 'element:', metric.attribution.lcpEntry?.element);
-  // Send to analytics
-  sendToAnalytics({ name: metric.name, value: metric.value });
-});
-```
-#### 2. Preload LCP Image (Hero Image)
-```html
-<!-- In <head> — preload the hero image before CSS blocks it -->
-<link rel="preload" as="image" href="/hero.webp"
-      imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w"
-      imagesizes="(max-width: 600px) 480px, 800px"
-      fetchpriority="high">
-```
-#### 3. Next.js Image Component (LCP Hero)
-```tsx
-import Image from 'next/image';
-// LCP image: priority=true + fill or explicit size
-<Image
-  src="/hero.webp"
-  alt="Hero banner"
-  width={1200}
-  height={600}
-  priority           // disables lazy loading, adds preload link
-  fetchPriority="high"
-  quality={85}
-  sizes="(max-width: 768px) 100vw, 1200px"
-/>
-// Below-the-fold images: lazy load (default)
-<Image
-  src="/product.webp"
-  alt="Product"
-  width={400}
-  height={300}
-  // loading="lazy" is the default — no need to specify
-/>
-```
----
-### INP Optimization Strategies
-#### 1. Break Up Long Tasks
-```typescript
-// BAD: Long synchronous task blocks the main thread
-function processLargeList(items: Item[]) {
-  return items.map(expensiveTransform); // blocks for 500ms
-}
-// GOOD: Yield control back to browser between chunks
-async function processLargeListAsync(items: Item[]) {
-  const results: Result[] = [];
-  for (let i = 0; i < items.length; i++) {
-    results.push(expensiveTransform(items[i]));
-    if (i % 50 === 0) await scheduler.yield(); // yield every 50 items
-  }
-  return results;
-}
-```
-#### 2. React 19 — Concurrent Features for INP
-```tsx
-import { useTransition, useDeferredValue, startTransition } from 'react';
-// Non-urgent state updates — mark as transitions
-function SearchResults() {
-  const [query, setQuery] = useState('');
-  const [isPending, startTransition] = useTransition();
-  const deferredQuery = useDeferredValue(query);
-  return (
-    <>
-      <input
-        value={query}
-        onChange={(e) => {
-          setQuery(e.target.value); // urgent: update input immediately
-          startTransition(() => {
-            // non-urgent: defer expensive filtering
-          });
-        }}
-      />
-      {isPending && <Spinner />}
-      {/* deferredQuery triggers re-render without blocking input */}
-      <ResultsList query={deferredQuery} />
-    </>
-  );
-}
-```
-#### 3. Virtualize Long Lists
-```tsx
-// Use TanStack Virtual for large lists (1000+ items)
-import { useVirtualizer } from '@tanstack/react-virtual';
-function VirtualList({ items }: { items: Item[] }) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 60, // estimated row height in px
-    overscan: 5,
-  });
-  return (
-    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
-      <div style={{ height: virtualizer.getTotalSize() }}>
-        {virtualizer.getVirtualItems().map((vItem) => (
-          <div
-            key={vItem.key}
-            style={{ position: 'absolute', top: vItem.start, height: vItem.size }}
-          >
-            <ItemRow item={items[vItem.index]} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-```
----
-### CLS Optimization Strategies
-```css
-/* 1. Reserve space for images with aspect-ratio */
-img, video {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 16 / 9; /* prevents layout shift before load */
-}
-/* 2. Reserve space for dynamic content */
-.ad-container {
-  min-height: 250px; /* reserve ad slot height */
-}
-/* 3. Use font-display: optional or swap */
-@font-face {
-  font-family: 'Inter';
-  src: url('/fonts/inter.woff2') format('woff2');
-  font-display: optional; /* no invisible text, no layout shift */
-}
-```
-```tsx
-// 4. Avoid inserting content above existing content
-// BAD: inserting notification banner at top pushes content down
-setShowBanner(true); // causes CLS
-// GOOD: use position:fixed or reserve space at the top
-<div className="h-12">{showBanner && <Banner />}</div>
-```
----
-### Bundle Optimization
-#### Next.js Bundle Analysis
-```bash
-# Analyze bundle composition
-ANALYZE=true npm run build
-# Or use @next/bundle-analyzer
-```
-#### Code Splitting Patterns
-```tsx
-import dynamic from 'next/dynamic';
-// Dynamic import — code splits automatically
-const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
-  loading: () => <ChartSkeleton />,
-  ssr: false, // disable SSR for client-only components
-});
-// Lazy load with React.lazy (non-Next.js)
-const Modal = React.lazy(() => import('./Modal'));
-```
-#### Tree-shaking Checklist
-- Use named imports: `import { debounce } from 'lodash-es'` (not `import _ from 'lodash'`)
-- Set `"sideEffects": false` in `package.json` for libraries.
-- Avoid `import *` from large libraries.
-- Replace `moment.js` with `date-fns` or `dayjs`.
-- Use `sharp` for server-side image processing.
----
-### React Performance Patterns
-```tsx
-// memo — skip re-render if props didn't change
-const ExpensiveList = memo(({ items }: { items: Item[] }) => (
-  <ul>{items.map((i) => <li key={i.id}>{i.name}</li>)}</ul>
-));
-// useCallback — stable function reference for memo children
-const handleDelete = useCallback((id: string) => {
-  setItems((prev) => prev.filter((i) => i.id !== id));
-}, []); // empty deps = stable reference
-// useMemo — memoize expensive calculations
-const sortedItems = useMemo(
-  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
-  [items]
-);
-```
----
-### Performance Monitoring Setup
-```typescript
-// report-vitals.ts — send Core Web Vitals to analytics
-import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
-function sendToAnalytics({ name, value, id, navigationType }: Metric) {
-  // Send to PostHog, Google Analytics, or your own endpoint
-  fetch('/api/analytics/vitals', {
-    method: 'POST',
-    body: JSON.stringify({ name, value: Math.round(value), id, navigationType }),
-    keepalive: true, // ensures request completes even if page unloads
-  });
-}
-onCLS(sendToAnalytics);
-onINP(sendToAnalytics);
-onLCP(sendToAnalytics);
-onFCP(sendToAnalytics);
-onTTFB(sendToAnalytics);
-```
----
-### Lighthouse Score Improvement Checklist
-- [ ] LCP image has `priority` or `fetchpriority="high"` + preload link.
-- [ ] All non-LCP images use `loading="lazy"`.
-- [ ] Fonts loaded with `font-display: optional` or preloaded with `rel="preload"`.
-- [ ] No render-blocking `<script>` tags without `defer` or `async`.
-- [ ] Bundle size < 200KB gzipped for initial JS.
-- [ ] Images served in WebP/AVIF format with `srcset`.
-- [ ] Server response time (TTFB) < 600ms — use CDN edge caching.
-- [ ] Long tasks (> 50ms) are broken up or deferred.
-- [ ] Virtual lists used for > 100 items.
-- [ ] Unused CSS removed (PurgeCSS / Tailwind purge).
-- [ ] HTTP/2 or HTTP/3 enabled on server.
-- [ ] Resource hints: `dns-prefetch`, `preconnect` for third-party origins.
----
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-### Deskripsi
-Panduan ahli untuk mengukur, mendiagnosis, dan mengoptimalkan performa aplikasi web dengan fokus pada **Core Web Vitals** (LCP, INP, CLS), optimasi JavaScript bundle, strategi loading gambar dan font, performa rendering, dan mencapai skor Lighthouse yang tinggi.
-### Kondisi Pemicu
-- Meningkatkan skor Lighthouse di bawah 90.
-- Mendiagnosis metrik LCP, INP, atau CLS yang buruk.
-- Mengurangi ukuran JavaScript bundle atau menghilangkan resource yang memblokir render.
-- Mengoptimalkan loading gambar, lazy loading, atau pengiriman font.
-- Mengimplementasikan pola performa React (memo, useDeferredValue, Suspense).
-- Menyiapkan Real User Monitoring (RUM) untuk Core Web Vitals.
-### Target Core Web Vitals
-| Metrik | Baik | Perlu Perbaikan | Buruk |
-|---|---|---|---|
-| **LCP** | ≤ 2,5 detik | 2,5–4,0 detik | > 4,0 detik |
-| **INP** | ≤ 200ms | 200–500ms | > 500ms |
-| **CLS** | ≤ 0,1 | 0,1–0,25 | > 0,25 |
-### Ringkasan Strategi Optimasi
-- **LCP**: Preload hero image, gunakan `priority` di Next.js Image, optimalkan TTFB dengan CDN.
-- **INP**: Pecah long task dengan `scheduler.yield()`, gunakan `useTransition` React 19, virtualisasi list panjang.
-- **CLS**: Reservasi ruang untuk gambar dengan `aspect-ratio`, hindari penyisipan konten di atas konten yang sudah ada.
-- **Bundle**: Analisis bundle, gunakan dynamic import, tree-shaking, dan named imports.
-- **Monitoring**: Implementasikan `web-vitals` library untuk melaporkan metrik ke analytics secara real-time.
+---
+name: performance-web-vitals
+description: "Expert guide for Web Performance optimization: Core Web Vitals (LCP, INP, CLS), bundle analysis, image optimization, rendering strategies, and Lighthouse score improvement / Panduan ahli untuk optimasi performa web: Core Web Vitals (LCP, INP, CLS), analisis bundle, optimasi gambar, strategi rendering, dan peningkatan skor Lighthouse."
+author: "Roedy Rustam"
+---
+# Web Performance & Core Web Vitals Expert
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+---
+<a name="english"></a>
+## English
+### Description
+Expert guide for measuring, diagnosing, and optimizing web application performance with a focus on **Core Web Vitals** (LCP, INP, CLS), JavaScript bundle optimization, image and font loading strategies, rendering performance, and achieving high Lighthouse scores. Covers Next.js 15, React 19, and modern browser APIs.
+### Trigger Conditions
+- Improving Lighthouse performance score below 90.
+- Diagnosing poor LCP, INP, or CLS metrics.
+- Reducing JavaScript bundle size or eliminating render-blocking resources.
+- Optimizing image loading, lazy loading, or font delivery.
+- Implementing React performance patterns (memo, useDeferredValue, Suspense).
+- Setting up Real User Monitoring (RUM) for Core Web Vitals.
+- Optimizing server response times (TTFB).
+---
+### Core Web Vitals Targets (2024+)
+| Metric | Good | Needs Improvement | Poor | Measures |
+|---|---|---|---|---|
+| **LCP** (Largest Contentful Paint) | ≤ 2.5s | 2.5–4.0s | > 4.0s | Loading performance |
+| **INP** (Interaction to Next Paint) | ≤ 200ms | 200–500ms | > 500ms | Interactivity (replaced FID) |
+| **CLS** (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 | Visual stability |
+| **FCP** (First Contentful Paint) | ≤ 1.8s | 1.8–3.0s | > 3.0s | Perceived loading |
+| **TTFB** (Time to First Byte) | ≤ 800ms | 800–1800ms | > 1800ms | Server responsiveness |
+---
+### LCP Optimization Strategies
+#### 1. Identify and Optimize the LCP Element
+```typescript
+// Measure LCP with web-vitals library
+import { onLCP, onINP, onCLS } from 'web-vitals';
+onLCP((metric) => {
+  console.log('LCP:', metric.value, 'element:', metric.attribution.lcpEntry?.element);
+  // Send to analytics
+  sendToAnalytics({ name: metric.name, value: metric.value });
+});
+```
+#### 2. Preload LCP Image (Hero Image)
+```html
+<!-- In <head> — preload the hero image before CSS blocks it -->
+<link rel="preload" as="image" href="/hero.webp"
+      imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w"
+      imagesizes="(max-width: 600px) 480px, 800px"
+      fetchpriority="high">
+```
+#### 3. Next.js Image Component (LCP Hero)
+```tsx
+import Image from 'next/image';
+// LCP image: priority=true + fill or explicit size
+<Image
+  src="/hero.webp"
+  alt="Hero banner"
+  width={1200}
+  height={600}
+  priority           // disables lazy loading, adds preload link
+  fetchPriority="high"
+  quality={85}
+  sizes="(max-width: 768px) 100vw, 1200px"
+/>
+// Below-the-fold images: lazy load (default)
+<Image
+  src="/product.webp"
+  alt="Product"
+  width={400}
+  height={300}
+  // loading="lazy" is the default — no need to specify
+/>
+```
+---
+### INP Optimization Strategies
+#### 1. Break Up Long Tasks
+```typescript
+// BAD: Long synchronous task blocks the main thread
+function processLargeList(items: Item[]) {
+  return items.map(expensiveTransform); // blocks for 500ms
+}
+// GOOD: Yield control back to browser between chunks
+async function processLargeListAsync(items: Item[]) {
+  const results: Result[] = [];
+  for (let i = 0; i < items.length; i++) {
+    results.push(expensiveTransform(items[i]));
+    if (i % 50 === 0) await scheduler.yield(); // yield every 50 items
+  }
+  return results;
+}
+```
+#### 2. React 19 — Concurrent Features for INP
+```tsx
+import { useTransition, useDeferredValue, startTransition } from 'react';
+// Non-urgent state updates — mark as transitions
+function SearchResults() {
+  const [query, setQuery] = useState('');
+  const [isPending, startTransition] = useTransition();
+  const deferredQuery = useDeferredValue(query);
+  return (
+    <>
+      <input
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value); // urgent: update input immediately
+          startTransition(() => {
+            // non-urgent: defer expensive filtering
+          });
+        }}
+      />
+      {isPending && <Spinner />}
+      {/* deferredQuery triggers re-render without blocking input */}
+      <ResultsList query={deferredQuery} />
+    </>
+  );
+}
+```
+#### 3. Virtualize Long Lists
+```tsx
+// Use TanStack Virtual for large lists (1000+ items)
+import { useVirtualizer } from '@tanstack/react-virtual';
+function VirtualList({ items }: { items: Item[] }) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 60, // estimated row height in px
+    overscan: 5,
+  });
+  return (
+    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
+      <div style={{ height: virtualizer.getTotalSize() }}>
+        {virtualizer.getVirtualItems().map((vItem) => (
+          <div
+            key={vItem.key}
+            style={{ position: 'absolute', top: vItem.start, height: vItem.size }}
+          >
+            <ItemRow item={items[vItem.index]} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+---
+### CLS Optimization Strategies
+```css
+/* 1. Reserve space for images with aspect-ratio */
+img, video {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9; /* prevents layout shift before load */
+}
+/* 2. Reserve space for dynamic content */
+.ad-container {
+  min-height: 250px; /* reserve ad slot height */
+}
+/* 3. Use font-display: optional or swap */
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter.woff2') format('woff2');
+  font-display: optional; /* no invisible text, no layout shift */
+}
+```
+```tsx
+// 4. Avoid inserting content above existing content
+// BAD: inserting notification banner at top pushes content down
+setShowBanner(true); // causes CLS
+// GOOD: use position:fixed or reserve space at the top
+<div className="h-12">{showBanner && <Banner />}</div>
+```
+---
+### Bundle Optimization
+#### Next.js Bundle Analysis
+```bash
+# Analyze bundle composition
+ANALYZE=true npm run build
+# Or use @next/bundle-analyzer
+```
+#### Code Splitting Patterns
+```tsx
+import dynamic from 'next/dynamic';
+// Dynamic import — code splits automatically
+const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
+  loading: () => <ChartSkeleton />,
+  ssr: false, // disable SSR for client-only components
+});
+// Lazy load with React.lazy (non-Next.js)
+const Modal = React.lazy(() => import('./Modal'));
+```
+#### Tree-shaking Checklist
+- Use named imports: `import { debounce } from 'lodash-es'` (not `import _ from 'lodash'`)
+- Set `"sideEffects": false` in `package.json` for libraries.
+- Avoid `import *` from large libraries.
+- Replace `moment.js` with `date-fns` or `dayjs`.
+- Use `sharp` for server-side image processing.
+---
+### React Performance Patterns
+```tsx
+// memo — skip re-render if props didn't change
+const ExpensiveList = memo(({ items }: { items: Item[] }) => (
+  <ul>{items.map((i) => <li key={i.id}>{i.name}</li>)}</ul>
+));
+// useCallback — stable function reference for memo children
+const handleDelete = useCallback((id: string) => {
+  setItems((prev) => prev.filter((i) => i.id !== id));
+}, []); // empty deps = stable reference
+// useMemo — memoize expensive calculations
+const sortedItems = useMemo(
+  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
+  [items]
+);
+```
+---
+### Performance Monitoring Setup
+```typescript
+// report-vitals.ts — send Core Web Vitals to analytics
+import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
+function sendToAnalytics({ name, value, id, navigationType }: Metric) {
+  // Send to PostHog, Google Analytics, or your own endpoint
+  fetch('/api/analytics/vitals', {
+    method: 'POST',
+    body: JSON.stringify({ name, value: Math.round(value), id, navigationType }),
+    keepalive: true, // ensures request completes even if page unloads
+  });
+}
+onCLS(sendToAnalytics);
+onINP(sendToAnalytics);
+onLCP(sendToAnalytics);
+onFCP(sendToAnalytics);
+onTTFB(sendToAnalytics);
+```
+---
+### Lighthouse Score Improvement Checklist
+- [ ] LCP image has `priority` or `fetchpriority="high"` + preload link.
+- [ ] All non-LCP images use `loading="lazy"`.
+- [ ] Fonts loaded with `font-display: optional` or preloaded with `rel="preload"`.
+- [ ] No render-blocking `<script>` tags without `defer` or `async`.
+- [ ] Bundle size < 200KB gzipped for initial JS.
+- [ ] Images served in WebP/AVIF format with `srcset`.
+- [ ] Server response time (TTFB) < 600ms — use CDN edge caching.
+- [ ] Long tasks (> 50ms) are broken up or deferred.
+- [ ] Virtual lists used for > 100 items.
+- [ ] Unused CSS removed (PurgeCSS / Tailwind purge).
+- [ ] HTTP/2 or HTTP/3 enabled on server.
+- [ ] Resource hints: `dns-prefetch`, `preconnect` for third-party origins.
+---
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+### Deskripsi
+Panduan ahli untuk mengukur, mendiagnosis, dan mengoptimalkan performa aplikasi web dengan fokus pada **Core Web Vitals** (LCP, INP, CLS), optimasi JavaScript bundle, strategi loading gambar dan font, performa rendering, dan mencapai skor Lighthouse yang tinggi.
+### Kondisi Pemicu
+- Meningkatkan skor Lighthouse di bawah 90.
+- Mendiagnosis metrik LCP, INP, atau CLS yang buruk.
+- Mengurangi ukuran JavaScript bundle atau menghilangkan resource yang memblokir render.
+- Mengoptimalkan loading gambar, lazy loading, atau pengiriman font.
+- Mengimplementasikan pola performa React (memo, useDeferredValue, Suspense).
+- Menyiapkan Real User Monitoring (RUM) untuk Core Web Vitals.
+### Target Core Web Vitals
+| Metrik | Baik | Perlu Perbaikan | Buruk |
+|---|---|---|---|
+| **LCP** | ≤ 2,5 detik | 2,5–4,0 detik | > 4,0 detik |
+| **INP** | ≤ 200ms | 200–500ms | > 500ms |
+| **CLS** | ≤ 0,1 | 0,1–0,25 | > 0,25 |
+### Ringkasan Strategi Optimasi
+- **LCP**: Preload hero image, gunakan `priority` di Next.js Image, optimalkan TTFB dengan CDN.
+- **INP**: Pecah long task dengan `scheduler.yield()`, gunakan `useTransition` React 19, virtualisasi list panjang.
+- **CLS**: Reservasi ruang untuk gambar dengan `aspect-ratio`, hindari penyisipan konten di atas konten yang sudah ada.
+- **Bundle**: Analisis bundle, gunakan dynamic import, tree-shaking, dan named imports.
+- **Monitoring**: Implementasikan `web-vitals` library untuk melaporkan metrik ke analytics secara real-time.