vibes-plug 1.0.0 → 2.11.0

package/skills/data-telemetry-expert/SKILL.md

@@ -1,213 +1,219 @@
----
-name: data-telemetry-expert
-description: "Expert guide for observability, analytics, telemetry, and data pipelines (OpenTelemetry, PostHog, Mixpanel) / Panduan ahli untuk observabilitas, telemetri, dan analitik."
+---
+name: data-telemetry-expert
+description: "Expert guide for observability, analytics, telemetry, and data pipelines (OpenTelemetry, PostHog, Mixpanel) / Panduan ahli untuk observabilitas, telemetri, dan analitik."
 author: "Roedy Rustam"
----
-
-# Data & Telemetry Expert (OpenTelemetry 1.x / ClickHouse Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Expert guide for production observability, product analytics, and data pipelines. Covers **OpenTelemetry 1.x** (stable, vendor-neutral traces/metrics/logs), **PostHog** (open-source product analytics), **ClickHouse** (OLAP analytics database), Grafana stack, and AI agent observability patterns.
-
-### Trigger Conditions
-- Adding distributed tracing to a microservice or Next.js application.
-- Setting up structured logging and metrics collection.
-- Implementing product analytics (funnel analysis, feature flags, session replay).
-- Building a high-performance analytics pipeline with ClickHouse.
-- Monitoring AI agent runs, LLM token costs, and response quality.
-
-### OpenTelemetry 1.x — Vendor-Neutral Observability
-
-OpenTelemetry (OTel) is the CNCF standard for generating traces, metrics, and logs from any application.
-
-#### Three Pillars of OTel
-
-| Signal | What It Captures | Example |
-|---|---|---|
-| **Traces** | Request flow across services | `GET /api/users` → DB query → cache |
-| **Metrics** | Numeric measurements over time | `http_requests_total`, `db_query_duration` |
-| **Logs** | Structured event records | `{"level":"error","msg":"DB timeout"}` |
-
-#### Next.js 15 + OTel Instrumentation
-```typescript
-// instrumentation.ts (Next.js built-in OTel support)
-export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
-    const { NodeSDK } = await import('@opentelemetry/sdk-node');
-    const { OTLPTraceExporter } = await import('@opentelemetry/exporter-trace-otlp-http');
-    const { OTLPMetricExporter } = await import('@opentelemetry/exporter-metrics-otlp-http');
-    const { PeriodicExportingMetricReader } = await import('@opentelemetry/sdk-metrics');
-    const { Resource } = await import('@opentelemetry/resources');
-    const { SEMRESATTRS_SERVICE_NAME } = await import('@opentelemetry/semantic-conventions');
-
-    const sdk = new NodeSDK({
-      resource: new Resource({
-        [SEMRESATTRS_SERVICE_NAME]: 'my-saas-app',
-      }),
-      traceExporter: new OTLPTraceExporter({
-        url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
-      }),
-      metricReader: new PeriodicExportingMetricReader({
-        exporter: new OTLPMetricExporter(),
-        exportIntervalMillis: 30_000,
-      }),
-    });
-
-    sdk.start();
-  }
-}
-```
-
-#### Custom Spans for Business Logic
-```typescript
-import { trace, SpanStatusCode } from '@opentelemetry/api';
-
-const tracer = trace.getTracer('my-service', '1.0.0');
-
-async function processOrder(orderId: string) {
-  return tracer.startActiveSpan('processOrder', async (span) => {
-    span.setAttribute('order.id', orderId);
-    span.setAttribute('order.source', 'api');
-    
-    try {
-      const order = await db.order.findUnique({ where: { id: orderId } });
-      span.setAttribute('order.amount', order.amount);
-      
-      const result = await chargeCustomer(order);
-      span.setStatus({ code: SpanStatusCode.OK });
-      return result;
-    } catch (error) {
-      span.recordException(error as Error);
-      span.setStatus({ code: SpanStatusCode.ERROR, message: String(error) });
-      throw error;
-    } finally {
-      span.end();
-    }
-  });
-}
-```
-
-### ClickHouse — High-Performance Analytics Database
-ClickHouse is the 2026 standard for analytical workloads — ingests billions of events and queries them in milliseconds:
-
-```sql
--- Create an events table optimized for time-series analytics
-CREATE TABLE events (
-    event_id     UUID DEFAULT generateUUIDv4(),
-    workspace_id String,
-    user_id      String,
-    event_name   LowCardinality(String),
-    properties   JSON,
-    timestamp    DateTime64(3, 'UTC'),
-    date         Date DEFAULT toDate(timestamp)
-)
-ENGINE = MergeTree()
-PARTITION BY toYYYYMM(date)
-ORDER BY (workspace_id, event_name, timestamp)
-TTL date + INTERVAL 1 YEAR;
-
--- Query: Funnel analysis — users who signed up then upgraded
-SELECT
-    countIf(event_name = 'signup') AS signups,
-    countIf(event_name = 'plan_upgraded') AS upgrades,
-    round(countIf(event_name = 'plan_upgraded') / countIf(event_name = 'signup') * 100, 2) AS conversion_rate
-FROM events
-WHERE workspace_id = 'ws_abc'
-  AND timestamp >= now() - INTERVAL 30 DAY;
-```
-
-```typescript
-// Node.js ClickHouse client
-import { createClient } from '@clickhouse/client';
-
-const client = createClient({ url: process.env.CLICKHOUSE_URL });
-
-await client.insert({
-  table: 'events',
-  values: [{
-    workspace_id: 'ws_abc',
-    user_id: 'user_123',
-    event_name: 'page_view',
-    properties: { path: '/dashboard', referrer: 'google.com' },
-    timestamp: new Date().toISOString(),
-  }],
-  format: 'JSONEachRow',
-});
-```
-
-### PostHog — Open-Source Product Analytics
-```typescript
-// Next.js + PostHog (client-side)
-import posthog from 'posthog-js';
-
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-  api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST ?? 'https://app.posthog.com',
-  capture_pageview: false, // Manual with App Router
-});
-
-// Track custom events
-posthog.capture('feature_used', {
-  feature: 'ai_assistant',
-  plan: user.plan,
-  workspace_id: workspace.id,
-});
-
-// Feature flags
-if (posthog.isFeatureEnabled('new-dashboard')) {
-  return <NewDashboard />;
-}
-```
-
-### AI Agent Observability
-Track LLM costs, latency, and quality for production AI applications:
-```typescript
-// Custom OTel attributes for LLM calls
-span.setAttribute('llm.model', 'claude-4-sonnet');
-span.setAttribute('llm.input_tokens', response.usage.input_tokens);
-span.setAttribute('llm.output_tokens', response.usage.output_tokens);
-span.setAttribute('llm.cost_usd', calculateCost(response.usage));
-span.setAttribute('llm.latency_ms', Date.now() - startTime);
-span.setAttribute('llm.cached', response.usage.cache_read_input_tokens > 0);
-```
-
-Backend tracing tools for LLM: **LangSmith** (LangChain/LangGraph), **OpenAI Tracing** (Agents SDK), **Langfuse** (open-source, any LLM).
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan ahli untuk observabilitas produksi, analitik produk, dan pipeline data. Mencakup **OpenTelemetry 1.x** (stabil, vendor-neutral traces/metrics/logs), **PostHog** (analitik produk open-source), **ClickHouse** (database analitik OLAP), dan pola observabilitas agen AI.
-
-### Kondisi Pemicu
-- Menambahkan distributed tracing ke microservice atau aplikasi Next.js.
-- Menyiapkan structured logging dan pengumpulan metrik.
-- Mengimplementasikan analitik produk (analisis funnel, feature flags, session replay).
-- Membangun pipeline analitik berkinerja tinggi dengan ClickHouse.
-- Memantau run agen AI, biaya token LLM, dan kualitas respons.
-
-### OpenTelemetry 1.x — Observabilitas Vendor-Neutral
-
-Tiga pilar OTel:
-- **Traces**: Aliran permintaan antar layanan.
-- **Metrics**: Pengukuran numerik dari waktu ke waktu.
-- **Logs**: Catatan peristiwa terstruktur.
-
-Integrasikan dengan Next.js 15 melalui file `instrumentation.ts` bawaan — OTel SDK otomatis mendistribusikan trace ke backend pilihan (Grafana Tempo, Jaeger, Honeycomb, Datadog, dll.).
-
-### ClickHouse — Database Analitik Berkinerja Tinggi
-ClickHouse adalah standar 2026 untuk workload analitik — menyerap miliaran event dan melakukan query dalam milidetik. Gunakan engine `MergeTree` dengan partisi per bulan dan pengurutan berdasarkan kolom yang sering di-filter.
-
-### PostHog — Analitik Produk Open-Source
-PostHog menyediakan analisis funnel, feature flags, session replay, dan A/B testing dalam satu platform yang dapat di-self-host. Integrasikan dengan Next.js App Router menggunakan `posthog-js`.
-
-### Observabilitas Agen AI
-Lacak biaya LLM, latensi, dan kualitas untuk aplikasi AI produksi menggunakan custom OTel attributes. Gunakan LangSmith, OpenAI Tracing, atau Langfuse (open-source) sebagai backend tracing LLM.
+---
+
+# Data & Telemetry Expert (OpenTelemetry 1.x / ClickHouse Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<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 guide for production observability, product analytics, and data pipelines. Covers **OpenTelemetry 1.x** (stable, vendor-neutral traces/metrics/logs), **PostHog** (open-source product analytics), **ClickHouse** (OLAP analytics database), Grafana stack, and AI agent observability patterns.
+
+### Trigger Conditions
+- Adding distributed tracing to a microservice or Next.js application.
+- Setting up structured logging and metrics collection.
+- Implementing product analytics (funnel analysis, feature flags, session replay).
+- Building a high-performance analytics pipeline with ClickHouse.
+- Monitoring AI agent runs, LLM token costs, and response quality.
+
+### OpenTelemetry 1.x — Vendor-Neutral Observability
+
+OpenTelemetry (OTel) is the CNCF standard for generating traces, metrics, and logs from any application.
+
+#### Three Pillars of OTel
+
+| Signal | What It Captures | Example |
+|---|---|---|
+| **Traces** | Request flow across services | `GET /api/users` → DB query → cache |
+| **Metrics** | Numeric measurements over time | `http_requests_total`, `db_query_duration` |
+| **Logs** | Structured event records | `{"level":"error","msg":"DB timeout"}` |
+
+#### Next.js 15 + OTel Instrumentation
+```typescript
+// instrumentation.ts (Next.js built-in OTel support)
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    const { NodeSDK } = await import('@opentelemetry/sdk-node');
+    const { OTLPTraceExporter } = await import('@opentelemetry/exporter-trace-otlp-http');
+    const { OTLPMetricExporter } = await import('@opentelemetry/exporter-metrics-otlp-http');
+    const { PeriodicExportingMetricReader } = await import('@opentelemetry/sdk-metrics');
+    const { Resource } = await import('@opentelemetry/resources');
+    const { SEMRESATTRS_SERVICE_NAME } = await import('@opentelemetry/semantic-conventions');
+
+    const sdk = new NodeSDK({
+      resource: new Resource({
+        [SEMRESATTRS_SERVICE_NAME]: 'my-saas-app',
+      }),
+      traceExporter: new OTLPTraceExporter({
+        url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
+      }),
+      metricReader: new PeriodicExportingMetricReader({
+        exporter: new OTLPMetricExporter(),
+        exportIntervalMillis: 30_000,
+      }),
+    });
+
+    sdk.start();
+  }
+}
+```
+
+#### Custom Spans for Business Logic
+```typescript
+import { trace, SpanStatusCode } from '@opentelemetry/api';
+
+const tracer = trace.getTracer('my-service', '1.0.0');
+
+async function processOrder(orderId: string) {
+  return tracer.startActiveSpan('processOrder', async (span) => {
+    span.setAttribute('order.id', orderId);
+    span.setAttribute('order.source', 'api');
+    
+    try {
+      const order = await db.order.findUnique({ where: { id: orderId } });
+      span.setAttribute('order.amount', order.amount);
+      
+      const result = await chargeCustomer(order);
+      span.setStatus({ code: SpanStatusCode.OK });
+      return result;
+    } catch (error) {
+      span.recordException(error as Error);
+      span.setStatus({ code: SpanStatusCode.ERROR, message: String(error) });
+      throw error;
+    } finally {
+      span.end();
+    }
+  });
+}
+```
+
+### ClickHouse — High-Performance Analytics Database
+ClickHouse is the 2026 standard for analytical workloads — ingests billions of events and queries them in milliseconds:
+
+```sql
+-- Create an events table optimized for time-series analytics
+CREATE TABLE events (
+    event_id     UUID DEFAULT generateUUIDv4(),
+    workspace_id String,
+    user_id      String,
+    event_name   LowCardinality(String),
+    properties   JSON,
+    timestamp    DateTime64(3, 'UTC'),
+    date         Date DEFAULT toDate(timestamp)
+)
+ENGINE = MergeTree()
+PARTITION BY toYYYYMM(date)
+ORDER BY (workspace_id, event_name, timestamp)
+TTL date + INTERVAL 1 YEAR;
+
+-- Query: Funnel analysis — users who signed up then upgraded
+SELECT
+    countIf(event_name = 'signup') AS signups,
+    countIf(event_name = 'plan_upgraded') AS upgrades,
+    round(countIf(event_name = 'plan_upgraded') / countIf(event_name = 'signup') * 100, 2) AS conversion_rate
+FROM events
+WHERE workspace_id = 'ws_abc'
+  AND timestamp >= now() - INTERVAL 30 DAY;
+```
+
+```typescript
+// Node.js ClickHouse client
+import { createClient } from '@clickhouse/client';
+
+const client = createClient({ url: process.env.CLICKHOUSE_URL });
+
+await client.insert({
+  table: 'events',
+  values: [{
+    workspace_id: 'ws_abc',
+    user_id: 'user_123',
+    event_name: 'page_view',
+    properties: { path: '/dashboard', referrer: 'google.com' },
+    timestamp: new Date().toISOString(),
+  }],
+  format: 'JSONEachRow',
+});
+```
+
+### PostHog — Open-Source Product Analytics
+```typescript
+// Next.js + PostHog (client-side)
+import posthog from 'posthog-js';
+
+posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+  api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST ?? 'https://app.posthog.com',
+  capture_pageview: false, // Manual with App Router
+});
+
+// Track custom events
+posthog.capture('feature_used', {
+  feature: 'ai_assistant',
+  plan: user.plan,
+  workspace_id: workspace.id,
+});
+
+// Feature flags
+if (posthog.isFeatureEnabled('new-dashboard')) {
+  return <NewDashboard />;
+}
+```
+
+### AI Agent Observability
+Track LLM costs, latency, and quality for production AI applications:
+```typescript
+// Custom OTel attributes for LLM calls
+span.setAttribute('llm.model', 'claude-4-sonnet');
+span.setAttribute('llm.input_tokens', response.usage.input_tokens);
+span.setAttribute('llm.output_tokens', response.usage.output_tokens);
+span.setAttribute('llm.cost_usd', calculateCost(response.usage));
+span.setAttribute('llm.latency_ms', Date.now() - startTime);
+span.setAttribute('llm.cached', response.usage.cache_read_input_tokens > 0);
+```
+
+Backend tracing tools for LLM: **LangSmith** (LangChain/LangGraph), **OpenAI Tracing** (Agents SDK), **Langfuse** (open-source, any LLM).
+
+---
+
+<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 ahli untuk observabilitas produksi, analitik produk, dan pipeline data. Mencakup **OpenTelemetry 1.x** (stabil, vendor-neutral traces/metrics/logs), **PostHog** (analitik produk open-source), **ClickHouse** (database analitik OLAP), dan pola observabilitas agen AI.
+
+### Kondisi Pemicu
+- Menambahkan distributed tracing ke microservice atau aplikasi Next.js.
+- Menyiapkan structured logging dan pengumpulan metrik.
+- Mengimplementasikan analitik produk (analisis funnel, feature flags, session replay).
+- Membangun pipeline analitik berkinerja tinggi dengan ClickHouse.
+- Memantau run agen AI, biaya token LLM, dan kualitas respons.
+
+### OpenTelemetry 1.x — Observabilitas Vendor-Neutral
+
+Tiga pilar OTel:
+- **Traces**: Aliran permintaan antar layanan.
+- **Metrics**: Pengukuran numerik dari waktu ke waktu.
+- **Logs**: Catatan peristiwa terstruktur.
+
+Integrasikan dengan Next.js 15 melalui file `instrumentation.ts` bawaan — OTel SDK otomatis mendistribusikan trace ke backend pilihan (Grafana Tempo, Jaeger, Honeycomb, Datadog, dll.).
+
+### ClickHouse — Database Analitik Berkinerja Tinggi
+ClickHouse adalah standar 2026 untuk workload analitik — menyerap miliaran event dan melakukan query dalam milidetik. Gunakan engine `MergeTree` dengan partisi per bulan dan pengurutan berdasarkan kolom yang sering di-filter.
+
+### PostHog — Analitik Produk Open-Source
+PostHog menyediakan analisis funnel, feature flags, session replay, dan A/B testing dalam satu platform yang dapat di-self-host. Integrasikan dengan Next.js App Router menggunakan `posthog-js`.
+
+### Observabilitas Agen AI
+Lacak biaya LLM, latensi, dan kualitas untuk aplikasi AI produksi menggunakan custom OTel attributes. Gunakan LangSmith, OpenAI Tracing, atau Langfuse (open-source) sebagai backend tracing LLM.

package/skills/data-visualization-expert/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: data-visualization-expert
+description: "Expert guide for data visualization, charts, and dashboards using D3.js, Recharts, Chart.js, Nivo, and Tremor / Panduan ahli visualisasi data, chart, dan dashboard menggunakan D3.js, Recharts, Chart.js, Nivo, dan Tremor."
+author: "Roedy Rustam"
+---
+
+# Data Visualization Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`senior-frontend`**: React component architecture for chart components.
+- **`data-telemetry-expert`**: Analytics data pipelines feeding visualizations.
+- **`state-management-expert`**: Managing chart state, filters, and drill-down navigation.
+- **`performance-web-vitals`**: Optimizing chart rendering performance with large datasets.
+- **`sse-websocket-streaming-expert`**: Real-time data feeds for live dashboards.
+
+### Description
+Expert guide for building production-quality data visualizations and analytics dashboards. Covers D3.js v7 (low-level SVG/Canvas), Recharts (React-native charts), Chart.js 4 (lightweight canvas), Nivo (D3-powered React components), Tremor (dashboard components), and Apache ECharts. Includes responsive charts, real-time updates, accessibility, large dataset optimization, and dashboard layout patterns.
+
+### Trigger Conditions
+- Building analytics dashboards or admin panels with charts.
+- Creating data visualizations (line, bar, pie, scatter, heatmap, treemap).
+- Implementing real-time updating charts or live data feeds.
+- Choosing a charting library for React, Vue, or vanilla JS.
+- Optimizing chart performance with large datasets (10K+ data points).
+
+---
+
+### Library Selection Guide
+
+| Library | Framework | Rendering | Customization | Learning Curve | Best For |
+|---------|-----------|-----------|---------------|----------------|----------|
+| D3.js v7 | Agnostic | SVG/Canvas | ★★★★★ | High | Custom visualizations |
+| Recharts | React | SVG | ★★★★ | Low | Standard React charts |
+| Nivo | React | SVG/Canvas | ★★★★★ | Medium | Beautiful, animated charts |
+| Tremor | React | SVG (Recharts) | ★★★ | Very Low | Dashboards, KPI cards |
+| Chart.js 4 | Agnostic | Canvas | ★★★ | Low | Lightweight, simple charts |
+| ECharts | Agnostic | Canvas/SVG | ★★★★★ | Medium | Complex, interactive, large data |
+
+**Recommendation:** Use **Tremor** for rapid dashboard prototyping. Use **Recharts** for standard React charts. Use **D3.js** only for highly custom visualizations.
+
+### Core Patterns
+
+#### 1. Recharts (React Standard)
+
+```tsx
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+function RevenueChart({ data }: { data: { date: string; revenue: number }[] }) {
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <LineChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+        <XAxis dataKey="date" stroke="#9CA3AF" />
+        <YAxis stroke="#9CA3AF" tickFormatter={(v) => `$${(v / 1000).toFixed(0)}K`} />
+        <Tooltip
+          contentStyle={{ backgroundColor: '#1F2937', border: 'none', borderRadius: 8 }}
+          formatter={(value: number) => [`$${value.toLocaleString()}`, 'Revenue']}
+        />
+        <Line type="monotone" dataKey="revenue" stroke="#8B5CF6" strokeWidth={2} dot={false} />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+```
+
+#### 2. Tremor Dashboard Components
+
+```tsx
+import { Card, Metric, Text, AreaChart, BarList, Grid } from '@tremor/react';
+
+function AnalyticsDashboard({ metrics, chartData, topPages }) {
+  return (
+    <Grid numItemsMd={2} numItemsLg={3} className="gap-6">
+      <Card>
+        <Text>Total Revenue</Text>
+        <Metric>$845,230</Metric>
+      </Card>
+      <Card>
+        <Text>Revenue Over Time</Text>
+        <AreaChart
+          data={chartData}
+          index="month"
+          categories={['Revenue', 'Expenses']}
+          colors={['violet', 'rose']}
+          valueFormatter={(v) => `$${(v / 1000).toFixed(0)}K`}
+        />
+      </Card>
+      <Card>
+        <Text>Top Pages</Text>
+        <BarList data={topPages} className="mt-4" />
+      </Card>
+    </Grid>
+  );
+}
+```
+
+#### 3. Real-Time Chart Updates
+
+```tsx
+import { useEffect, useState } from 'react';
+
+function LiveMetricsChart() {
+  const [data, setData] = useState<{ time: string; value: number }[]>([]);
+
+  useEffect(() => {
+    const es = new EventSource('/api/metrics/stream');
+    es.onmessage = (event) => {
+      const point = JSON.parse(event.data);
+      setData((prev) => [...prev.slice(-60), point]); // Keep last 60 points
+    };
+    return () => es.close();
+  }, []);
+
+  return <LineChart data={data} /* ... */ />;
+}
+```
+
+#### 4. Large Dataset Optimization
+- Use **Canvas** rendering (ECharts, Chart.js) for >5K data points.
+- Implement **data aggregation** on the server (downsample to 500-1000 points for display).
+- Use **windowed rendering** — only render visible data points.
+- Apply **debounced zoom/pan** to prevent excessive re-renders.
+
+### Dashboard Layout Patterns
+- **KPI Row → Charts → Tables**: Top metrics cards, then charts, then detail tables.
+- **Filter Sidebar**: Global date range, category, and dimension filters.
+- **Drill-down**: Click chart segment → navigate to detail view.
+- **Export**: CSV/PNG/PDF export for all charts.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`senior-frontend`**: Arsitektur komponen React untuk komponen chart.
+- **`data-telemetry-expert`**: Pipeline data analitik yang mengisi visualisasi.
+- **`state-management-expert`**: Mengelola state chart, filter, dan navigasi drill-down.
+
+### Deskripsi
+Panduan ahli untuk membangun visualisasi data dan dashboard analitik berkualitas produksi. Mencakup D3.js v7, Recharts, Chart.js 4, Nivo, Tremor, dan Apache ECharts. Termasuk chart responsif, update real-time, aksesibilitas, optimasi dataset besar, dan pola layout dashboard.
+
+### Kondisi Pemicu
+- Membangun dashboard analitik atau panel admin dengan chart.
+- Membuat visualisasi data (line, bar, pie, scatter, heatmap, treemap).
+- Mengimplementasikan chart yang update real-time atau feed data langsung.
+- Memilih library charting untuk React, Vue, atau vanilla JS.