Guide · Agent skill
How to use the Social Media Matrix Tracker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Social Media Matrix Tracker is an agent skill, a folder of instructions that an AI agent loads so it can do a specific job. This one teaches the agent to build a self-contained HTML dashboard that shows social media performance across several platforms, using KPI cards, multi-chart sections and interactive charts. This guide explains what the skill does, how to install it, how to ask for the dashboard in plain language, and where its limits are.
Social Media Matrix Trackernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from the page where you found this guide.
- 2Install the skill. Unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Add your design notes (optional). Place a DESIGN.md file in your project if you want your own design tokens applied to the page.
- 4Ask for the dashboard. Describe the social media analytics dashboard you want, including the platforms, the style and the interactions.
- 5Open the HTML file. Open the single HTML file the agent produces in a browser; no server or framework is needed.
- 6Test the interactions. Hover, pin, drag and use Shift+drag on the charts, and toggle the theme, then check the results against the checklist.
What the skill makes the agent do
The skill produces one HTML file that you can open in a browser. The page includes a hero section, a platform matrix, a KPI strip and several chart sections. The charts support hover tooltips, click-to-pin points, drag-based range selection, Shift+drag comparison of multiple ranges, and a dark/light theme toggle. No external frameworks are needed.
Before filling the page, the agent applies your design system notes from a DESIGN.md file to the styling. It then fills the page with realistic sample numbers. The skill's own description states that the numbers are placeholders.
- Output: one self-contained HTML file with inline CSS and JavaScript
- Styling: taken from your DESIGN.md if you provide one
- Data: hand-tuned sample numbers only, with no live connection to any platform
Install the skill (ZIP download or Claude apps upload)
Download the skill ZIP from the page where you found this guide. Then choose one of the two install routes below.
For a personal skill, unzip the download into ~/.claude/skills/. For a project-specific skill, unzip it into the .claude/skills/ folder inside your project. In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/
- Project only: unzip into .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Check what the skill needs before you start
The skill needs an AI agent that can write files, because it creates the HTML output using file writing. If you want your own colours, fonts and spacing, also provide a DESIGN.md file in your project.
The skill does not run scripts and does not use the network, according to its listing. It also does not connect to TikTok, Instagram or YouTube.
- Required: an agent with file writing capability (file_write)
- Optional: a DESIGN.md file for your design tokens
- Runs scripts: no
- Uses network: no
Ask for the dashboard with a natural request
You do not need a special command. Describe the dashboard you want and mention the platforms and the design system. The skill is triggered by requests about social media analytics dashboards, creator analytics templates and multi-platform dashboards. Requests in Chinese are also recognised, such as 新媒体数据看板 or 抖音数据看板.
A good request names the output and the features you need. The example below is the prompt written in the skill's own example.
- Make a social media dashboard template for TikTok, Instagram and YouTube.
- Create a social media matrix tracker dashboard template using my DESIGN.md. Keep the cinematic glassmorphism style, multi-chart analytics sections, hover tooltips, pin/drag range analysis, and light/dark switching.
- Build a creator analytics template in one HTML file with a dark theme by default.
Use the interactive features of the output
Hover over a chart to see a tooltip with the dimension and value. Click a line chart point to pin it. Drag across a line chart to get range statistics. Hold Shift and drag to save several ranges and compare them. The insights panel updates as you hover, pin and select ranges. Arrow keys and touch input also work on line charts.
To replace the sample data, the skill's guidance is to swap whole data arrays at once rather than single values, keep line series the same length (7 points by default), and keep units and decimals consistent. Update the KPI strip and platform cards together so they do not contradict the charts.
- Hover: tooltip with dimension and value
- Click: pin a point on a line chart
- Drag: range statistics
- Shift + drag: multiple ranges and A/B comparison
- Arrow keys and touch: supported on line charts
- Theme: toggle between dark and light
Check the output before you use it
The skill ships a checklist in references/checklist.md. It lists items such as whether the file opens directly from disk, whether dark and light modes keep readable contrast, whether tooltips and insights update, and whether the mobile layout stacks grids below 1260px. Ask the agent to run through this checklist, or check these items yourself.
The skill's resource map also lists example.html, a hand-built sample page, and assets/template.html, the base template the agent adapts.
- Opens directly from disk in a browser
- Dark and light themes both remain readable
- Tooltips, pinning and range selection work
- Platform cards, KPI row and charts agree with each other
What people use it for
- Pitching a multi-platform reporting layout to a client using clearly labelled sample numbers
- Prototyping a data-dense dashboard look that follows an existing DESIGN.md design system
- Starting a front-end HTML template with interactive charts that a developer can later connect to real data
- Showing a social team how KPI cards, platform cards and charts can fit together on one page
Frequently asked questions
How do I install the social media matrix tracker skill?
Download the skill ZIP from the page, then unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ inside a project. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Is the Social Media Matrix Tracker skill free?
The skill is published under the Apache-2.0 licence, as stated on its listing. Check the licence text in the source repository for the full terms before you use or redistribute it.
Does the skill pull real TikTok, Instagram or YouTube analytics?
No. The skill only ships sample data and does not connect to any platform API, so it cannot report real performance. Do not present its numbers as real results in a report or pitch.
What does the agent need to run this skill?
It needs an AI agent that can write files (file_write). A DESIGN.md file is optional but needed if you want your own design tokens applied. The skill does not run scripts and does not use the network.
What if the agent does not use the skill or the output does not look right?
Check that the skill folder was unzipped into the correct location and that the agent can write files. Then ask for the dashboard again and name the features you need, such as hover tooltips and dark/light switching. Run the checklist in references/checklist.md to find what is missing.
How is this different from a live analytics dashboard?
This skill makes a visual template with sample data. A live analytics tool connects to platform data. You can use the template as a starting point and connect your own data later, but the skill itself does not do that.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a polished, interactive multi-platform dashboard mockup that follows your design system, or a front-end template you plan to connect to your own data later. Pick a different tool if you need real performance numbers from TikTok, Instagram or YouTube, or if the output might be mistaken for real results in a report.
Download the skill