social-media-matrix-tracker-template

Original：🇺🇸 English

Translated

社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.

2installs

Sourcenexu-io/open-design

Added on2026-05-11

NPX Install

npx skill4agent add nexu-io/open-design social-media-matrix-tracker-template

SKILL.md Content

View Translation Comparison →

Social Media Matrix Tracker Template

Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions.

Resource map

text

social-media-matrix-tracker-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

Read active
```
DESIGN.md
```
first, map tokens to CSS variables, then adapt
```
assets/template.html
```
.
Keep the structural information architecture intact: hero + platform matrix + KPI strip + multi-chart deep sections.
Preserve interaction fidelity:
- dark/light theme toggle
- hover tooltip on charts (auto-clamps inside viewport)
- click-to-pin chart point
- drag interval analysis
- Shift+drag multi-range compare
- insights panel live updates on every chart (line / stack / donut / geo)
- touch + keyboard arrow-key support for line charts (a11y)
Ensure template remains self-contained (single HTML with inline CSS/JS, no framework dependency).
Keep default sample data realistic and internally consistent across cards/charts.
Validate with
```
references/checklist.md
```
before emitting the artifact.

Adapting the sample data safely

assets/template.html

ships with hand-tuned sample arrays. When swapping in real data, follow this contract so charts and insights stay coherent:

Replace whole arrays at once, not individual indices — line charts assume
```
values[]
```
and
```
xLabels[]
```
are the same length and aligned by index.
Match the existing unit + decimals:
```
hourChart
```
(engagements /
```
decimals: 0
```
),
```
slaChart
```
(minutes /
```
decimals: 0
```
),
```
roiChart
```
(multiplier x /
```
decimals: 1
```
),
```
cohortChart
```
(% /
```
decimals: 0
```
). Mismatched units break tooltip + A/B insight copy.
Keep all four line series the same length (default 7 points). Different lengths leak into the A/B compare which expects shared indices.
For
```
mixChart
```
, every
```
bars[i].stack
```
must remain a 3-element array (
```
[Video, Thread, Carousel]
```
). For
```
sentimentChart
```
,
```
arcs[]
```
percentages should sum to 100.
Update KPI strip + platform card metrics in lock-step — the artifact's "Live overview" insight derives from the same numbers.
Single-data-point datasets are guarded (drawn as a labelled dot) but degrade UX; prefer ≥ 3 points per chart when adapting.

Output contract

Emit one short sentence before the artifact (e.g. "Cinematic social media matrix tracker — dark theme by default, all interactions live.") and then a single self-contained HTML artifact.

The artifact must use the
```
<artifact>
```
wrapper exactly as shown below — the daemon parser keys on the wrapper element.
```
identifier="social-media-matrix-tracker"
```
is the canonical id (don't suffix with project name).
```
type="text/html"
```
and
```
title
```
are required.
Inline CSS + JS only. No external framework / CDN. No external font imports beyond what
```
template.html
```
already declares.
The final document is the adapted
```
template.html
```
(with DESIGN.md tokens applied), not a verbatim copy and not a separate
```
index.html
```
. Do not emit both.

xml

<artifact identifier="social-media-matrix-tracker" type="text/html" title="Social Media Matrix Tracker">
<!doctype html>
<html>...</html>
</artifact>