What is the Social media matrix tracker template agent skill?

Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions. It stands out by giving social content a defined shape, so the agent asks for better context and returns a more usable result.

What inputs does Social media matrix tracker template need?

Context for social content: your goals, audience, constraints, and any source material the skill asks for.

What does Social media matrix tracker template output?

A ready-to-use result for social content: the analysis, copy, or recommendations the agent produces.

Social media matrix tracker template

Quick answer

01What is it?: Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions. It stands out by giving social content a defined shape, so the agent asks for better context and returns a more usable result.
02Inputs: Context for social content: your goals, audience, constraints, and any source material the skill asks for.
03Output: A ready-to-use result for social content: the analysis, copy, or recommendations the agent produces.

Add this skill

Install-only

Install as a package

Installs this one skill package for your coding agent, including any supporting files that skill ships with — not every skill in the repository. Read the tutorial.

Terminal

$ npx skills add nexu-io/open-design --skill social-media-matrix-tracker-template

Skill instructions

The instruction file for this skill. The skill also includes other files you need to install to use it.

SKILL.md

Preview only — coding agent install

Social Media Matrix Tracker Template

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

Resource map

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.

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

Supporting file: references/checklist.md

Checklist

P0

assets/template.html exists and opens directly from disk.
example.html is complete, hand-built, and uses realistic social analytics labels/values.
Skill frontmatter uses od.mode: template and od.scenario: live-artifacts.
Template supports dark/light switching without broken contrast.
Core charts expose hover tooltip with explicit dimension + value.
Line charts support pin point + drag range statistics.
Shift+drag saves multiple ranges and updates A/B comparison insight.
Insights panel updates on hover, pin, and range interactions.

P1

Mobile fallback stacks grids under 1260px.
All sections render without external JS/CSS frameworks.
Data narratives are consistent (platform cards, KPI row, and charts do not conflict).
Visual style remains cinematic and glassmorphic while keeping readability.

P2

Tooltip avoids edge clipping in common viewport sizes.
3D/parallax and glow effects are subtle enough to avoid motion fatigue.
Chart redraw after theme switch keeps interactions functional.

Common questions

How do I install Social media matrix tracker template in Cursor, Claude Code, or Codex?

Run npx skills add nexu-io/open-design --skill social-media-matrix-tracker-template in the project where you want it, then ask your agent for the skill by name. The --skill flag installs only Social media matrix tracker template, not every skill in the repository.

Where does Social media matrix tracker template come from and what license is it under?

Social media matrix tracker template comes from the nexu-io/open-design repository on GitHub. That repository has 73.7K GitHub stars. The skill is published under the Apache-2.0 license.

Prefer plain text? Read the Social media matrix tracker template guide as markdown.