Social Media Dashboard
- 91 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
Helps with ai & agent building tasks during AI-assisted development.
About
social-media-dashboard is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.
- social-media-dashboard
- AI & Agent Building
- AI-coding skill
Social Media Dashboard by the numbers
- 91 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #4,765 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill social-media-dashboardAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 91 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Helps with ai & agent building tasks during AI-assisted development.
Files
Social Media Dashboard Skill
Produce a single-screen, creator-facing social media analytics dashboard.
Workflow
1. Read the active DESIGN.md (injected above). Colors, typography, spacing, radii, and component styling all come from it. Do not invent new tokens; do not hard-code brand colors of the platforms — let the DESIGN.md carry the visual identity, and reference platforms only by name and monogram. 2. Identify which platforms the brief calls out. Default to X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform switcher to a single row, max 5 entries. 3. Generate plausible data, never Metric A / Metric B placeholders. Pick a creator persona (default: "AI / design indie creator") and derive consistent numbers across the page — e.g. follower counts on the switcher must match the KPI row when X is selected. 4. Lay out the page top-to-bottom:
- Header bar: brand mark + section label ("ANALYTICS"), a
dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a creator avatar block on the right.
- Hero strip: a one-sentence summary in display type
("You shipped 14 posts on X this week."), one supporting line of metadata, and two CTAs ("Export report", "New post →").
- Ask bar: a single-line input styled as a search field, with
ghost-text suggestions ("top performing last week", "comments from verified accounts").
- Platform switcher: 4 cards in one row, each with platform
monogram, name, follower count, and a +X.XK this week delta. The active platform uses an elevated surface from DESIGN.md.
- KPI row: 4 cards — Followers · Engagement Rate · Likes (7D) ·
Reposts (7D). Each card has a label (uppercase, label-md), a big value (display or headline-lg), a delta vs prior period, and a small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").
- Main grid (2/3 + 1/3):
- Left: Follower Growth · 30D — a full-width inline SVG line
chart with a soft area fill underneath, axis ticks at start / midpoint / end, and two labelled annotation dots ("Newsletter drop +842", "Viral thread +1.2K").
- Right: Top Post · This Week — a card showing the rendered
post (avatar, handle, post body, optional 16:9 media block), with a header tag "click-through rate 5.6%" in the DS accent.
- Lower grid (1/2 + 1/2):
- Trending topics on this platform: 5–7 chip-style rows with
topic name + post count + 24h delta sparkline (10 polyline points, no labels).
- Top comments: 3 cards, each with avatar, handle (verified
check if relevant), comment body (2 lines max, ellipsised), and a small ❤ 312 · 💬 18 row in muted text. 5. Write one self-contained HTML document:
<!doctype html>through</html>, CSS in one inline<style>block.- CSS Grid for page-level layout; Flexbox inside cards.
- Semantic HTML:
<header>,<main>,<section>,<article>. - Tag each logical region with
data-od-id="slug"for comment mode:
header, hero, ask, platform-switcher, kpis, follower-growth, top-post, trending, top-comments. 6. Charts: inline SVG only, no JS libraries.
- Line chart:
<path>for the curve, a second<path>with low-alpha
fill for the area, two <circle> annotation dots with text labels.
- Sparklines:
<polyline>with 10 points, no axes, ~16px tall. - Use the DS accent for highlights and the DS
on-surface-variantfor
muted text. Accent appears at most three times on the page. 7. Self-check:
- Every color resolves to a DESIGN.md token (or a documented
rgba(token, alpha) for glass surfaces).
- Numbers are internally consistent (switcher follower count matches
the active platform's KPI).
- Header bar and hero strip are sticky; main content scrolls.
- Density follows the DS mood: glass / cosmic DSes get more breathing
room and ambient glow on the active platform; clean / corporate DSes tighten gaps and drop the glow.
Output contract
Emit between <artifact> tags:
<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Design · Social Analytics</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
/* Totality Festival Design System — bind palette */
--surface: #121318;
--surface-dim: #121318;
--surface-bright: #38393f;
--surface-container-lowest: #0d0e13;
--surface-container-low: #1a1b21;
--surface-container: #1e1f25;
--surface-container-high: #292a2f;
--surface-container-highest: #34343a;
--on-surface: #e3e1e9;
--on-surface-variant: #d0c6ab;
--inverse-surface: #e3e1e9;
--inverse-on-surface: #2f3036;
--outline: #999077;
--outline-variant: #4d4732;
--surface-tint: #e9c400;
--primary: #fff6df;
--on-primary: #3a3000;
--primary-container: #ffd700;
--on-primary-container: #705e00;
--inverse-primary: #705d00;
--secondary: #bdf4ff;
--on-secondary: #00363d;
--secondary-container: #00e3fd;
--on-secondary-container: #00616d;
--tertiary: #fcf3ff;
--on-tertiary: #3b2754;
--tertiary-container: #e7d1ff;
--on-tertiary-container: #6b5586;
--error: #ffb4ab;
--on-error: #690005;
--error-container: #93000a;
--on-error-container: #ffdad6;
--background: #121318;
--on-background: #e3e1e9;
--surface-variant: #34343a;
/* Typography */
--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Spacing */
--spacing-unit: 8px;
--gutter: 24px;
--margin-desktop: 64px;
/* Premium glass levels */
--glass-bg-level-1: rgba(52, 52, 58, 0.15);
--glass-bg-level-2: rgba(52, 52, 58, 0.25);
--glass-bg-level-3: rgba(52, 52, 58, 0.35);
--glass-border: rgba(255, 255, 255, 0.12);
--glass-border-strong: rgba(255, 255, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.08) 0%, transparent 60%),
radial-gradient(ellipse at 100% 100%, rgba(0, 227, 253, 0.06) 0%, transparent 50%),
var(--surface);
color: var(--on-surface);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
}
/* Header */
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(18, 19, 24, 0.75);
backdrop-filter: blur(32px) saturate(180%);
border-bottom: 1px solid var(--glass-border);
padding: 16px var(--margin-desktop);
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.logo-block {
display: flex;
align-items: center;
gap: 12px;
}
.logo-block img {
height: 32px;
width: auto;
filter: drop-shadow(0 0 8px rgba(0, 227, 253, 0.3));
}
.logo-label {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-surface-variant);
}
.platform-switcher-inline {
display: flex;
gap: 8px;
margin-left: 24px;
}
.platform-pill {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
padding: 6px 16px;
border-radius: 999px;
background: transparent;
color: var(--on-surface-variant);
border: 1px solid var(--outline-variant);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.platform-pill.active {
background: var(--glass-bg-level-2);
color: var(--primary);
border-color: var(--primary-container);
box-shadow: 0 0 32px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.header-right {
display: flex;
align-items: center;
gap: 24px;
}
.time-range-tabs {
display: flex;
gap: 4px;
}
.time-tab {
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
background: transparent;
color: var(--on-surface-variant);
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
.time-tab.active {
color: var(--primary);
}
.user-block {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
filter: drop-shadow(0 0 6px rgba(0, 227, 253, 0.3));
}
.user-info {
display: flex;
flex-direction: column;
gap: 0;
}
.user-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--on-surface);
}
.user-role {
font-size: 12px;
color: var(--on-surface-variant);
}
/* Hero Strip */
.hero-strip {
position: sticky;
top: 65px;
z-index: 90;
background: rgba(18, 19, 24, 0.85);
backdrop-filter: blur(40px) saturate(180%);
border-bottom: 1px solid var(--glass-border);
padding: 32px var(--margin-desktop);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.hero-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
}
.hero-text {
flex: 1;
}
.hero-headline {
font-family: var(--font-display);
font-size: 48px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: 8px;
text-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}
.hero-meta {
font-size: 14px;
color: var(--on-surface-variant);
}
.hero-actions {
display: flex;
gap: 12px;
}
.btn {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.05em;
padding: 12px 24px;
height: 48px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.btn-primary {
background: var(--primary-container);
color: var(--on-primary);
box-shadow: 0 0 32px rgba(255, 215, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.btn-primary:hover {
box-shadow: 0 0 48px rgba(255, 215, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
}
.btn-secondary {
background: rgba(189, 244, 255, 0.08);
color: var(--secondary);
border: 1px solid var(--secondary);
backdrop-filter: blur(12px);
}
.btn-secondary:hover {
background: rgba(189, 244, 255, 0.15);
box-shadow: 0 0 24px rgba(189, 244, 255, 0.2);
}
/* Ask Bar */
.ask-bar {
padding: 24px var(--margin-desktop);
background: var(--glass-bg-level-1);
backdrop-filter: blur(20px);
}
.ask-input {
width: 100%;
font-family: var(--font-body);
font-size: 16px;
padding: 16px 20px;
background: rgba(13, 14, 19, 0.6);
color: var(--on-surface);
border: 1px solid var(--glass-border);
border-radius: 8px;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.ask-input:focus {
outline: none;
border-color: var(--secondary-container);
box-shadow: 0 0 0 3px rgba(0, 227, 253, 0.15), 0 0 32px rgba(0, 227, 253, 0.2);
background: rgba(13, 14, 19, 0.8);
}
.ask-input::placeholder {
color: var(--on-surface-variant);
opacity: 0.6;
}
/* Main Container */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 32px var(--margin-desktop);
}
/* Platform Switcher Cards */
.platform-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.platform-card {
background: var(--glass-bg-level-1);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 24px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.platform-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.platform-card.active::before {
opacity: 1;
}
.platform-card.active {
background: var(--glass-bg-level-2);
border-color: var(--primary-container);
box-shadow: 0 0 48px rgba(255, 215, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.platform-card:hover:not(.active) {
background: var(--glass-bg-level-2);
border-color: var(--glass-border-strong);
transform: translateY(-2px);
}
.platform-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.platform-icon {
font-size: 24px;
}
.platform-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--on-surface);
}
.platform-handle {
font-size: 14px;
color: var(--on-surface-variant);
}
/* KPI Row */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.kpi-card {
background: var(--glass-bg-level-1);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 24px;
position: relative;
overflow: hidden;
}
.kpi-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.kpi-label {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-surface-variant);
margin-bottom: 8px;
}
.kpi-value {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--on-surface);
margin-bottom: 4px;
}
.kpi-delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: var(--secondary);
filter: drop-shadow(0 0 8px rgba(189, 244, 255, 0.3));
}
.kpi-footnote {
font-size: 12px;
color: var(--on-surface-variant);
margin-top: 4px;
}
/* Main Grid - 3 columns */
.main-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
margin-bottom: 32px;
}
.chart-card {
background: var(--glass-bg-level-1);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 32px;
position: relative;
overflow: hidden;
}
.chart-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.chart-header {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--on-surface);
margin-bottom: 24px;
}
.chart-svg {
width: 100%;
height: 280px;
}
.top-post-card {
background: var(--glass-bg-level-1);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 24px;
position: relative;
overflow: hidden;
}
.top-post-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.post-header-tag {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--on-primary-container);
background: var(--primary-container);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 16px;
box-shadow: 0 0 24px rgba(255, 215, 0, 0.4);
}
.post-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.post-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--glass-border);
}
.post-handle-block {
flex: 1;
}
.post-handle {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--on-surface);
display: flex;
align-items: center;
gap: 4px;
}
.verified-badge {
color: var(--secondary-container);
font-size: 16px;
filter: drop-shadow(0 0 6px rgba(0, 227, 253, 0.5));
}
.post-timestamp {
font-size: 12px;
color: var(--on-surface-variant);
}
.post-body {
font-size: 15px;
line-height: 1.5;
color: var(--on-surface);
margin-bottom: 12px;
}
.post-media {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(18, 19, 24, 0.9) 100%);
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 8px;
margin-bottom: 12px;
box-shadow: 0 0 24px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.post-media svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.post-media-caption {
position: absolute;
left: 12px;
bottom: 10px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.85;
}
.post-engagement {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--on-surface-variant);
}
/* Geo Map Card */
.geo-card {
background: var(--glass-bg-level-1);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 32px;
position: relative;
overflow: hidden;
}
.geo-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.geo-map {
width: 100%;
height: 200px;
position: relative;
}
.geo-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-container);
box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
.geo-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 20px;
}
.geo-stat {
font-size: 13px;
}
.geo-stat-label {
color: var(--on-surface-variant);
}
.geo-stat-value {
font-family: var(--font-display);
font-weight: 600;
color: var(--on-surface);
}
/* GitHub Contributors */
.contributors-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 20px;
}
.contributor-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.contributor-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--glass-border);
box-shadow: 0 0 16px rgba(0, 227, 253, 0.2);
transition: all 0.3s ease;
}
.contributor-avatar:hover {
border-color: var(--secondary);
box-shadow: 0 0 24px rgba(0, 227, 253, 0.4);
transform: scale(1.05);
}
.contributor-name {
font-size: 11px;
color: var(--on-surface-variant);
text-align: center;
}
.contributor-commits {
font-size: 10px;
color: var(--on-surface-variant);
opacity: 0.7;
}
/* Lower Grid */
.lower-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.trending-card, .comments-card {
background: var(--glass-bg-level-1);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 24px;
position: relative;
overflow: hidden;
}
.trending-card::before, .comments-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.section-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--on-surface);
margin-bottom: 20px;
}
.trending-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(153, 144, 119, 0.15);
}
.trending-row:last-child {
border-bottom: none;
}
.trending-name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: var(--on-surface);
}
.trending-count {
font-size: 13px;
color: var(--on-surface-variant);
margin-left: 8px;
}
.sparkline {
width: 60px;
height: 20px;
}
.comment-item {
padding: 16px 0;
border-bottom: 1px solid rgba(153, 144, 119, 0.15);
}
.comment-item:last-child {
border-bottom: none;
}
.comment-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.comment-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--glass-bg-level-2);
border: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: var(--primary);
}
.comment-handle {
font-size: 13px;
font-weight: 600;
color: var(--on-surface);
}
.comment-time {
font-size: 12px;
color: var(--on-surface-variant);
}
.comment-body {
font-size: 14px;
line-height: 1.5;
color: var(--on-surface-variant);
margin-bottom: 6px;
}
.comment-engagement {
font-size: 12px;
color: var(--on-surface-variant);
}
/* GitHub specific styles */
.github-chart-explosive {
position: relative;
}
.milestone-marker {
position: absolute;
font-size: 11px;
font-family: var(--font-display);
font-weight: 600;
color: var(--primary);
background: rgba(255, 215, 0, 0.15);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--primary-container);
box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}
</style>
</head>
<body>
<!--
Global SVG defs — every avatar / brand mark on the page references
the same teal-to-mint gradient. Defining it once here avoids per-SVG
duplication and ensures consistent rendering when the page is
captured headlessly.
-->
<svg width="0" height="0" style="position: absolute" aria-hidden="true">
<defs>
<linearGradient id="brandRing" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#7CFFB4"/>
<stop offset="100%" stop-color="#1FE3D6"/>
</linearGradient>
</defs>
</svg>
<!-- Header -->
<header data-od-id="header">
<div class="header-left">
<div class="logo-block">
<svg class="brand-mark" viewBox="0 0 64 64" width="32" height="32" aria-label="Open Design">
<circle cx="32" cy="32" r="28" fill="#1c1c20" stroke="url(#brandRing)" stroke-width="3"/>
<path d="M22 22 L46 32 L26 36 L22 46 Z" fill="none" stroke="url(#brandRing)" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
<span class="logo-label">ANALYTICS</span>
</div>
<div class="platform-switcher-inline">
<button class="platform-pill active" data-platform="x">X</button>
<button class="platform-pill" data-platform="github">GitHub</button>
</div>
</div>
<div class="header-right">
<div class="time-range-tabs">
<button class="time-tab active">7D</button>
<button class="time-tab">30D</button>
<button class="time-tab">90D</button>
<button class="time-tab">YTD</button>
</div>
<div class="user-block">
<svg class="user-avatar" viewBox="0 0 64 64" aria-label="Open Design avatar">
<circle cx="32" cy="32" r="30" fill="#1c1c20" stroke="url(#brandRing)" stroke-width="2.5"/>
<path d="M22 22 L46 32 L26 36 L22 46 Z" fill="none" stroke="url(#brandRing)" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
<div class="user-info">
<div class="user-name">Open Design</div>
<div class="user-role">Design agent · by Nexu Labs</div>
</div>
</div>
</div>
</header>
<!-- Hero Strip -->
<section class="hero-strip" data-od-id="hero">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-headline" id="hero-headline">Open Design shipped 9 posts on X this week.</h1>
<p class="hero-meta" id="hero-meta">Engagement up 0.6% vs. last week · Top thread reached 38K accounts</p>
</div>
<div class="hero-actions">
<button class="btn btn-secondary">Export report</button>
<button class="btn btn-primary" id="hero-cta">New post →</button>
</div>
</div>
</section>
<!-- Ask Bar -->
<section class="ask-bar" data-od-id="ask">
<input
type="text"
class="ask-input"
id="ask-input"
placeholder="Ask across your posts — 'top performing last week', 'comments from verified accounts'..."
>
</section>
<!-- Main Container -->
<div class="container">
<!-- Platform Cards -->
<div class="platform-cards" data-od-id="platform-switcher">
<div class="platform-card active" data-platform-card="x">
<div class="platform-card-header">
<span class="platform-icon">𝕏</span>
<div>
<div class="platform-name">X (Twitter)</div>
<div class="platform-handle">@opendesignhq</div>
</div>
</div>
</div>
<div class="platform-card" data-platform-card="github">
<div class="platform-card-header">
<span class="platform-icon">⚙</span>
<div>
<div class="platform-name">GitHub</div>
<div class="platform-handle">nexu-io/open-design</div>
</div>
</div>
</div>
</div>
<!-- KPI Row -->
<div class="kpi-row" data-od-id="kpis">
<div class="kpi-card">
<div class="kpi-label" id="kpi-1-label">Followers</div>
<div class="kpi-value" id="kpi-1-value">14,287</div>
<div class="kpi-delta">↗ <span id="kpi-1-delta">+2.3%</span></div>
<div class="kpi-footnote" id="kpi-1-footnote">vs. 13,968 last week</div>
</div>
<div class="kpi-card">
<div class="kpi-label" id="kpi-2-label">Engagement Rate</div>
<div class="kpi-value" id="kpi-2-value">4.80%</div>
<div class="kpi-delta">↗ <span id="kpi-2-delta">+0.4%</span></div>
<div class="kpi-footnote" id="kpi-2-footnote">vs. 4.4% last week</div>
</div>
<div class="kpi-card">
<div class="kpi-label" id="kpi-3-label">Likes (7D)</div>
<div class="kpi-value" id="kpi-3-value">1,842</div>
<div class="kpi-delta">↗ <span id="kpi-3-delta">+18%</span></div>
<div class="kpi-footnote" id="kpi-3-footnote">+280 vs. last week</div>
</div>
<div class="kpi-card">
<div class="kpi-label" id="kpi-4-label">Reposts (7D)</div>
<div class="kpi-value" id="kpi-4-value">487</div>
<div class="kpi-delta">↗ <span id="kpi-4-delta">+22%</span></div>
<div class="kpi-footnote" id="kpi-4-footnote">+88 vs. last week</div>
</div>
</div>
<!-- Main Grid (3 columns) -->
<div class="main-grid">
<!-- Growth Chart -->
<div class="chart-card" data-od-id="growth-chart">
<h2 class="chart-header" id="chart-title">Follower Growth · 30D</h2>
<div class="github-chart-explosive">
<svg class="chart-svg" id="chart-svg" viewBox="0 0 600 280"></svg>
</div>
</div>
<!-- Geo Distribution -->
<div class="geo-card" data-od-id="geo-distribution">
<h2 class="chart-header">Audience Geography</h2>
<div class="geo-map">
<svg width="100%" height="200" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid meet">
<!-- Simplified world map: filled silhouettes for instant recognition -->
<g fill="rgba(208, 198, 171, 0.18)" stroke="rgba(208, 198, 171, 0.45)" stroke-width="0.6" stroke-linejoin="round">
<!-- North America -->
<path d="M 38,52 L 56,46 L 78,44 L 96,50 L 108,58 L 112,72 L 102,86 L 90,92 L 78,90 L 70,98 L 58,104 L 48,98 L 40,84 L 34,68 Z"/>
<!-- Central America strip -->
<path d="M 90,92 L 100,100 L 108,112 L 102,118 L 94,114 L 88,104 Z"/>
<!-- South America -->
<path d="M 110,118 L 122,120 L 130,134 L 134,150 L 130,164 L 122,176 L 114,168 L 110,150 L 108,134 Z"/>
<!-- Greenland -->
<path d="M 134,40 L 146,38 L 154,46 L 150,56 L 138,54 Z"/>
<!-- Europe -->
<path d="M 178,52 L 196,48 L 212,52 L 220,60 L 216,72 L 204,76 L 190,72 L 180,66 Z"/>
<!-- Africa -->
<path d="M 196,82 L 218,80 L 230,90 L 234,108 L 230,128 L 220,142 L 208,148 L 196,140 L 188,124 L 186,104 L 192,90 Z"/>
<!-- Middle East / South Asia bridge -->
<path d="M 230,80 L 248,76 L 256,86 L 252,96 L 240,98 L 230,92 Z"/>
<!-- Asia (main mass) -->
<path d="M 220,52 L 248,46 L 280,44 L 308,48 L 326,58 L 332,72 L 322,84 L 304,88 L 286,84 L 268,82 L 250,76 L 232,68 L 222,60 Z"/>
<!-- Southeast Asia islands -->
<path d="M 296,98 L 308,100 L 318,108 L 312,116 L 300,114 Z"/>
<!-- Australia -->
<path d="M 308,138 L 332,136 L 346,144 L 344,156 L 328,162 L 314,158 L 306,150 Z"/>
<!-- Japan -->
<path d="M 332,68 L 340,72 L 338,82 L 332,80 Z"/>
<!-- UK / Ireland -->
<path d="M 178,60 L 184,58 L 184,66 L 178,66 Z"/>
<!-- New Zealand -->
<path d="M 358,164 L 366,168 L 364,176 L 358,172 Z"/>
</g>
<!-- Audience cluster dots, anchored on real continents -->
<circle cx="78" cy="72" r="6" class="geo-dot" style="animation-delay: 0s"/> <!-- USA -->
<circle cx="200" cy="62" r="8" class="geo-dot" style="animation-delay: 0.3s"/> <!-- Europe -->
<circle cx="276" cy="62" r="5" class="geo-dot" style="animation-delay: 0.6s"/> <!-- China -->
<circle cx="334" cy="74" r="4" class="geo-dot" style="animation-delay: 0.9s"/> <!-- Japan -->
<circle cx="120" cy="146" r="5" class="geo-dot" style="animation-delay: 1.2s"/> <!-- Brazil -->
<circle cx="328" cy="148" r="4" class="geo-dot" style="animation-delay: 1.5s"/> <!-- Australia -->
</svg>
</div>
<div class="geo-stats">
<div class="geo-stat">
<div class="geo-stat-label">North America</div>
<div class="geo-stat-value">38%</div>
</div>
<div class="geo-stat">
<div class="geo-stat-label">Europe</div>
<div class="geo-stat-value">31%</div>
</div>
<div class="geo-stat">
<div class="geo-stat-label">Asia-Pacific</div>
<div class="geo-stat-value">22%</div>
</div>
<div class="geo-stat">
<div class="geo-stat-label">Other</div>
<div class="geo-stat-value">9%</div>
</div>
</div>
</div>
<!-- Top Post / Contributors -->
<div class="top-post-card" data-od-id="top-post">
<div id="post-section">
<div class="post-header-tag" id="post-tag">Click-through rate 5.8%</div>
<div class="post-meta">
<svg class="post-avatar" viewBox="0 0 64 64" aria-label="Open Design avatar">
<circle cx="32" cy="32" r="30" fill="#1c1c20" stroke="url(#brandRing)" stroke-width="2.5"/>
<path d="M22 22 L46 32 L26 36 L22 46 Z" fill="none" stroke="url(#brandRing)" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
<div class="post-handle-block">
<div class="post-handle">
@opendesignhq
<span class="verified-badge">✓</span>
</div>
<div class="post-timestamp">4h</div>
</div>
</div>
<div class="post-body" id="post-body">
Live artifacts just shipped. Paste a DESIGN.md, get a dashboard that actually ticks. Video below.
</div>
<div class="post-media" aria-label="Video thumbnail">
<svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="postMediaGlow" cx="50%" cy="50%" r="55%">
<stop offset="0%" stop-color="rgba(255,215,0,0.55)"/>
<stop offset="60%" stop-color="rgba(255,215,0,0.15)"/>
<stop offset="100%" stop-color="rgba(18,19,24,0)"/>
</radialGradient>
<linearGradient id="postMediaLine" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgba(189,244,255,0.0)"/>
<stop offset="50%" stop-color="rgba(189,244,255,0.65)"/>
<stop offset="100%" stop-color="rgba(255,215,0,0.95)"/>
</linearGradient>
</defs>
<rect width="320" height="180" fill="rgba(13,14,19,0.85)"/>
<circle cx="160" cy="92" r="80" fill="url(#postMediaGlow)"/>
<!-- Faint chart curve evoking the live dashboard inside the video -->
<path d="M 8,148 C 60,140 90,128 120,114 S 180,84 220,68 S 280,38 312,30"
fill="none" stroke="url(#postMediaLine)" stroke-width="2.5" stroke-linecap="round"/>
<!-- Three pulse dots along the curve, suggesting live data -->
<circle cx="120" cy="114" r="3.5" fill="rgba(189,244,255,0.9)"/>
<circle cx="220" cy="68" r="4" fill="rgba(255,215,0,0.95)"/>
<circle cx="312" cy="30" r="3.5" fill="rgba(255,215,0,0.9)"/>
<!-- Play icon centered -->
<g transform="translate(146,80)">
<circle cx="14" cy="14" r="14" fill="rgba(18,19,24,0.6)" stroke="rgba(255,215,0,0.9)" stroke-width="1.5"/>
<path d="M 11,8 L 11,20 L 21,14 Z" fill="rgba(255,215,0,0.95)"/>
</g>
</svg>
<span class="post-media-caption">Live · 0:22</span>
</div>
<div class="post-engagement" id="post-engagement">
<span>❤ <span id="post-likes">312</span></span>
<span>🔁 <span id="post-reposts">48</span></span>
<span>💬 <span id="post-comments">22</span></span>
</div>
</div>
<div id="contributors-section" style="display: none;">
<h3 class="section-title">Top Contributors</h3>
<div class="contributors-grid" id="contributors-grid"></div>
</div>
</div>
</div>
<!-- Lower Grid -->
<div class="lower-grid">
<!-- Trending -->
<div class="trending-card" data-od-id="trending">
<h3 class="section-title" id="trending-title">Trending in AI × Design</h3>
<div id="trending-list">
<div class="trending-row">
<div>
<span class="trending-name">design.md</span>
<span class="trending-count">142 posts</span>
</div>
<svg class="sparkline" viewBox="0 0 60 20">
<polyline points="0,15 10,12 20,14 30,10 40,8 50,5 60,3" fill="none" stroke="var(--primary)" stroke-width="2"/>
</svg>
</div>
<div class="trending-row">
<div>
<span class="trending-name">claude design</span>
<span class="trending-count">98 posts</span>
</div>
<svg class="sparkline" viewBox="0 0 60 20">
<polyline points="0,18 10,16 20,14 30,12 40,9 50,7 60,4" fill="none" stroke="var(--primary)" stroke-width="2"/>
</svg>
</div>
<div class="trending-row">
<div>
<span class="trending-name">live artifacts</span>
<span class="trending-count">87 posts</span>
</div>
<svg class="sparkline" viewBox="0 0 60 20">
<polyline points="0,16 10,15 20,13 30,11 40,10 50,6 60,2" fill="none" stroke="var(--primary)" stroke-width="2"/>
</svg>
</div>
<div class="trending-row">
<div>
<span class="trending-name">vibecoding</span>
<span class="trending-count">72 posts</span>
</div>
<svg class="sparkline" viewBox="0 0 60 20">
<polyline points="0,17 10,16 20,15 30,13 40,11 50,8 60,5" fill="none" stroke="var(--primary)" stroke-width="2"/>
</svg>
</div>
<div class="trending-row">
<div>
<span class="trending-name">agent os</span>
<span class="trending-count">64 posts</span>
</div>
<svg class="sparkline" viewBox="0 0 60 20">
<polyline points="0,18 10,17 20,16 30,14 40,12 50,10 60,7" fill="none" stroke="var(--primary)" stroke-width="2"/>
</svg>
</div>
<div class="trending-row">
<div>
<span class="trending-name">dogfooding</span>
<span class="trending-count">58 posts</span>
</div>
<svg class="sparkline" viewBox="0 0 60 20">
<polyline points="0,19 10,18 20,17 30,15 40,14 50,11 60,8" fill="none" stroke="var(--primary)" stroke-width="2"/>
</svg>
</div>
</div>
</div>
<!-- Top Comments -->
<div class="comments-card" data-od-id="top-comments">
<h3 class="section-title" id="comments-title">Top Comments · This Week</h3>
<div id="comments-list">
<div class="comment-item">
<div class="comment-meta">
<div class="comment-avatar">JD</div>
<span class="comment-handle">@designerjames</span>
<span class="verified-badge">✓</span>
<span class="comment-time">2d</span>
</div>
<div class="comment-body">This is insane. The annotation dots on the chart especially — that's the level of craft I want from design tools.</div>
<div class="comment-engagement">❤ 87 · 💬 12</div>
</div>
<div class="comment-item">
<div class="comment-meta">
<div class="comment-avatar">SK</div>
<span class="comment-handle">@sarahkim_design</span>
<span class="comment-time">3d</span>
</div>
<div class="comment-body">Finally — a design system tool that doesn't feel like it was built by engineers for engineers. The glass aesthetic is 🔥</div>
<div class="comment-engagement">❤ 64 · 💬 8</div>
</div>
<div class="comment-item">
<div class="comment-meta">
<div class="comment-avatar">MC</div>
<span class="comment-handle">@mikecode</span>
<span class="verified-badge">✓</span>
<span class="comment-time">5d</span>
</div>
<div class="comment-body">Tried the live artifacts preview today. Went from DESIGN.md → working dashboard in 90 seconds. This changes everything.</div>
<div class="comment-engagement">❤ 112 · 💬 24</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Real GitHub contributors — only verified avatar IDs to avoid 404s
const githubContributors = [
{ login: "pftom", avatar: "https://avatars.githubusercontent.com/u/26423749?v=4", contributions: 26 },
{ login: "lefarcen", avatar: "https://avatars.githubusercontent.com/u/20859779?v=4", contributions: 18 },
{ login: "Sid-Qin", avatar: "https://avatars.githubusercontent.com/u/201593046?v=4", contributions: 17 },
{ login: "nettee", avatar: "https://avatars.githubusercontent.com/u/3953668?v=4", contributions: 10 },
{ login: "alchemistklk", avatar: "https://avatars.githubusercontent.com/u/56862773?v=4", contributions: 8 }
];
// Platform data
const platformData = {
x: {
heroHeadline: "Open Design shipped 9 posts on X this week.",
heroMeta: "Engagement up 0.6% vs. last week · Top thread reached 38K accounts",
heroCta: "New post →",
askPlaceholder: "Ask across your posts — 'top performing last week', 'comments from verified accounts'...",
kpis: [
{ label: "Followers", value: 14287, format: "int", delta: "+2.3%", footnote: "vs. 13,968 last week" },
{ label: "Engagement Rate", value: 4.8, format: "percent", delta: "+0.4%", footnote: "vs. 4.4% last week" },
{ label: "Likes (7D)", value: 1842, format: "int", delta: "+18%", footnote: "+280 vs. last week" },
{ label: "Reposts (7D)", value: 487, format: "int", delta: "+22%", footnote: "+88 vs. last week" }
],
chartTitle: "Follower Growth · 30D",
chartType: "smooth",
chartAnnotations: [
{ x: 180, y: 120, label: "Thread: live artifacts +412" },
{ x: 480, y: 60, label: "Launch week +1.1K" }
],
postTag: "Click-through rate 5.8%",
postBody: "Live artifacts just shipped. Paste a DESIGN.md, get a dashboard that actually ticks. Video below.",
postEngagement: { likes: 312, reposts: 48, comments: 22 },
trendingTitle: "Trending in AI × Design",
commentsTitle: "Top Comments · This Week"
},
github: {
heroHeadline: "Open Design hit 30K stars on GitHub — 9 days in.",
heroMeta: "Explosive growth: 3 days → 10K, 9 days → 30K · 127 contributors total",
heroCta: "New release →",
askPlaceholder: "Ask across your repo — 'stale PRs', 'issues tagged good-first-issue'...",
kpis: [
{ label: "Stars", value: 30124, format: "int", delta: "+3,284%", footnote: "9 days since launch" },
{ label: "Forks", value: 2847, format: "int", delta: "+412%", footnote: "vs. 556 at day 3" },
{ label: "Pull Requests (7D)", value: 38, format: "int", delta: "+156%", footnote: "18 merged this week" },
{ label: "Contributors", value: 127, format: "int", delta: "+217%", footnote: "vs. 40 at day 3" }
],
chartTitle: "Star Growth · Explosive Trajectory (9D)",
chartType: "explosive",
chartAnnotations: [
{ x: 180, y: 180, label: "Day 3 · 10K stars" },
{ x: 540, y: 20, label: "Day 9 · 30K stars" }
],
postTag: "127 contributors · 30K stars",
postBody: "From 0 → 30K stars in 9 days. This is the fastest-growing design tool in GitHub history.",
postEngagement: { likes: 842, reposts: 217, comments: 94 },
trendingTitle: "Top Issues & Discussions",
commentsTitle: "Top Issue Replies · This Week"
}
};
let activePlatform = 'x';
let chartBaseData = [];
// Generate chart data based on platform
function generateChartData(platform) {
if (platform === 'x') {
// Smooth follower growth
return Array.from({ length: 30 }, (_, i) => ({
x: i * 20,
y: 200 - (i * 4) + Math.sin(i / 3) * 20
}));
} else {
// Explosive GitHub star growth (9 days, steep curve)
return [
{ x: 0, y: 250 }, // Day 0
{ x: 60, y: 240 }, // Day 1
{ x: 120, y: 220 }, // Day 2
{ x: 180, y: 180 }, // Day 3: 10K milestone
{ x: 240, y: 140 }, // Day 4
{ x: 300, y: 110 }, // Day 5
{ x: 360, y: 80 }, // Day 6
{ x: 420, y: 60 }, // Day 7
{ x: 480, y: 40 }, // Day 8
{ x: 540, y: 20 } // Day 9: 30K milestone
];
}
}
// Initialize chart
function renderChart() {
const svg = document.getElementById('chart-svg');
svg.innerHTML = '';
const data = platformData[activePlatform];
chartBaseData = generateChartData(activePlatform);
// Background grid
for (let i = 0; i <= 5; i++) {
const y = i * 56;
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', '0');
line.setAttribute('y1', y);
line.setAttribute('x2', '600');
line.setAttribute('y2', y);
line.setAttribute('stroke', 'var(--outline-variant)');
line.setAttribute('stroke-width', '0.5');
line.setAttribute('opacity', '0.3');
svg.appendChild(line);
}
// Area fill
const areaPoints = chartBaseData.map(d => `${d.x},${d.y}`).join(' ');
const area = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
area.setAttribute('points', `0,280 ${areaPoints} 600,280`);
area.setAttribute('fill', 'rgba(255, 215, 0, 0.12)');
svg.appendChild(area);
// Line
const linePoints = chartBaseData.map(d => `${d.x},${d.y}`).join(' ');
const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
line.setAttribute('points', linePoints);
line.setAttribute('fill', 'none');
line.setAttribute('stroke', 'var(--primary-container)');
line.setAttribute('stroke-width', activePlatform === 'github' ? '4' : '3');
line.setAttribute('filter', 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.4))');
line.id = 'chart-line';
svg.appendChild(line);
// Annotations — place label above the dot when there's room overhead,
// otherwise place it below so the text never collides with the curve.
data.chartAnnotations.forEach(ann => {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', ann.x);
circle.setAttribute('cy', ann.y);
circle.setAttribute('r', '7');
circle.setAttribute('fill', 'var(--primary-container)');
circle.setAttribute('stroke', 'var(--surface)');
circle.setAttribute('stroke-width', '3');
circle.setAttribute('filter', 'drop-shadow(0 0 12px rgba(255, 215, 0, 0.6))');
svg.appendChild(circle);
// Anchor near edges so the label doesn't get cropped on the right side.
const anchor = ann.x > 540 ? 'end' : (ann.x < 60 ? 'start' : 'middle');
// Below the dot when the dot is too high to leave label room.
const placeBelow = ann.y < 40;
const labelY = placeBelow ? ann.y + 22 : ann.y - 14;
// Soft pill background behind the text so it stays legible across the
// gold gradient + chart line, without using a heavy rect.
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', ann.x);
text.setAttribute('y', labelY);
text.setAttribute('fill', 'var(--primary)');
text.setAttribute('font-size', '12');
text.setAttribute('font-family', 'var(--font-display)');
text.setAttribute('font-weight', '600');
text.setAttribute('text-anchor', anchor);
text.setAttribute('paint-order', 'stroke');
text.setAttribute('stroke', 'rgba(18, 19, 24, 0.85)');
text.setAttribute('stroke-width', '4');
text.setAttribute('stroke-linejoin', 'round');
text.setAttribute('filter', 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.35))');
text.textContent = ann.label;
svg.appendChild(text);
});
}
// Render contributors
function renderContributors() {
const grid = document.getElementById('contributors-grid');
grid.innerHTML = '';
githubContributors.forEach(contributor => {
const item = document.createElement('div');
item.className = 'contributor-item';
item.innerHTML = `
<img src="${contributor.avatar}" alt="${contributor.login}" class="contributor-avatar"
onerror="this.style.display='none'; this.nextElementSibling.style.fontWeight='600';">
<div class="contributor-name">${contributor.login}</div>
<div class="contributor-commits">${contributor.contributions} commits</div>
`;
grid.appendChild(item);
});
}
// Switch platform
function switchPlatform(platform) {
activePlatform = platform;
const data = platformData[platform];
// Update hero
document.getElementById('hero-headline').textContent = data.heroHeadline;
document.getElementById('hero-meta').textContent = data.heroMeta;
document.getElementById('hero-cta').textContent = data.heroCta;
// Update ask bar
document.getElementById('ask-input').placeholder = data.askPlaceholder;
// Update KPIs
data.kpis.forEach((kpi, i) => {
document.getElementById(`kpi-${i + 1}-label`).textContent = kpi.label;
document.getElementById(`kpi-${i + 1}-value`).textContent = formatKpi(kpi);
document.getElementById(`kpi-${i + 1}-delta`).textContent = kpi.delta;
document.getElementById(`kpi-${i + 1}-footnote`).textContent = kpi.footnote;
});
// Update chart
document.getElementById('chart-title').textContent = data.chartTitle;
renderChart();
// Toggle between post and contributors
if (platform === 'github') {
document.getElementById('post-section').style.display = 'none';
document.getElementById('contributors-section').style.display = 'block';
renderContributors();
} else {
document.getElementById('post-section').style.display = 'block';
document.getElementById('contributors-section').style.display = 'none';
}
// Update top post/stats
document.getElementById('post-tag').textContent = data.postTag;
document.getElementById('post-body').textContent = data.postBody;
document.getElementById('post-likes').textContent = data.postEngagement.likes;
document.getElementById('post-reposts').textContent = data.postEngagement.reposts;
document.getElementById('post-comments').textContent = data.postEngagement.comments;
// Update section titles
document.getElementById('trending-title').textContent = data.trendingTitle;
document.getElementById('comments-title').textContent = data.commentsTitle;
// Update active states
document.querySelectorAll('.platform-pill').forEach(pill => {
pill.classList.toggle('active', pill.dataset.platform === platform);
});
document.querySelectorAll('.platform-card').forEach(card => {
card.classList.toggle('active', card.dataset.platformCard === platform);
});
}
// Format a KPI value for display, based on its `format` flag.
function formatKpi(kpi) {
if (kpi.format === 'percent') return kpi.value.toFixed(2) + '%';
if (typeof kpi.value === 'number') return kpi.value.toLocaleString();
return String(kpi.value);
}
// Live updates — every 2 seconds, nudge each numeric KPI by a small,
// realistic delta. Counters tick up; the engagement rate jitters by a
// fraction of a percent so it visibly breathes without drifting absurdly.
function animateNumbers() {
const data = platformData[activePlatform];
data.kpis.forEach((kpi, i) => {
const valueEl = document.getElementById(`kpi-${i + 1}-value`);
if (kpi.format === 'percent') {
// Random walk in ±0.04% range, clamped to a believable band.
kpi.value += (Math.random() - 0.5) * 0.08;
kpi.value = Math.max(3.5, Math.min(6.0, kpi.value));
valueEl.textContent = formatKpi(kpi);
} else if (typeof kpi.value === 'number') {
const delta = Math.floor(Math.random() * (activePlatform === 'github' ? 8 : 3)) + 1;
kpi.value += delta;
valueEl.textContent = formatKpi(kpi);
}
});
// Update post engagement
const postData = data.postEngagement;
postData.likes += Math.floor(Math.random() * (activePlatform === 'github' ? 4 : 2));
postData.reposts += Math.random() > 0.7 ? 1 : 0;
postData.comments += Math.random() > 0.8 ? 1 : 0;
document.getElementById('post-likes').textContent = postData.likes;
document.getElementById('post-reposts').textContent = postData.reposts;
document.getElementById('post-comments').textContent = postData.comments;
// Breathe the chart
if (activePlatform === 'x') {
const lastPoint = chartBaseData[chartBaseData.length - 1];
lastPoint.y += (Math.random() - 0.5) * 4;
lastPoint.y = Math.max(40, Math.min(200, lastPoint.y));
const linePoints = chartBaseData.map(d => `${d.x},${d.y}`).join(' ');
const line = document.getElementById('chart-line');
if (line) {
line.setAttribute('points', linePoints);
}
}
}
// Event listeners
document.querySelectorAll('.platform-pill').forEach(pill => {
pill.addEventListener('click', () => switchPlatform(pill.dataset.platform));
});
document.querySelectorAll('.platform-card').forEach(card => {
card.addEventListener('click', () => switchPlatform(card.dataset.platformCard));
});
// Initialize
renderChart();
setInterval(animateNumbers, 2000);
</script>
</body>
</html>
Related skills
Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k
Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k
CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k
Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k
Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72
Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10AI & Agent Buildingagents