social-media-matrix-tracker-template

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

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.

先阅读当前的
```
DESIGN.md
```
，将标记映射为CSS variables，然后适配
```
assets/template.html
```
。
保留完整的结构化信息架构：标题区 + 平台矩阵 + KPI条 + 多图表深度分析区。
确保交互保真度：
- 明暗主题切换
- 图表悬停提示框（自动在视口内显示）
- 点击固定图表数据点
- 拖拽区间分析
- Shift+拖拽多范围对比
- 洞察面板随所有图表（折线图/堆叠图/环形图/地理图）实时更新
- 折线图支持触摸+键盘方向键操作（无障碍设计）
确保模板为独立文件（内嵌CSS/JS的单一HTML，无框架依赖）。
保持默认示例数据真实且在所有卡片/图表间逻辑一致。
在输出成品前，用
```
references/checklist.md
```
进行验证。

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.

assets/template.html

附带手工调整的示例数组。替换真实数据时，请遵循以下规则以确保图表和洞察内容连贯：

一次性替换整个数组，而非单个索引——折线图要求
```
values[]
```
和
```
xLabels[]
```
长度相同且索引对齐。
匹配现有单位+小数位数：
```
hourChart
```
（互动量 /
```
decimals: 0
```
）、
```
slaChart
```
（分钟 /
```
decimals: 0
```
）、
```
roiChart
```
（倍数x /
```
decimals: 1
```
）、
```
cohortChart
```
（百分比 /
```
decimals: 0
```
）。单位不匹配会破坏提示框和A/B洞察文案。
保持四个折线系列长度相同（默认7个数据点）。长度不同会影响A/B对比功能，该功能要求索引共享。
对于
```
mixChart
```
，每个
```
bars[i].stack
```
必须保持为3元素数组（
```
[Video, Thread, Carousel]
```
）。对于
```
sentimentChart
```
，
```
arcs[]
```
的百分比总和应为100。
同步更新KPI条和平台卡片指标——成品的「实时概览」洞察数据来源于这些数值。
单数据点数据集会被处理（显示为带标签的点）但会降低用户体验；适配时每个图表最好保留≥3个数据点。

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>

在成品前输出一句简短说明（例如："电影级社交媒体矩阵追踪器——默认深色主题，所有交互功能可用。"），然后输出一个独立的HTML成品。

成品必须使用如下所示的
```
<artifact>
```
包裹——后台解析器依赖该包裹元素。
```
identifier="social-media-matrix-tracker"
```
为标准ID（请勿添加项目名称后缀）。
```
type="text/html"
```
和
```
title
```
为必填项。
仅允许内嵌CSS + JS。无外部框架/CDN。除
```
template.html
```
已声明的内容外，禁止导入外部字体。
最终文档为适配后的
```
template.html
```
（已应用DESIGN.md标记），而非原样复制或单独的
```
index.html
```
。请勿同时输出两者。

xml

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