vibes-plug 2.5.0 → 2.14.1

package/skills/data-pipeline-etl-expert/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: data-pipeline-etl-expert
+description: "Expert guide for Data Pipelines, ETL/ELT, and Analytics Engineering. Covers dbt, Apache Airflow, Dagster, BigQuery, ClickHouse, and DuckDB / Panduan ahli untuk Data Pipelines, ETL/ELT. Mencakup dbt, Airflow, Dagster, BigQuery, ClickHouse, dan DuckDB."
+author: "Roedy Rustam"
+---
+
+# Data Pipeline & ETL Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A specialized skill for building robust data architectures, Analytics Engineering, and ETL (Extract, Transform, Load) or ELT pipelines. It covers modern data stack orchestration (Airflow, Dagster), transformation tools (dbt), and high-performance OLAP databases (BigQuery, Snowflake, ClickHouse, DuckDB).
+
+### Trigger Conditions
+- When designing reporting dashboards or analytics infrastructure for a SaaS.
+- When moving large volumes of data from transactional databases (PostgreSQL/MySQL) to a data warehouse.
+- When the user asks about "dbt", "Airflow", "ELT", or "Analytics Engineering".
+- When building local or edge analytics using DuckDB.
+
+### Core Architectural Guidelines
+
+#### 1. ELT over ETL
+Prefer Extract-Load-Transform (ELT) over traditional ETL.
+- **Extract & Load**: Use tools like Airbyte or Fivetran to dump raw data directly into the Data Warehouse.
+- **Transform**: Perform transformations *inside* the Data Warehouse using SQL (via dbt) to leverage the warehouse's massive compute power.
+
+#### 2. Analytics Engineering with dbt
+Treat SQL like software engineering.
+- Use `dbt` (Data Build Tool) to version control your SQL transformations.
+- Implement tests (`not_null`, `unique`) on critical tables.
+- Use Jinja templating in dbt to DRY up complex SQL queries.
+
+#### 3. Data Orchestration (Airflow vs Dagster)
+- **Apache Airflow**: The industry standard for scheduling and monitoring complex DAGs (Directed Acyclic Graphs). Best for Python-heavy teams.
+- **Dagster**: A modern alternative focused on data assets rather than just tasks. Use Dagster when you want better local testing and asset-driven lineage.
+
+#### 4. OLAP Database Selection
+- **BigQuery / Snowflake**: Best for massive scale, fully managed cloud data warehousing.
+- **ClickHouse**: Best for real-time, sub-second analytical queries on massive event streams.
+- **DuckDB**: Best for local analytics, embedded analytical pipelines, or processing parquets in edge environments (Node.js/Python).
+
+## Orchestration & Integration
+- Pairs with `data-telemetry-expert` to process the raw telemetry events captured by PostHog/OpenTelemetry.
+- Complements `python-programming-expert` as Python is the lingua franca of data engineering.
+- Works with `cron-scheduler-expert` when simpler, non-DAG cron jobs are sufficient for small ETL tasks.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan khusus untuk membangun arsitektur data yang kuat, Analytics Engineering, dan pipeline ETL/ELT. Mencakup orkestrasi (Airflow, Dagster), alat transformasi (dbt), dan database OLAP berkinerja tinggi (BigQuery, Snowflake, ClickHouse, DuckDB).
+
+### Kondisi Pemicu
+- Saat merancang infrastruktur analitik atau dashboard pelaporan untuk SaaS.
+- Saat memindahkan data bervolume besar dari database transaksional ke Data Warehouse.
+- Saat membangun analitik lokal yang cepat menggunakan DuckDB.
+
+### Panduan Arsitektur Inti
+
+#### 1. ELT lebih disukai daripada ETL
+- **Extract & Load**: Pindahkan data mentah (raw data) langsung ke Data Warehouse (menggunakan Airbyte/Fivetran).
+- **Transform**: Lakukan transformasi data *di dalam* Data Warehouse menggunakan SQL (dbt) untuk memanfaatkan kekuatan komputasi gudang data yang masif.
+
+#### 2. Analytics Engineering dengan dbt (Data Build Tool)
+Perlakukan transformasi data (SQL) layaknya rekayasa perangkat lunak. Gunakan dbt untuk version control, pengujian otomatis (`not_null`, `unique`), dan dokumentasi skema data Anda.
+
+#### 3. Orkestrasi Data (DAG)
+Gunakan Apache Airflow atau Dagster untuk menjadwalkan dan memonitor alur kerja data yang kompleks (DAG). Dagster sangat direkomendasikan untuk pendekatan modern yang berpusat pada aset data (asset-driven orchestration).
+
+#### 4. Pemilihan Database OLAP
+- **BigQuery / Snowflake**: Gudang data cloud fully-managed untuk analitik skala masif.
+- **ClickHouse**: Sangat cepat untuk kueri analitik real-time. Cocok untuk data event stream/log.
+- **DuckDB**: SQLite untuk analitik. Sangat cepat untuk memproses file Parquet atau CSV secara lokal maupun di lingkungan edge/serverless (via Python/Node.js).
+
+## Integrasi Orkestrasi
+- Bekerja sama dengan `data-telemetry-expert` untuk memproses data mentah yang dikumpulkan.
+- Melengkapi `python-programming-expert` dalam menulis skrip orkestrasi Airflow/Dagster.

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

@@ -1,7 +1,7 @@
 ---
 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"
+author: "Roedy Rustam"
 ---
 
 # Data & Telemetry Expert (OpenTelemetry 1.x / ClickHouse Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 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.
 
@@ -184,6 +187,9 @@ Backend tracing tools for LLM: **LangSmith** (LangChain/LangGraph), **OpenAI Tra
 <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.
 

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.