Skip to content
Get packs

Social Media Matrix Tracker

Builds a single-file, interactive multi-platform social analytics dashboard in HTML.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches the agent to produce a polished, self-contained web page that shows social media performance across several platforms, with KPI cards, multi-chart sections, hover tooltips, click-to-pin points, range selection, and a dark/light theme toggle. The agent first applies your design system notes (DESIGN.md) to the page's styling, then fills it with realistic sample numbers. The result is one HTML file you can open in a browser, with no external frameworks needed.

Great for

  • Creators or social teams who want a visual mockup of a multi-platform analytics dashboard
  • Designers prototyping a data-dense dashboard look that follows an existing design system
  • Developers who need a starting HTML template with interactive charts they can later connect to real data

Skip it if

  • Pulling live numbers from TikTok, Instagram or YouTube: the skill only ships sample data and does not connect to any platform API, so it cannot report real performance.
  • Situations where the sample figures might be mistaken for real results in a report or pitch, since the data is hand-tuned placeholder content.

Try asking

  • “Create a social media matrix tracker dashboard template using my DESIGN.md with dark theme by default”
  • “Build a TikTok and Instagram analytics dashboard with hover tooltips and range comparison”
  • “Make a multi-platform creator dashboard in a single HTML file with light/dark switching”
Step-by-step guide: how to use Social Media Matrix TrackerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    social-media-matrix-tracker-template.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip social-media-matrix-tracker-template.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip social-media-matrix-tracker-template.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide your DESIGN.md first so colours and typography match your brand rather than the default styling.
  • When swapping in real data, replace whole data arrays at once and keep all line series the same length, as the skill's contract requires.
  • Open the generated HTML in a browser and test hover, click-to-pin, drag and keyboard controls before sharing it.

What's inside

  • references/checklist.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.