@rune-kit/rune 2.2.0 → 2.2.2
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/README.md +72 -40
- package/compiler/__tests__/pack-split.test.js +145 -0
- package/compiler/bin/rune.js +26 -9
- package/compiler/doctor.js +42 -0
- package/compiler/emitter.js +27 -4
- package/compiler/parser.js +41 -3
- package/compiler/transformer.js +10 -6
- package/compiler/transforms/compliance.js +40 -0
- package/docs/ANTIGRAVITY-GAP-ANALYSIS.md +369 -0
- package/docs/ARCHITECTURE.md +332 -0
- package/docs/COMMUNITY-PACKS.md +109 -0
- package/docs/CONTRIBUTING-L4.md +215 -0
- package/docs/CROSS-IDE-ANALYSIS.md +164 -0
- package/docs/EXTENSION-TEMPLATE.md +108 -0
- package/docs/MESH-RULES.md +34 -0
- package/docs/MULTI-PLATFORM.md +804 -0
- package/docs/SKILL-DEPTH-AUDIT.md +191 -0
- package/docs/SKILL-TEMPLATE.md +72 -0
- package/docs/TRADE-MATRIX.md +327 -0
- package/docs/VERSIONING.md +91 -0
- package/docs/VISION.md +263 -0
- package/docs/assets/demo-subtitles.srt +215 -0
- package/docs/assets/end-card.html +276 -0
- package/docs/assets/mesh-diagram.html +654 -0
- package/docs/assets/thumbnail.html +295 -0
- package/docs/guides/cli.md +403 -0
- package/docs/guides/index.html +1346 -0
- package/docs/index.html +674 -0
- package/docs/references/claudekit-analysis.md +414 -0
- package/docs/references/voltagent-analysis.md +189 -0
- package/docs/script.js +277 -0
- package/docs/skills/index.html +832 -0
- package/docs/style.css +583 -0
- package/docs/video-demo-plan.md +172 -0
- package/extensions/ai-ml/PACK.md +38 -474
- package/extensions/ai-ml/skills/ai-agents.md +172 -0
- package/extensions/ai-ml/skills/code-sandbox.md +187 -0
- package/extensions/ai-ml/skills/deep-research.md +146 -0
- package/extensions/ai-ml/skills/embedding-search.md +66 -0
- package/extensions/ai-ml/skills/fine-tuning-guide.md +74 -0
- package/extensions/ai-ml/skills/llm-architect.md +125 -0
- package/extensions/ai-ml/skills/llm-integration.md +64 -0
- package/extensions/ai-ml/skills/prompt-patterns.md +72 -0
- package/extensions/ai-ml/skills/rag-patterns.md +66 -0
- package/extensions/ai-ml/skills/web-extraction.md +114 -0
- package/extensions/analytics/PACK.md +19 -484
- package/extensions/analytics/skills/ab-testing.md +72 -0
- package/extensions/analytics/skills/dashboard-patterns.md +83 -0
- package/extensions/analytics/skills/data-validation.md +68 -0
- package/extensions/analytics/skills/funnel-analysis.md +81 -0
- package/extensions/analytics/skills/sql-patterns.md +57 -0
- package/extensions/analytics/skills/statistical-analysis.md +79 -0
- package/extensions/analytics/skills/tracking-setup.md +71 -0
- package/extensions/backend/PACK.md +44 -618
- package/extensions/backend/skills/api-patterns.md +84 -0
- package/extensions/backend/skills/async-pipeline.md +193 -0
- package/extensions/backend/skills/auth-patterns.md +97 -0
- package/extensions/backend/skills/background-jobs.md +133 -0
- package/extensions/backend/skills/caching-patterns.md +108 -0
- package/extensions/backend/skills/cli-generation.md +133 -0
- package/extensions/backend/skills/database-patterns.md +87 -0
- package/extensions/backend/skills/middleware-patterns.md +104 -0
- package/extensions/chrome-ext/PACK.md +19 -921
- package/extensions/chrome-ext/skills/cws-preflight.md +143 -0
- package/extensions/chrome-ext/skills/cws-publish.md +104 -0
- package/extensions/chrome-ext/skills/ext-ai-integration.md +251 -0
- package/extensions/chrome-ext/skills/ext-messaging.md +139 -0
- package/extensions/chrome-ext/skills/ext-storage.md +133 -0
- package/extensions/chrome-ext/skills/mv3-scaffold.md +164 -0
- package/extensions/content/PACK.md +43 -335
- package/extensions/content/skills/blog-patterns.md +88 -0
- package/extensions/content/skills/cms-integration.md +131 -0
- package/extensions/content/skills/content-scoring.md +107 -0
- package/extensions/content/skills/i18n.md +83 -0
- package/extensions/content/skills/mdx-authoring.md +137 -0
- package/extensions/content/skills/reference.md +1014 -0
- package/extensions/content/skills/seo-patterns.md +67 -0
- package/extensions/content/skills/video-repurpose.md +153 -0
- package/extensions/devops/PACK.md +38 -457
- package/extensions/devops/skills/chaos-testing.md +67 -0
- package/extensions/devops/skills/ci-cd.md +75 -0
- package/extensions/devops/skills/docker.md +58 -0
- package/extensions/devops/skills/edge-serverless.md +163 -0
- package/extensions/devops/skills/infra-as-code.md +158 -0
- package/extensions/devops/skills/kubernetes.md +110 -0
- package/extensions/devops/skills/monitoring.md +57 -0
- package/extensions/devops/skills/server-setup.md +64 -0
- package/extensions/devops/skills/ssl-domain.md +42 -0
- package/extensions/ecommerce/PACK.md +62 -226
- package/extensions/ecommerce/skills/cart-system.md +79 -0
- package/extensions/ecommerce/skills/inventory-mgmt.md +102 -0
- package/extensions/ecommerce/skills/order-management.md +126 -0
- package/extensions/ecommerce/skills/payment-integration.md +472 -0
- package/extensions/ecommerce/skills/shopify-dev.md +69 -0
- package/extensions/ecommerce/skills/subscription-billing.md +93 -0
- package/extensions/ecommerce/skills/tax-compliance.md +117 -0
- package/extensions/gamedev/PACK.md +66 -317
- package/extensions/gamedev/skills/asset-pipeline.md +74 -0
- package/extensions/gamedev/skills/audio-system.md +129 -0
- package/extensions/gamedev/skills/camera-system.md +87 -0
- package/extensions/gamedev/skills/ecs.md +98 -0
- package/extensions/gamedev/skills/game-loops.md +72 -0
- package/extensions/gamedev/skills/input-system.md +199 -0
- package/extensions/gamedev/skills/multiplayer.md +180 -0
- package/extensions/gamedev/skills/particles.md +105 -0
- package/extensions/gamedev/skills/physics-engine.md +89 -0
- package/extensions/gamedev/skills/scene-management.md +146 -0
- package/extensions/gamedev/skills/threejs-patterns.md +90 -0
- package/extensions/gamedev/skills/webgl.md +71 -0
- package/extensions/mobile/PACK.md +56 -223
- package/extensions/mobile/skills/app-store-connect.md +152 -0
- package/extensions/mobile/skills/app-store-prep.md +66 -0
- package/extensions/mobile/skills/deep-linking.md +109 -0
- package/extensions/mobile/skills/flutter.md +60 -0
- package/extensions/mobile/skills/ios-build-pipeline.md +142 -0
- package/extensions/mobile/skills/native-bridge.md +66 -0
- package/extensions/mobile/skills/ota-updates.md +97 -0
- package/extensions/mobile/skills/push-notifications.md +111 -0
- package/extensions/mobile/skills/react-native.md +82 -0
- package/extensions/saas/PACK.md +26 -720
- package/extensions/saas/skills/billing-integration.md +121 -0
- package/extensions/saas/skills/feature-flags.md +130 -0
- package/extensions/saas/skills/multi-tenant.md +103 -0
- package/extensions/saas/skills/onboarding-flow.md +139 -0
- package/extensions/saas/skills/subscription-flow.md +95 -0
- package/extensions/saas/skills/team-management.md +144 -0
- package/extensions/security/PACK.md +10 -448
- package/extensions/security/skills/api-security.md +140 -0
- package/extensions/security/skills/compliance.md +68 -0
- package/extensions/security/skills/owasp-audit.md +64 -0
- package/extensions/security/skills/pentest-patterns.md +77 -0
- package/extensions/security/skills/secret-mgmt.md +65 -0
- package/extensions/security/skills/supply-chain.md +65 -0
- package/extensions/trading/PACK.md +18 -535
- package/extensions/trading/skills/chart-components.md +55 -0
- package/extensions/trading/skills/experiment-loop.md +125 -0
- package/extensions/trading/skills/fintech-patterns.md +47 -0
- package/extensions/trading/skills/indicator-library.md +58 -0
- package/extensions/trading/skills/quant-analysis.md +111 -0
- package/extensions/trading/skills/realtime-data.md +58 -0
- package/extensions/trading/skills/trade-logic.md +104 -0
- package/extensions/ui/PACK.md +36 -853
- package/extensions/ui/skills/a11y-audit.md +91 -0
- package/extensions/ui/skills/animation-patterns.md +106 -0
- package/extensions/ui/skills/component-patterns.md +75 -0
- package/extensions/ui/skills/design-decision.md +108 -0
- package/extensions/ui/skills/design-system.md +68 -0
- package/extensions/ui/skills/landing-patterns.md +155 -0
- package/extensions/ui/skills/palette-picker.md +173 -0
- package/extensions/ui/skills/react-health.md +90 -0
- package/extensions/ui/skills/type-system.md +125 -0
- package/extensions/ui/skills/web-vitals.md +153 -0
- package/extensions/zalo/PACK.md +117 -0
- package/extensions/zalo/skills/zalo-oa-mcp.md +317 -0
- package/extensions/zalo/skills/zalo-oa-messaging.md +429 -0
- package/extensions/zalo/skills/zalo-oa-setup.md +236 -0
- package/extensions/zalo/skills/zalo-oa-webhook.md +189 -0
- package/extensions/zalo/skills/zalo-personal-messaging.md +194 -0
- package/extensions/zalo/skills/zalo-personal-setup.md +153 -0
- package/extensions/zalo/skills/zalo-rate-guard.md +219 -0
- package/hooks/.gitkeep +0 -0
- package/hooks/auto-format/index.cjs +48 -0
- package/hooks/context-watch/index.cjs +68 -0
- package/hooks/hooks.json +99 -0
- package/hooks/metrics-collector/index.cjs +42 -0
- package/hooks/post-session-reflect/index.cjs +153 -0
- package/hooks/pre-compact/index.cjs +95 -0
- package/hooks/pre-tool-guard/index.cjs +68 -0
- package/hooks/run-hook +17 -0
- package/hooks/run-hook.cjs +16 -0
- package/hooks/run-hook.cmd +1 -0
- package/hooks/secrets-scan/index.cjs +100 -0
- package/hooks/session-start/index.cjs +65 -0
- package/hooks/typecheck/index.cjs +65 -0
- package/package.json +9 -4
- package/references/ui-pro-max-data/LICENSE-UI-PRO-MAX +21 -0
- package/references/ui-pro-max-data/charts.csv +26 -0
- package/references/ui-pro-max-data/colors.csv +162 -0
- package/references/ui-pro-max-data/styles.csv +85 -0
- package/references/ui-pro-max-data/typography.csv +74 -0
- package/references/ui-pro-max-data/ui-reasoning.csv +162 -0
- package/references/ui-pro-max-data/ux-guidelines.csv +100 -0
- package/skills/ba/SKILL.md +10 -0
- package/skills/brainstorm/SKILL.md +63 -1
- package/skills/completion-gate/SKILL.md +34 -1
- package/skills/context-engine/SKILL.md +13 -0
- package/skills/cook/SKILL.md +155 -5
- package/skills/debug/SKILL.md +56 -1
- package/skills/design/SKILL.md +11 -0
- package/skills/fix/SKILL.md +26 -1
- package/skills/mcp-builder/SKILL.md +48 -1
- package/skills/plan/SKILL.md +23 -6
- package/skills/review/SKILL.md +44 -5
- package/skills/review-intake/SKILL.md +17 -1
- package/skills/skill-forge/SKILL.md +38 -3
- package/skills/skill-router/SKILL.md +89 -7
- package/skills/team/SKILL.md +24 -1
- package/skills/test/SKILL.md +28 -1
- package/skills/verification/SKILL.md +98 -1
|
@@ -7,6 +7,7 @@ metadata:
|
|
|
7
7
|
layer: L4
|
|
8
8
|
price: "$12"
|
|
9
9
|
target: Growth engineers
|
|
10
|
+
format: split
|
|
10
11
|
---
|
|
11
12
|
|
|
12
13
|
# @rune/analytics
|
|
@@ -25,483 +26,26 @@ Analytics implementations fail silently: tracking events that fire but never rea
|
|
|
25
26
|
- Called by `cook` (L1) when analytics feature requested
|
|
26
27
|
- Called by `marketing` (L2) when measuring campaign performance
|
|
27
28
|
|
|
28
|
-
## Skills Included
|
|
29
|
+
## Skills Included
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
| Skill | Model | Description |
|
|
32
|
+
|-------|-------|-------------|
|
|
33
|
+
| [tracking-setup](skills/tracking-setup.md) | sonnet | GA4, Plausible, PostHog, Mixpanel — event taxonomy design, consent management, server-side tracking, UTM handling. |
|
|
34
|
+
| [ab-testing](skills/ab-testing.md) | sonnet | Experiment design, statistical significance, feature flags (LaunchDarkly, Unleash), rollout strategies, result analysis. |
|
|
35
|
+
| [funnel-analysis](skills/funnel-analysis.md) | sonnet | Conversion tracking, drop-off identification, cohort analysis, retention metrics, LTV calculation, attribution modeling. |
|
|
36
|
+
| [dashboard-patterns](skills/dashboard-patterns.md) | sonnet | KPI cards, time series charts, comparison views, drill-down navigation, export functionality, real-time counters. |
|
|
37
|
+
| [sql-patterns](skills/sql-patterns.md) | sonnet | Aggregations, window functions, CTEs, performance optimization, and safe parameterized queries for analytics workloads. |
|
|
38
|
+
| [data-validation](skills/data-validation.md) | sonnet | Input validation, schema enforcement, data pipeline checks, anomaly detection, and data freshness monitoring. |
|
|
39
|
+
| [statistical-analysis](skills/statistical-analysis.md) | sonnet | Significance testing, regression basics, distribution analysis, and correlation detection for product metrics. |
|
|
31
40
|
|
|
32
|
-
|
|
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
|
-
```
|
|
41
|
+
## Tech Stack Support
|
|
503
42
|
|
|
504
|
-
|
|
43
|
+
| Area | Options | Notes |
|
|
44
|
+
|------|---------|-------|
|
|
45
|
+
| Analytics | GA4, Plausible, PostHog, Mixpanel | Plausible for privacy-first; PostHog for product analytics |
|
|
46
|
+
| Feature Flags | LaunchDarkly, Unleash, GrowthBook | GrowthBook open-source with built-in A/B |
|
|
47
|
+
| Charts | Recharts, Tremor, Chart.js, D3 | Tremor best for dashboards; D3 for custom visualizations |
|
|
48
|
+
| Database | PostgreSQL + aggregation views | Pre-aggregate for dashboard performance |
|
|
505
49
|
|
|
506
50
|
## Connections
|
|
507
51
|
|
|
@@ -512,15 +56,6 @@ Called By ← marketing (L2): measuring campaign performance
|
|
|
512
56
|
Called By ← cook (L1): when analytics feature requested
|
|
513
57
|
```
|
|
514
58
|
|
|
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
59
|
## Constraints
|
|
525
60
|
|
|
526
61
|
1. MUST use typed event taxonomy — ad-hoc event names create unmaintainable analytics that nobody trusts.
|
|
@@ -554,4 +89,4 @@ Called By ← cook (L1): when analytics feature requested
|
|
|
554
89
|
|
|
555
90
|
## Cost Profile
|
|
556
91
|
|
|
557
|
-
~8,000–14,000 tokens per full pack run (all
|
|
92
|
+
~8,000–14,000 tokens per full pack run (all 7 skills). Individual skill: ~2,000–4,000 tokens. Sonnet default. Use haiku for detection scans; escalate to sonnet for experiment design and dashboard patterns.
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: "ab-testing"
|
|
3
|
+
pack: "@rune/analytics"
|
|
4
|
+
description: "A/B testing patterns — experiment design, statistical significance, feature flags (LaunchDarkly, Unleash), rollout strategies, result analysis."
|
|
5
|
+
model: sonnet
|
|
6
|
+
tools: [Read, Edit, Write, Grep, Glob, Bash]
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# ab-testing
|
|
10
|
+
|
|
11
|
+
A/B testing patterns — experiment design, statistical significance, feature flags (LaunchDarkly, Unleash), rollout strategies, result analysis.
|
|
12
|
+
|
|
13
|
+
#### Workflow
|
|
14
|
+
|
|
15
|
+
**Step 1 — Detect experiment setup**
|
|
16
|
+
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.
|
|
17
|
+
|
|
18
|
+
**Step 2 — Audit experiment validity**
|
|
19
|
+
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).
|
|
20
|
+
|
|
21
|
+
**Step 3 — Emit experiment patterns**
|
|
22
|
+
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.
|
|
23
|
+
|
|
24
|
+
#### Example
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
// A/B experiment with persistent assignment and significance check
|
|
28
|
+
import { z } from 'zod';
|
|
29
|
+
|
|
30
|
+
const ExperimentSchema = z.object({
|
|
31
|
+
id: z.string(),
|
|
32
|
+
variants: z.array(z.object({ id: z.string(), weight: z.number() })),
|
|
33
|
+
metrics: z.array(z.string()),
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// Persistent variant assignment (deterministic hash)
|
|
37
|
+
function assignVariant(userId: string, experimentId: string, variants: { id: string; weight: number }[]): string {
|
|
38
|
+
const hash = cyrb53(`${userId}:${experimentId}`);
|
|
39
|
+
const normalized = (hash % 10000) / 10000; // [0, 1)
|
|
40
|
+
let cumulative = 0;
|
|
41
|
+
for (const variant of variants) {
|
|
42
|
+
cumulative += variant.weight;
|
|
43
|
+
if (normalized < cumulative) return variant.id;
|
|
44
|
+
}
|
|
45
|
+
return variants[variants.length - 1].id;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Simple hash function (deterministic, fast)
|
|
49
|
+
function cyrb53(str: string): number {
|
|
50
|
+
let h1 = 0xdeadbeef, h2 = 0x41c6ce57;
|
|
51
|
+
for (let i = 0; i < str.length; i++) {
|
|
52
|
+
const ch = str.charCodeAt(i);
|
|
53
|
+
h1 = Math.imul(h1 ^ ch, 2654435761);
|
|
54
|
+
h2 = Math.imul(h2 ^ ch, 1597334677);
|
|
55
|
+
}
|
|
56
|
+
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
|
|
57
|
+
h2 = Math.imul(h2 ^ (h2 >>> 13), 3266489909);
|
|
58
|
+
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Sample size calculator (two-proportion z-test)
|
|
62
|
+
function requiredSampleSize(baselineRate: number, mde: number, power = 0.8, alpha = 0.05): number {
|
|
63
|
+
const zAlpha = 1.96; // alpha=0.05 two-tailed
|
|
64
|
+
const zBeta = 0.842; // power=0.8
|
|
65
|
+
const p1 = baselineRate;
|
|
66
|
+
const p2 = baselineRate * (1 + mde);
|
|
67
|
+
const pooled = (p1 + p2) / 2;
|
|
68
|
+
return Math.ceil(
|
|
69
|
+
(2 * pooled * (1 - pooled) * Math.pow(zAlpha + zBeta, 2)) / Math.pow(p2 - p1, 2),
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: "dashboard-patterns"
|
|
3
|
+
pack: "@rune/analytics"
|
|
4
|
+
description: "Analytics dashboard design — KPI cards, time series charts, comparison views, drill-down navigation, export functionality, real-time counters."
|
|
5
|
+
model: sonnet
|
|
6
|
+
tools: [Read, Edit, Write, Grep, Glob, Bash]
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# dashboard-patterns
|
|
10
|
+
|
|
11
|
+
Analytics dashboard design — KPI cards, time series charts, comparison views, drill-down navigation, export functionality, real-time counters.
|
|
12
|
+
|
|
13
|
+
#### Workflow
|
|
14
|
+
|
|
15
|
+
**Step 1 — Detect dashboard components**
|
|
16
|
+
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.
|
|
17
|
+
|
|
18
|
+
**Step 2 — Audit dashboard performance**
|
|
19
|
+
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.
|
|
20
|
+
|
|
21
|
+
**Step 3 — Emit dashboard patterns**
|
|
22
|
+
Emit: KPI card with comparison indicator, time series chart with range selector, server-side aggregation endpoint, lazy-loaded chart sections, and CSV export utility.
|
|
23
|
+
|
|
24
|
+
#### Example
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// Dashboard KPI card with comparison
|
|
28
|
+
interface KpiProps {
|
|
29
|
+
label: string;
|
|
30
|
+
value: number;
|
|
31
|
+
previousValue: number;
|
|
32
|
+
format: 'number' | 'currency' | 'percent';
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function KpiCard({ label, value, previousValue, format }: KpiProps) {
|
|
36
|
+
const change = previousValue ? ((value - previousValue) / previousValue) * 100 : 0;
|
|
37
|
+
const formatted = format === 'currency'
|
|
38
|
+
? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value)
|
|
39
|
+
: format === 'percent'
|
|
40
|
+
? `${value.toFixed(1)}%`
|
|
41
|
+
: new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value);
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div className="rounded-lg border bg-card p-6">
|
|
45
|
+
<p className="text-sm text-muted-foreground">{label}</p>
|
|
46
|
+
<p className="text-2xl font-bold font-mono mt-1">{formatted}</p>
|
|
47
|
+
<p className={`text-sm mt-1 ${change >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
48
|
+
{change >= 0 ? '▲' : '▼'} {Math.abs(change).toFixed(1)}% vs previous period
|
|
49
|
+
</p>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Server-side aggregation endpoint — app/api/metrics/route.ts
|
|
55
|
+
export async function GET(req: Request) {
|
|
56
|
+
const { searchParams } = new URL(req.url);
|
|
57
|
+
const range = searchParams.get('range') || '7d';
|
|
58
|
+
const interval = range === '24h' ? 'hour' : range === '7d' ? 'day' : 'week';
|
|
59
|
+
|
|
60
|
+
const metrics = await db.execute(sql`
|
|
61
|
+
SELECT DATE_TRUNC(${interval}, timestamp) AS period,
|
|
62
|
+
COUNT(*) AS page_views,
|
|
63
|
+
COUNT(DISTINCT user_id) AS unique_visitors,
|
|
64
|
+
COUNT(*) FILTER (WHERE name = 'signup_completed') AS signups
|
|
65
|
+
FROM events
|
|
66
|
+
WHERE timestamp > NOW() - ${range}::interval
|
|
67
|
+
GROUP BY period ORDER BY period
|
|
68
|
+
`);
|
|
69
|
+
return Response.json(metrics);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// CSV export utility
|
|
73
|
+
function exportCsv(data: Record<string, unknown>[], filename: string) {
|
|
74
|
+
const headers = Object.keys(data[0]);
|
|
75
|
+
const csv = [headers.join(','), ...data.map(row => headers.map(h => JSON.stringify(row[h] ?? '')).join(','))].join('\n');
|
|
76
|
+
const blob = new Blob([csv], { type: 'text/csv' });
|
|
77
|
+
const a = document.createElement('a');
|
|
78
|
+
a.href = URL.createObjectURL(blob);
|
|
79
|
+
a.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`;
|
|
80
|
+
a.click();
|
|
81
|
+
URL.revokeObjectURL(a.href);
|
|
82
|
+
}
|
|
83
|
+
```
|