@rune-kit/rune 2.1.1
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.
- package/LICENSE +21 -0
- package/README.md +357 -0
- package/agents/.gitkeep +0 -0
- package/agents/architect.md +29 -0
- package/agents/asset-creator.md +11 -0
- package/agents/audit.md +11 -0
- package/agents/autopsy.md +11 -0
- package/agents/brainstorm.md +11 -0
- package/agents/browser-pilot.md +11 -0
- package/agents/coder.md +29 -0
- package/agents/completion-gate.md +11 -0
- package/agents/constraint-check.md +11 -0
- package/agents/context-engine.md +11 -0
- package/agents/cook.md +11 -0
- package/agents/db.md +11 -0
- package/agents/debug.md +11 -0
- package/agents/dependency-doctor.md +11 -0
- package/agents/deploy.md +11 -0
- package/agents/design.md +11 -0
- package/agents/docs-seeker.md +11 -0
- package/agents/fix.md +11 -0
- package/agents/hallucination-guard.md +11 -0
- package/agents/incident.md +11 -0
- package/agents/integrity-check.md +11 -0
- package/agents/journal.md +11 -0
- package/agents/launch.md +11 -0
- package/agents/logic-guardian.md +11 -0
- package/agents/marketing.md +11 -0
- package/agents/onboard.md +11 -0
- package/agents/perf.md +11 -0
- package/agents/plan.md +11 -0
- package/agents/preflight.md +11 -0
- package/agents/problem-solver.md +11 -0
- package/agents/rescue.md +11 -0
- package/agents/research.md +11 -0
- package/agents/researcher.md +29 -0
- package/agents/review-intake.md +11 -0
- package/agents/review.md +11 -0
- package/agents/reviewer.md +28 -0
- package/agents/safeguard.md +11 -0
- package/agents/sast.md +11 -0
- package/agents/scanner.md +28 -0
- package/agents/scope-guard.md +11 -0
- package/agents/scout.md +11 -0
- package/agents/sentinel.md +11 -0
- package/agents/sequential-thinking.md +11 -0
- package/agents/session-bridge.md +11 -0
- package/agents/skill-forge.md +11 -0
- package/agents/skill-router.md +11 -0
- package/agents/surgeon.md +11 -0
- package/agents/team.md +11 -0
- package/agents/test.md +11 -0
- package/agents/trend-scout.md +11 -0
- package/agents/verification.md +11 -0
- package/agents/video-creator.md +11 -0
- package/agents/watchdog.md +11 -0
- package/agents/worktree.md +11 -0
- package/commands/.gitkeep +0 -0
- package/commands/rune.md +168 -0
- package/compiler/__tests__/openclaw-adapter.test.js +140 -0
- package/compiler/__tests__/parser.test.js +55 -0
- package/compiler/adapters/antigravity.js +59 -0
- package/compiler/adapters/claude.js +37 -0
- package/compiler/adapters/cursor.js +67 -0
- package/compiler/adapters/generic.js +60 -0
- package/compiler/adapters/index.js +45 -0
- package/compiler/adapters/openclaw.js +150 -0
- package/compiler/adapters/windsurf.js +60 -0
- package/compiler/bin/rune.js +288 -0
- package/compiler/doctor.js +153 -0
- package/compiler/emitter.js +240 -0
- package/compiler/parser.js +208 -0
- package/compiler/transformer.js +69 -0
- package/compiler/transforms/branding.js +27 -0
- package/compiler/transforms/cross-references.js +29 -0
- package/compiler/transforms/frontmatter.js +38 -0
- package/compiler/transforms/hooks.js +68 -0
- package/compiler/transforms/subagents.js +36 -0
- package/compiler/transforms/tool-names.js +60 -0
- package/contexts/dev.md +34 -0
- package/contexts/research.md +43 -0
- package/contexts/review.md +55 -0
- package/extensions/ai-ml/PACK.md +517 -0
- package/extensions/analytics/PACK.md +557 -0
- package/extensions/backend/PACK.md +678 -0
- package/extensions/chrome-ext/PACK.md +995 -0
- package/extensions/content/PACK.md +381 -0
- package/extensions/devops/PACK.md +520 -0
- package/extensions/ecommerce/PACK.md +280 -0
- package/extensions/gamedev/PACK.md +393 -0
- package/extensions/mobile/PACK.md +273 -0
- package/extensions/saas/PACK.md +805 -0
- package/extensions/security/PACK.md +536 -0
- package/extensions/trading/PACK.md +597 -0
- package/extensions/ui/PACK.md +947 -0
- package/package.json +47 -0
- package/skills/.gitkeep +0 -0
- package/skills/adversary/SKILL.md +271 -0
- package/skills/asset-creator/SKILL.md +157 -0
- package/skills/audit/SKILL.md +466 -0
- package/skills/autopsy/SKILL.md +200 -0
- package/skills/ba/SKILL.md +279 -0
- package/skills/brainstorm/SKILL.md +266 -0
- package/skills/browser-pilot/SKILL.md +168 -0
- package/skills/completion-gate/SKILL.md +151 -0
- package/skills/constraint-check/SKILL.md +165 -0
- package/skills/context-engine/SKILL.md +176 -0
- package/skills/cook/SKILL.md +636 -0
- package/skills/db/SKILL.md +256 -0
- package/skills/debug/SKILL.md +240 -0
- package/skills/dependency-doctor/SKILL.md +235 -0
- package/skills/deploy/SKILL.md +174 -0
- package/skills/design/DESIGN-REFERENCE.md +365 -0
- package/skills/design/SKILL.md +462 -0
- package/skills/doc-processor/SKILL.md +254 -0
- package/skills/docs/SKILL.md +336 -0
- package/skills/docs-seeker/SKILL.md +166 -0
- package/skills/fix/SKILL.md +192 -0
- package/skills/git/SKILL.md +285 -0
- package/skills/hallucination-guard/SKILL.md +204 -0
- package/skills/incident/SKILL.md +241 -0
- package/skills/integrity-check/SKILL.md +169 -0
- package/skills/journal/SKILL.md +190 -0
- package/skills/launch/SKILL.md +330 -0
- package/skills/logic-guardian/SKILL.md +240 -0
- package/skills/marketing/SKILL.md +229 -0
- package/skills/mcp-builder/SKILL.md +311 -0
- package/skills/onboard/SKILL.md +298 -0
- package/skills/perf/SKILL.md +297 -0
- package/skills/plan/SKILL.md +520 -0
- package/skills/preflight/SKILL.md +231 -0
- package/skills/problem-solver/SKILL.md +284 -0
- package/skills/rescue/SKILL.md +434 -0
- package/skills/research/SKILL.md +122 -0
- package/skills/review/SKILL.md +354 -0
- package/skills/review-intake/SKILL.md +222 -0
- package/skills/safeguard/SKILL.md +188 -0
- package/skills/sast/SKILL.md +190 -0
- package/skills/scaffold/SKILL.md +276 -0
- package/skills/scope-guard/SKILL.md +150 -0
- package/skills/scout/SKILL.md +232 -0
- package/skills/sentinel/SKILL.md +320 -0
- package/skills/sentinel-env/SKILL.md +226 -0
- package/skills/sequential-thinking/SKILL.md +234 -0
- package/skills/session-bridge/SKILL.md +287 -0
- package/skills/skill-forge/SKILL.md +317 -0
- package/skills/skill-router/SKILL.md +267 -0
- package/skills/surgeon/SKILL.md +203 -0
- package/skills/team/SKILL.md +397 -0
- package/skills/test/SKILL.md +271 -0
- package/skills/trend-scout/SKILL.md +145 -0
- package/skills/verification/SKILL.md +201 -0
- package/skills/video-creator/SKILL.md +201 -0
- package/skills/watchdog/SKILL.md +166 -0
- package/skills/worktree/SKILL.md +140 -0
|
@@ -0,0 +1,557 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: "@rune/analytics"
|
|
3
|
+
description: Analytics patterns — tracking setup, A/B testing, funnel analysis, and dashboard design.
|
|
4
|
+
metadata:
|
|
5
|
+
author: runedev
|
|
6
|
+
version: "0.2.0"
|
|
7
|
+
layer: L4
|
|
8
|
+
price: "$12"
|
|
9
|
+
target: Growth engineers
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# @rune/analytics
|
|
13
|
+
|
|
14
|
+
## Purpose
|
|
15
|
+
|
|
16
|
+
Analytics implementations fail silently: tracking events that fire but never reach the dashboard because the event name has a typo, A/B tests that run for weeks without reaching statistical significance because the sample size was never calculated, funnel reports that show a 90% drop-off that's actually a tracking gap, and dashboards that load 500K rows client-side because the aggregation happens in the browser instead of the database. This pack covers the full analytics stack — instrumentation, experimentation, analysis, and visualization — with patterns that produce data you can actually trust and act on.
|
|
17
|
+
|
|
18
|
+
## Triggers
|
|
19
|
+
|
|
20
|
+
- Auto-trigger: when `gtag`, `posthog`, `mixpanel`, `plausible`, `analytics`, `experiment`, `feature-flag`, `launchdarkly` detected
|
|
21
|
+
- `/rune tracking-setup` — set up or audit analytics tracking
|
|
22
|
+
- `/rune ab-testing` — design and implement A/B experiments
|
|
23
|
+
- `/rune funnel-analysis` — build conversion funnel tracking
|
|
24
|
+
- `/rune dashboard-patterns` — build analytics dashboard
|
|
25
|
+
- Called by `cook` (L1) when analytics feature requested
|
|
26
|
+
- Called by `marketing` (L2) when measuring campaign performance
|
|
27
|
+
|
|
28
|
+
## Skills Included (7)
|
|
29
|
+
|
|
30
|
+
### tracking-setup
|
|
31
|
+
|
|
32
|
+
Analytics tracking — Google Analytics 4, Plausible, PostHog, Mixpanel. Event taxonomy design, consent management, server-side tracking, UTM handling.
|
|
33
|
+
|
|
34
|
+
#### Workflow
|
|
35
|
+
|
|
36
|
+
**Step 1 — Detect tracking setup**
|
|
37
|
+
Use Grep to find analytics code: `gtag`, `posthog.capture`, `mixpanel.track`, `plausible`, `analytics.track`, `useAnalytics`. Read the tracking initialization and event calls to understand: analytics provider, event naming convention, consent flow, and client vs server-side tracking.
|
|
38
|
+
|
|
39
|
+
**Step 2 — Audit tracking quality**
|
|
40
|
+
Check for: inconsistent event naming (mix of `snake_case`, `camelCase`, `kebab-case`), missing consent management (GDPR violation), tracking scripts blocking page load (performance impact), no event taxonomy document (ad-hoc event names), UTM parameters not captured on landing, user identification happening before consent, and no server-side tracking fallback (ad blockers lose 30-40% of events).
|
|
41
|
+
|
|
42
|
+
**Step 3 — Emit tracking patterns**
|
|
43
|
+
Emit: typed event taxonomy with auto-complete, consent-aware analytics wrapper, server-side event proxy for ad-blocker resistance, UTM capture and persistence utility, and page view tracking with proper SPA handling.
|
|
44
|
+
|
|
45
|
+
#### Example
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
// Type-safe analytics wrapper with consent management
|
|
49
|
+
type AnalyticsEvent =
|
|
50
|
+
| { name: 'page_view'; properties: { path: string; referrer: string } }
|
|
51
|
+
| { name: 'signup_started'; properties: { method: 'email' | 'google' | 'github' } }
|
|
52
|
+
| { name: 'feature_used'; properties: { feature: string; plan: string } }
|
|
53
|
+
| { name: 'checkout_started'; properties: { plan: string; billing: 'monthly' | 'annual' } }
|
|
54
|
+
| { name: 'checkout_completed'; properties: { plan: string; revenue: number; currency: string } };
|
|
55
|
+
|
|
56
|
+
class Analytics {
|
|
57
|
+
private consent: 'granted' | 'denied' | 'pending' = 'pending';
|
|
58
|
+
private queue: AnalyticsEvent[] = [];
|
|
59
|
+
|
|
60
|
+
updateConsent(status: 'granted' | 'denied') {
|
|
61
|
+
this.consent = status;
|
|
62
|
+
if (status === 'granted') {
|
|
63
|
+
this.queue.forEach(e => this.send(e));
|
|
64
|
+
this.queue = [];
|
|
65
|
+
} else {
|
|
66
|
+
this.queue = [];
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
track<E extends AnalyticsEvent>(event: E) {
|
|
71
|
+
if (this.consent === 'denied') return;
|
|
72
|
+
if (this.consent === 'pending') { this.queue.push(event); return; }
|
|
73
|
+
this.send(event);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
private send(event: AnalyticsEvent) {
|
|
77
|
+
// Client-side (may be blocked)
|
|
78
|
+
window.gtag?.('event', event.name, event.properties);
|
|
79
|
+
// Server-side fallback (ad-blocker resistant)
|
|
80
|
+
navigator.sendBeacon('/api/analytics', JSON.stringify(event));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// UTM capture — run on landing page
|
|
85
|
+
function captureUtm() {
|
|
86
|
+
const params = new URLSearchParams(window.location.search);
|
|
87
|
+
const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
|
|
88
|
+
const utm: Record<string, string> = {};
|
|
89
|
+
utmKeys.forEach(key => { if (params.has(key)) utm[key] = params.get(key)!; });
|
|
90
|
+
if (Object.keys(utm).length) sessionStorage.setItem('utm', JSON.stringify(utm));
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
### ab-testing
|
|
97
|
+
|
|
98
|
+
A/B testing patterns — experiment design, statistical significance, feature flags (LaunchDarkly, Unleash), rollout strategies, result analysis.
|
|
99
|
+
|
|
100
|
+
#### Workflow
|
|
101
|
+
|
|
102
|
+
**Step 1 — Detect experiment setup**
|
|
103
|
+
Use Grep to find experiment code: `useFeatureFlag`, `useExperiment`, `LaunchDarkly`, `Unleash`, `GrowthBook`, `variant`, `experiment`. Read feature flag initialization and variant assignment to understand: flag provider, assignment method (random, user-based, percentage), and metric collection.
|
|
104
|
+
|
|
105
|
+
**Step 2 — Audit experiment validity**
|
|
106
|
+
Check for: no sample size calculation (experiment runs indefinitely), peeking at results before significance (inflated false positive rate), no control group definition, variant assignment not persisted across sessions (same user sees different variants), metrics not tracked per-variant (can't measure impact), and feature flags without cleanup (dead flags accumulate).
|
|
107
|
+
|
|
108
|
+
**Step 3 — Emit experiment patterns**
|
|
109
|
+
Emit: experiment setup with sample size calculator, persistent variant assignment (cookie/user-ID based), metric collection per variant, significance calculator, and feature flag lifecycle with cleanup reminder.
|
|
110
|
+
|
|
111
|
+
#### Example
|
|
112
|
+
|
|
113
|
+
```typescript
|
|
114
|
+
// A/B experiment with persistent assignment and significance check
|
|
115
|
+
import { z } from 'zod';
|
|
116
|
+
|
|
117
|
+
const ExperimentSchema = z.object({
|
|
118
|
+
id: z.string(),
|
|
119
|
+
variants: z.array(z.object({ id: z.string(), weight: z.number() })),
|
|
120
|
+
metrics: z.array(z.string()),
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// Persistent variant assignment (deterministic hash)
|
|
124
|
+
function assignVariant(userId: string, experimentId: string, variants: { id: string; weight: number }[]): string {
|
|
125
|
+
const hash = cyrb53(`${userId}:${experimentId}`);
|
|
126
|
+
const normalized = (hash % 10000) / 10000; // [0, 1)
|
|
127
|
+
let cumulative = 0;
|
|
128
|
+
for (const variant of variants) {
|
|
129
|
+
cumulative += variant.weight;
|
|
130
|
+
if (normalized < cumulative) return variant.id;
|
|
131
|
+
}
|
|
132
|
+
return variants[variants.length - 1].id;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Simple hash function (deterministic, fast)
|
|
136
|
+
function cyrb53(str: string): number {
|
|
137
|
+
let h1 = 0xdeadbeef, h2 = 0x41c6ce57;
|
|
138
|
+
for (let i = 0; i < str.length; i++) {
|
|
139
|
+
const ch = str.charCodeAt(i);
|
|
140
|
+
h1 = Math.imul(h1 ^ ch, 2654435761);
|
|
141
|
+
h2 = Math.imul(h2 ^ ch, 1597334677);
|
|
142
|
+
}
|
|
143
|
+
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
|
|
144
|
+
h2 = Math.imul(h2 ^ (h2 >>> 13), 3266489909);
|
|
145
|
+
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Sample size calculator (two-proportion z-test)
|
|
149
|
+
function requiredSampleSize(baselineRate: number, mde: number, power = 0.8, alpha = 0.05): number {
|
|
150
|
+
const zAlpha = 1.96; // alpha=0.05 two-tailed
|
|
151
|
+
const zBeta = 0.842; // power=0.8
|
|
152
|
+
const p1 = baselineRate;
|
|
153
|
+
const p2 = baselineRate * (1 + mde);
|
|
154
|
+
const pooled = (p1 + p2) / 2;
|
|
155
|
+
return Math.ceil(
|
|
156
|
+
(2 * pooled * (1 - pooled) * Math.pow(zAlpha + zBeta, 2)) / Math.pow(p2 - p1, 2),
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
### funnel-analysis
|
|
164
|
+
|
|
165
|
+
Funnel analysis — conversion tracking, drop-off identification, cohort analysis, retention metrics, LTV calculation, attribution modeling.
|
|
166
|
+
|
|
167
|
+
#### Workflow
|
|
168
|
+
|
|
169
|
+
**Step 1 — Detect funnel tracking**
|
|
170
|
+
Use Grep to find funnel-related code: `funnel`, `conversion`, `step`, `checkout.*step`, `onboarding.*step`, `cohort`, `retention`. Read event tracking calls to understand: which user journey steps are tracked, how step completion is determined, and where drop-off data is collected.
|
|
171
|
+
|
|
172
|
+
**Step 2 — Audit funnel completeness**
|
|
173
|
+
Check for: missing steps in the funnel (gap between "add to cart" and "payment complete" — no "checkout started"), step events not including a session or flow ID (can't link steps to same journey), no timestamp on steps (can't measure time between steps), no segmentation on funnel data (can't compare mobile vs desktop conversion), and no drop-off alerting.
|
|
174
|
+
|
|
175
|
+
**Step 3 — Emit funnel patterns**
|
|
176
|
+
Emit: typed funnel step tracker with flow ID, funnel aggregation query (SQL), drop-off rate calculator, cohort retention matrix, and simple LTV estimation.
|
|
177
|
+
|
|
178
|
+
#### Example
|
|
179
|
+
|
|
180
|
+
```typescript
|
|
181
|
+
// Funnel step tracker with flow correlation
|
|
182
|
+
interface FunnelStep {
|
|
183
|
+
funnelId: string;
|
|
184
|
+
flowId: string; // ties steps to same user journey
|
|
185
|
+
step: string;
|
|
186
|
+
stepIndex: number;
|
|
187
|
+
userId: string;
|
|
188
|
+
timestamp: number;
|
|
189
|
+
metadata?: Record<string, string | number>;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
const CHECKOUT_FUNNEL = ['cart_viewed', 'checkout_started', 'shipping_entered', 'payment_entered', 'order_completed'] as const;
|
|
193
|
+
|
|
194
|
+
function trackFunnelStep(step: typeof CHECKOUT_FUNNEL[number], flowId: string, meta?: Record<string, string | number>) {
|
|
195
|
+
const event: FunnelStep = {
|
|
196
|
+
funnelId: 'checkout',
|
|
197
|
+
flowId,
|
|
198
|
+
step,
|
|
199
|
+
stepIndex: CHECKOUT_FUNNEL.indexOf(step),
|
|
200
|
+
userId: getCurrentUserId(),
|
|
201
|
+
timestamp: Date.now(),
|
|
202
|
+
metadata: meta,
|
|
203
|
+
};
|
|
204
|
+
analytics.track({ name: 'funnel_step', properties: event });
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// SQL — funnel drop-off analysis (PostgreSQL)
|
|
208
|
+
// SELECT step, COUNT(DISTINCT flow_id) as users,
|
|
209
|
+
// LAG(COUNT(DISTINCT flow_id)) OVER (ORDER BY step_index) as prev_users,
|
|
210
|
+
// ROUND(COUNT(DISTINCT flow_id)::numeric /
|
|
211
|
+
// LAG(COUNT(DISTINCT flow_id)) OVER (ORDER BY step_index) * 100, 1) as conversion_pct
|
|
212
|
+
// FROM funnel_events
|
|
213
|
+
// WHERE funnel_id = 'checkout' AND timestamp > NOW() - INTERVAL '30 days'
|
|
214
|
+
// GROUP BY step, step_index ORDER BY step_index;
|
|
215
|
+
|
|
216
|
+
// Cohort retention matrix
|
|
217
|
+
async function cohortRetention(cohortField: string, periods: number) {
|
|
218
|
+
return db.execute(sql`
|
|
219
|
+
WITH cohorts AS (
|
|
220
|
+
SELECT user_id, DATE_TRUNC('week', MIN(created_at)) AS cohort_week
|
|
221
|
+
FROM events WHERE name = 'signup_completed'
|
|
222
|
+
GROUP BY user_id
|
|
223
|
+
),
|
|
224
|
+
activity AS (
|
|
225
|
+
SELECT user_id, DATE_TRUNC('week', timestamp) AS active_week
|
|
226
|
+
FROM events GROUP BY user_id, DATE_TRUNC('week', timestamp)
|
|
227
|
+
)
|
|
228
|
+
SELECT c.cohort_week, EXTRACT(WEEK FROM a.active_week - c.cohort_week) AS week_number,
|
|
229
|
+
COUNT(DISTINCT a.user_id) AS active_users
|
|
230
|
+
FROM cohorts c JOIN activity a ON c.user_id = a.user_id
|
|
231
|
+
WHERE a.active_week >= c.cohort_week
|
|
232
|
+
GROUP BY c.cohort_week, week_number ORDER BY c.cohort_week, week_number
|
|
233
|
+
`);
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
### dashboard-patterns
|
|
240
|
+
|
|
241
|
+
Analytics dashboard design — KPI cards, time series charts, comparison views, drill-down navigation, export functionality, real-time counters.
|
|
242
|
+
|
|
243
|
+
#### Workflow
|
|
244
|
+
|
|
245
|
+
**Step 1 — Detect dashboard components**
|
|
246
|
+
Use Grep to find dashboard code: `Chart`, `recharts`, `chart.js`, `d3`, `tremor`, `KPI`, `metric`, `dashboard`. Read dashboard pages and data fetching to understand: charting library, data source (API, database, analytics provider), refresh strategy, and component structure.
|
|
247
|
+
|
|
248
|
+
**Step 2 — Audit dashboard performance**
|
|
249
|
+
Check for: all data fetched on page load (no lazy loading for off-screen charts), no time range selector (stuck on one period), raw data sent to client for aggregation (should aggregate server-side), no loading states (charts pop in), missing comparison period (no "vs last week"), no data export, and charts re-rendering on unrelated state changes.
|
|
250
|
+
|
|
251
|
+
**Step 3 — Emit dashboard patterns**
|
|
252
|
+
Emit: KPI card with comparison indicator, time series chart with range selector, server-side aggregation endpoint, lazy-loaded chart sections, and CSV export utility.
|
|
253
|
+
|
|
254
|
+
#### Example
|
|
255
|
+
|
|
256
|
+
```tsx
|
|
257
|
+
// Dashboard KPI card with comparison
|
|
258
|
+
interface KpiProps {
|
|
259
|
+
label: string;
|
|
260
|
+
value: number;
|
|
261
|
+
previousValue: number;
|
|
262
|
+
format: 'number' | 'currency' | 'percent';
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
function KpiCard({ label, value, previousValue, format }: KpiProps) {
|
|
266
|
+
const change = previousValue ? ((value - previousValue) / previousValue) * 100 : 0;
|
|
267
|
+
const formatted = format === 'currency'
|
|
268
|
+
? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value)
|
|
269
|
+
: format === 'percent'
|
|
270
|
+
? `${value.toFixed(1)}%`
|
|
271
|
+
: new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value);
|
|
272
|
+
|
|
273
|
+
return (
|
|
274
|
+
<div className="rounded-lg border bg-card p-6">
|
|
275
|
+
<p className="text-sm text-muted-foreground">{label}</p>
|
|
276
|
+
<p className="text-2xl font-bold font-mono mt-1">{formatted}</p>
|
|
277
|
+
<p className={`text-sm mt-1 ${change >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
278
|
+
{change >= 0 ? '▲' : '▼'} {Math.abs(change).toFixed(1)}% vs previous period
|
|
279
|
+
</p>
|
|
280
|
+
</div>
|
|
281
|
+
);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
// Server-side aggregation endpoint — app/api/metrics/route.ts
|
|
285
|
+
export async function GET(req: Request) {
|
|
286
|
+
const { searchParams } = new URL(req.url);
|
|
287
|
+
const range = searchParams.get('range') || '7d';
|
|
288
|
+
const interval = range === '24h' ? 'hour' : range === '7d' ? 'day' : 'week';
|
|
289
|
+
|
|
290
|
+
const metrics = await db.execute(sql`
|
|
291
|
+
SELECT DATE_TRUNC(${interval}, timestamp) AS period,
|
|
292
|
+
COUNT(*) AS page_views,
|
|
293
|
+
COUNT(DISTINCT user_id) AS unique_visitors,
|
|
294
|
+
COUNT(*) FILTER (WHERE name = 'signup_completed') AS signups
|
|
295
|
+
FROM events
|
|
296
|
+
WHERE timestamp > NOW() - ${range}::interval
|
|
297
|
+
GROUP BY period ORDER BY period
|
|
298
|
+
`);
|
|
299
|
+
return Response.json(metrics);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
// CSV export utility
|
|
303
|
+
function exportCsv(data: Record<string, unknown>[], filename: string) {
|
|
304
|
+
const headers = Object.keys(data[0]);
|
|
305
|
+
const csv = [headers.join(','), ...data.map(row => headers.map(h => JSON.stringify(row[h] ?? '')).join(','))].join('\n');
|
|
306
|
+
const blob = new Blob([csv], { type: 'text/csv' });
|
|
307
|
+
const a = document.createElement('a');
|
|
308
|
+
a.href = URL.createObjectURL(blob);
|
|
309
|
+
a.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`;
|
|
310
|
+
a.click();
|
|
311
|
+
URL.revokeObjectURL(a.href);
|
|
312
|
+
}
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
---
|
|
316
|
+
|
|
317
|
+
### sql-patterns
|
|
318
|
+
|
|
319
|
+
SQL query patterns for analytics — common aggregations, window functions, CTEs, performance optimization, and safe parameterized queries for analytics workloads.
|
|
320
|
+
|
|
321
|
+
#### Workflow
|
|
322
|
+
|
|
323
|
+
**Step 1 — Detect database setup**
|
|
324
|
+
Use Grep to find database usage: `prisma`, `drizzle`, `knex`, `pg`, `mysql2`, `better-sqlite3`, `sql`, `SELECT`, `INSERT`. Identify: ORM vs raw SQL, database engine (PostgreSQL, MySQL, SQLite), migration tool, and query builder.
|
|
325
|
+
|
|
326
|
+
**Step 2 — Audit query quality**
|
|
327
|
+
Check for: string interpolation in SQL (injection risk), missing indexes on columns used in WHERE/JOIN/ORDER BY, N+1 queries in loops, SELECT * instead of specific columns, no pagination on large result sets, aggregations done client-side instead of database, and missing EXPLAIN ANALYZE on slow queries.
|
|
328
|
+
|
|
329
|
+
**Step 3 — Emit SQL patterns**
|
|
330
|
+
Emit patterns appropriate to the detected database engine.
|
|
331
|
+
|
|
332
|
+
#### Example
|
|
333
|
+
|
|
334
|
+
```sql
|
|
335
|
+
-- Time-bucketed metrics (PostgreSQL)
|
|
336
|
+
-- Use DATE_TRUNC for consistent time buckets
|
|
337
|
+
SELECT
|
|
338
|
+
DATE_TRUNC('hour', created_at) AS bucket,
|
|
339
|
+
COUNT(*) AS total_events,
|
|
340
|
+
COUNT(DISTINCT user_id) AS unique_users,
|
|
341
|
+
PERCENTILE_CONT(0.95) WITHIN GROUP (ORDER BY response_ms) AS p95_latency
|
|
342
|
+
FROM events
|
|
343
|
+
WHERE created_at > NOW() - INTERVAL '24 hours'
|
|
344
|
+
GROUP BY bucket
|
|
345
|
+
ORDER BY bucket;
|
|
346
|
+
|
|
347
|
+
-- Running totals with window functions
|
|
348
|
+
SELECT date, daily_revenue,
|
|
349
|
+
SUM(daily_revenue) OVER (ORDER BY date ROWS UNBOUNDED PRECEDING) AS cumulative_revenue,
|
|
350
|
+
AVG(daily_revenue) OVER (ORDER BY date ROWS 6 PRECEDING) AS rolling_7d_avg
|
|
351
|
+
FROM daily_metrics;
|
|
352
|
+
|
|
353
|
+
-- Efficient pagination (keyset, not OFFSET)
|
|
354
|
+
-- BAD: SELECT * FROM events ORDER BY id LIMIT 20 OFFSET 10000;
|
|
355
|
+
-- GOOD: cursor-based
|
|
356
|
+
SELECT * FROM events
|
|
357
|
+
WHERE id > $1 -- last seen ID
|
|
358
|
+
ORDER BY id
|
|
359
|
+
LIMIT 20;
|
|
360
|
+
|
|
361
|
+
-- Safe parameterized queries (NEVER string interpolation)
|
|
362
|
+
-- BAD: `SELECT * FROM users WHERE id = ${userId}`
|
|
363
|
+
-- GOOD: prepared statement
|
|
364
|
+
const result = await db.query('SELECT * FROM users WHERE id = $1', [userId]);
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
---
|
|
368
|
+
|
|
369
|
+
### data-validation
|
|
370
|
+
|
|
371
|
+
Data quality patterns — input validation, schema enforcement, data pipeline checks, anomaly detection, and data freshness monitoring.
|
|
372
|
+
|
|
373
|
+
#### Workflow
|
|
374
|
+
|
|
375
|
+
**Step 1 — Detect data flows**
|
|
376
|
+
Use Grep to find data ingestion points: API endpoints that accept data, CSV/JSON import handlers, webhook receivers, database seed scripts, ETL pipelines. Map: source → transform → destination for each flow.
|
|
377
|
+
|
|
378
|
+
**Step 2 — Audit data quality**
|
|
379
|
+
Check for: missing input validation on data ingestion endpoints, no schema validation on imported files, no null/empty checks on required fields, no data type coercion (string "123" stored as string not number), no anomaly detection (sudden 10x spike in values), no data freshness check ("when was this data last updated?"), and no deduplication on event streams.
|
|
380
|
+
|
|
381
|
+
**Step 3 — Emit validation patterns**
|
|
382
|
+
Emit: schema validation with Zod for API inputs, data pipeline validation middleware, anomaly detection query, data freshness monitor, and deduplication patterns.
|
|
383
|
+
|
|
384
|
+
#### Example
|
|
385
|
+
|
|
386
|
+
```typescript
|
|
387
|
+
import { z } from 'zod';
|
|
388
|
+
|
|
389
|
+
// Data pipeline validation schema
|
|
390
|
+
const MetricRowSchema = z.object({
|
|
391
|
+
timestamp: z.coerce.date(),
|
|
392
|
+
metric_name: z.string().min(1).max(100),
|
|
393
|
+
value: z.number().finite(),
|
|
394
|
+
source: z.enum(['api', 'webhook', 'import', 'manual']),
|
|
395
|
+
tags: z.record(z.string()).optional(),
|
|
396
|
+
});
|
|
397
|
+
|
|
398
|
+
// Batch validation with error collection (not fail-fast)
|
|
399
|
+
function validateBatch(rows: unknown[]): { valid: z.infer<typeof MetricRowSchema>[]; errors: { row: number; error: string }[] } {
|
|
400
|
+
const valid: z.infer<typeof MetricRowSchema>[] = [];
|
|
401
|
+
const errors: { row: number; error: string }[] = [];
|
|
402
|
+
rows.forEach((row, i) => {
|
|
403
|
+
const result = MetricRowSchema.safeParse(row);
|
|
404
|
+
if (result.success) valid.push(result.data);
|
|
405
|
+
else errors.push({ row: i, error: result.error.issues.map(e => e.message).join('; ') });
|
|
406
|
+
});
|
|
407
|
+
return { valid, errors };
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
// Anomaly detection — flag values >3 standard deviations from rolling mean
|
|
411
|
+
// SELECT metric_name, value, timestamp,
|
|
412
|
+
// AVG(value) OVER (PARTITION BY metric_name ORDER BY timestamp ROWS 30 PRECEDING) AS rolling_mean,
|
|
413
|
+
// STDDEV(value) OVER (PARTITION BY metric_name ORDER BY timestamp ROWS 30 PRECEDING) AS rolling_std
|
|
414
|
+
// FROM metrics
|
|
415
|
+
// HAVING ABS(value - rolling_mean) > 3 * rolling_std;
|
|
416
|
+
|
|
417
|
+
// Data freshness monitor
|
|
418
|
+
async function checkFreshness(tables: string[], maxStaleMinutes: number) {
|
|
419
|
+
const stale: string[] = [];
|
|
420
|
+
for (const table of tables) {
|
|
421
|
+
const result = await db.query(
|
|
422
|
+
`SELECT EXTRACT(EPOCH FROM NOW() - MAX(updated_at)) / 60 AS minutes_stale FROM ${table}`
|
|
423
|
+
);
|
|
424
|
+
if (result.rows[0]?.minutes_stale > maxStaleMinutes) stale.push(table);
|
|
425
|
+
}
|
|
426
|
+
return stale;
|
|
427
|
+
}
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
### statistical-analysis
|
|
433
|
+
|
|
434
|
+
Statistical analysis patterns — significance testing, regression basics, distribution analysis, and correlation detection for product metrics.
|
|
435
|
+
|
|
436
|
+
#### Workflow
|
|
437
|
+
|
|
438
|
+
**Step 1 — Identify analysis need**
|
|
439
|
+
Determine what type of analysis is needed: comparing two groups (A/B test significance), finding relationships (correlation), predicting values (regression), understanding distribution (histogram, percentiles), or detecting trends (time series decomposition).
|
|
440
|
+
|
|
441
|
+
**Step 2 — Select method**
|
|
442
|
+
|
|
443
|
+
| Question | Method | When to use |
|
|
444
|
+
|----------|--------|-------------|
|
|
445
|
+
| "Is A different from B?" | Two-sample t-test or Chi-square | Comparing conversion rates, revenue per user |
|
|
446
|
+
| "Are these correlated?" | Pearson/Spearman correlation | Feature usage vs retention, price vs conversion |
|
|
447
|
+
| "What predicts Y?" | Linear/logistic regression | Churn prediction, revenue forecasting |
|
|
448
|
+
| "What's the distribution?" | Histogram + percentiles | Response times, order values, session lengths |
|
|
449
|
+
| "Is this trend real?" | Mann-Kendall or linear regression on time | Month-over-month growth, seasonal patterns |
|
|
450
|
+
|
|
451
|
+
**Step 3 — Emit analysis patterns**
|
|
452
|
+
|
|
453
|
+
#### Example
|
|
454
|
+
|
|
455
|
+
```typescript
|
|
456
|
+
// Chi-square significance test for A/B conversion rates
|
|
457
|
+
function chiSquareTest(
|
|
458
|
+
controlConversions: number, controlTotal: number,
|
|
459
|
+
treatmentConversions: number, treatmentTotal: number
|
|
460
|
+
): { chiSquare: number; pValue: number; significant: boolean } {
|
|
461
|
+
const controlRate = controlConversions / controlTotal;
|
|
462
|
+
const treatmentRate = treatmentConversions / treatmentTotal;
|
|
463
|
+
const pooledRate = (controlConversions + treatmentConversions) / (controlTotal + treatmentTotal);
|
|
464
|
+
|
|
465
|
+
const expected = [
|
|
466
|
+
[controlTotal * pooledRate, controlTotal * (1 - pooledRate)],
|
|
467
|
+
[treatmentTotal * pooledRate, treatmentTotal * (1 - pooledRate)],
|
|
468
|
+
];
|
|
469
|
+
const observed = [
|
|
470
|
+
[controlConversions, controlTotal - controlConversions],
|
|
471
|
+
[treatmentConversions, treatmentTotal - treatmentConversions],
|
|
472
|
+
];
|
|
473
|
+
|
|
474
|
+
let chiSq = 0;
|
|
475
|
+
for (let i = 0; i < 2; i++) {
|
|
476
|
+
for (let j = 0; j < 2; j++) {
|
|
477
|
+
chiSq += Math.pow(observed[i][j] - expected[i][j], 2) / expected[i][j];
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
// p-value approximation for 1 degree of freedom
|
|
482
|
+
const pValue = 1 - normalCDF(Math.sqrt(chiSq));
|
|
483
|
+
return { chiSquare: chiSq, pValue, significant: pValue < 0.05 };
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
// Percentile calculation (for response time analysis, order values, etc.)
|
|
487
|
+
function percentiles(values: number[], points: number[] = [50, 75, 90, 95, 99]): Record<string, number> {
|
|
488
|
+
const sorted = [...values].sort((a, b) => a - b);
|
|
489
|
+
return Object.fromEntries(
|
|
490
|
+
points.map(p => [`p${p}`, sorted[Math.ceil((p / 100) * sorted.length) - 1]])
|
|
491
|
+
);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
// SQL — Correlation between two metrics (PostgreSQL)
|
|
495
|
+
// SELECT CORR(feature_usage_count, retention_days) AS correlation,
|
|
496
|
+
// CASE
|
|
497
|
+
// WHEN ABS(CORR(feature_usage_count, retention_days)) > 0.7 THEN 'strong'
|
|
498
|
+
// WHEN ABS(CORR(feature_usage_count, retention_days)) > 0.4 THEN 'moderate'
|
|
499
|
+
// ELSE 'weak'
|
|
500
|
+
// END AS strength
|
|
501
|
+
// FROM user_metrics;
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
---
|
|
505
|
+
|
|
506
|
+
## Connections
|
|
507
|
+
|
|
508
|
+
```
|
|
509
|
+
Calls → @rune/ui (L4): dashboard components
|
|
510
|
+
Calls → @rune/backend (L4): tracking API setup
|
|
511
|
+
Called By ← marketing (L2): measuring campaign performance
|
|
512
|
+
Called By ← cook (L1): when analytics feature requested
|
|
513
|
+
```
|
|
514
|
+
|
|
515
|
+
## Tech Stack Support
|
|
516
|
+
|
|
517
|
+
| Area | Options | Notes |
|
|
518
|
+
|------|---------|-------|
|
|
519
|
+
| Analytics | GA4, Plausible, PostHog, Mixpanel | Plausible for privacy-first; PostHog for product analytics |
|
|
520
|
+
| Feature Flags | LaunchDarkly, Unleash, GrowthBook | GrowthBook open-source with built-in A/B |
|
|
521
|
+
| Charts | Recharts, Tremor, Chart.js, D3 | Tremor best for dashboards; D3 for custom visualizations |
|
|
522
|
+
| Database | PostgreSQL + aggregation views | Pre-aggregate for dashboard performance |
|
|
523
|
+
|
|
524
|
+
## Constraints
|
|
525
|
+
|
|
526
|
+
1. MUST use typed event taxonomy — ad-hoc event names create unmaintainable analytics that nobody trusts.
|
|
527
|
+
2. MUST implement consent management before any tracking — GDPR/CCPA compliance is non-negotiable.
|
|
528
|
+
3. MUST calculate sample size before starting A/B tests — running experiments without power analysis wastes time and produces meaningless results.
|
|
529
|
+
4. MUST aggregate data server-side for dashboards — sending raw events to the client causes slow loads and exposes user data.
|
|
530
|
+
5. MUST persist variant assignment per user — inconsistent assignment invalidates experiment results.
|
|
531
|
+
|
|
532
|
+
## Sharp Edges
|
|
533
|
+
|
|
534
|
+
| Failure Mode | Severity | Mitigation |
|
|
535
|
+
|---|---|---|
|
|
536
|
+
| Peeking at A/B test results before reaching sample size (false positive) | HIGH | Lock results until sample size reached; show "not yet significant" warning |
|
|
537
|
+
| Event name typo means data goes to wrong metric (silent data loss) | HIGH | Typed event taxonomy with TypeScript union; no raw string event names |
|
|
538
|
+
| Ad blockers drop 30-40% of client-side tracking events | HIGH | Implement server-side tracking proxy (`/api/analytics`); use `sendBeacon` |
|
|
539
|
+
| Dashboard loads 500K raw events client-side (browser freezes) | HIGH | Pre-aggregate in SQL; paginate time series; lazy-load off-screen charts |
|
|
540
|
+
| Same user gets different A/B variant across sessions (polluted results) | MEDIUM | Hash user ID + experiment ID for deterministic assignment; persist in cookie |
|
|
541
|
+
| Funnel shows 0% conversion because step events use different flow IDs | MEDIUM | Generate flow ID at funnel entry; pass through all steps; validate correlation |
|
|
542
|
+
|
|
543
|
+
## Done When
|
|
544
|
+
|
|
545
|
+
- Event tracking fires with typed taxonomy and consent management
|
|
546
|
+
- A/B testing assigns persistent variants with sample size calculation
|
|
547
|
+
- Funnel analysis tracks correlated steps with drop-off rates
|
|
548
|
+
- Dashboard renders KPI cards with comparison, time series, and export
|
|
549
|
+
- Server-side tracking proxy handles ad-blocked clients
|
|
550
|
+
- SQL queries use parameterized statements, proper indexing, and cursor-based pagination
|
|
551
|
+
- Data pipeline validates inputs with schema enforcement and anomaly detection
|
|
552
|
+
- Statistical tests applied correctly (right method for right question)
|
|
553
|
+
- Structured report emitted for each skill invoked
|
|
554
|
+
|
|
555
|
+
## Cost Profile
|
|
556
|
+
|
|
557
|
+
~8,000–14,000 tokens per full pack run (all 4 skills). Individual skill: ~2,000–4,000 tokens. Sonnet default. Use haiku for detection scans; escalate to sonnet for experiment design and dashboard patterns.
|