New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Social Media Matrix Tracker

Free

Create a cinematic social media analytics dashboard.

by nexu-io84.9k stars on nexu-io/open-design
2 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Social Media Matrix Tracker does

The Social Media Matrix Tracker Template is designed for developers and designers looking to create a sophisticated and visually appealing social media analytics dashboard. This template provides a structured approach to displaying multi-platform metrics in an engaging way, featuring interactive charts and a user-friendly interface. Users can easily switch between dark and light themes, making it adaptable to various user preferences.

The template is self-contained, meaning it includes all necessary CSS and JavaScript inline, allowing for straightforward deployment without external dependencies. This makes it particularly useful for projects where simplicity and portability are key. The design emphasizes data density, ensuring that users can access a wealth of information at a glance, while still maintaining a clean and cinematic aesthetic.

To adapt the template for real-world use, users must follow specific guidelines for data integration to ensure that the charts and insights remain coherent. This includes using whole arrays for data replacement and maintaining consistent units across different metrics. The template also supports various interactive features, such as hover tooltips and drag-to-analyze capabilities, which enhance user engagement and data exploration.

Overall, this skill is ideal for anyone needing a robust social media analytics solution that prioritizes both functionality and visual appeal. Whether for internal reporting or client presentations, the Social Media Matrix Tracker Template provides a comprehensive tool for visualizing social media performance metrics effectively.

When to use it

Use this template when you need to present multi-platform social media metrics in a visually appealing format.

When not to use it

Avoid this skill for basic dashboards or when you require extensive customization beyond the provided template structure.

What you can build with it

Client Reporting

Use the Social Media Matrix Tracker to create visually appealing reports for clients, showcasing their social media performance in a clear and engaging manner.

Internal Analytics Review

Deploy this template for internal team meetings to review social media metrics and drive data-driven discussions.

Marketing Campaign Analysis

Leverage the tracker to analyze the effectiveness of social media campaigns, comparing performance across different platforms.

How to install Social Media Matrix Tracker

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/social-media-matrix-tracker-template --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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

  1. Read active DESIGN.md first, map tokens to CSS variables, then adapt assets/template.html.
  2. Keep the structural information architecture intact: hero + platform matrix + KPI strip + multi-chart deep sections.
  3. 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)
  4. Ensure template remains self-contained (single HTML with inline CSS/JS, no framework dependency).
  5. Keep default sample data realistic and internally consistent across cards/charts.
  6. 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>

Frequently asked questions about Social Media Matrix Tracker

Similar skills

D3.js Visualisation

Create interactive and custom data visualisations with D3.js.

LeRobot Visualizer

Easily visualize and inspect LeRobot datasets in your browser.

Social Media Dashboard

Create a streamlined analytics dashboard for social media.

Seaborn Statistical Visualization

Create attractive statistical graphics with minimal code.

Scientific Visualization

Create publication-ready scientific figures with integrity.

Matplotlib

Create highly customizable plots for scientific visualization.