Back to browse

nexu-io/open-design

social-media-matrix-tracker-template

Use it for data analysis and marketing tasks; the detail page covers purpose, installation, and practical steps.

75Collecting
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/social-media-matrix-tracker-template"
Automated source guideData analysisStandard source

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Source-grounded data guide: social-media-matrix-tracker-template

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

npx skills add https://github.com/nexu-io/open-design --skill "design-templates/social-media-matrix-tracker-template"
Check the pinned source

The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.

434 source words · 4 usable sections

Best fit

  • 社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light t…

Analysis outputs

  • The artifact must use the 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.

Analysis workflow

Read social-media-matrix-tracker-template through these 4 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

01

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 - hov…

SKILL.md · 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:
02

Resource map

Review the “Resource map” section in the pinned source before continuing.

SKILL.md · Resource map
Review and apply the “Resource map” source section.
03

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:

SKILL.md · Adapting the sample data safely
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 ins…Keep all four line series the same length (default 7 points). Different lengths leak into the A/B compare which expects shared indices.
04

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.

SKILL.md · Output contract
The artifact must use the 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.

Analysis checklist

Verify each item before delivery

The source section “Workflow” has been checked.

The source section “Resource map” has been checked.

The source section “Adapting the sample data safely” has been checked.

The source section “Output contract” has been checked.

Source output checked: The artifact must use the wrapper exactly as shown below — the daemon parser keys on the wrapper element.

Source output checked: identifier="social-media-matrix-tracker" is the canonical id (don't suffix with project name).

Choose a different workflow

When another Skill is the better fit

social-publishing

Schedule and publish social media posts across 13 platforms (X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, Pinterest) via the SocialClaw API. Use when the user wants to publish, schedule, or manage social media content programmatically. Requires SOCIALCLAW_API_KEY.

A separate implementation from wshobson/agents; compare its source, maintenance signals, and permission requirements.

Open source detail

revops

When the user wants help with revenue operations, lead lifecycle management, or marketing-to-sales handoff processes. Also use when the user mentions 'RevOps,' 'revenue operations,' 'lead scoring,' 'lead routing,' 'MQL,' 'SQL,' 'pipeline stages,' 'deal desk,' 'CRM automation,' 'marketing-to-sales handoff,' 'data hygiene,' 'leads aren't getting to sales,' 'pipeline management,' 'lead qualification,' or 'when should marketing hand off to sales.' Use this for anything involving the systems and proc

A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.

Open source detail

social-media-dashboard

Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics li

A separate implementation from nexu-io/open-design; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the social-media-matrix-tracker-template source document cover?

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

How do I install social-media-matrix-tracker-template?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/social-media-matrix-tracker-template". Inspect the command and pinned source before running it.

Repository stars
82,073
Repository forks
9,485
Quality
75/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

75/100
Documentation24/30
Specificity14/25
Maintenance20/20
Trust signals17/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

social-publishing by wshobson

Schedule and publish social media posts across 13 platforms (X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, Pinterest) via the SocialClaw API. Use when the user wants to publish, schedule, or manage social media content programmatically. Requires SOCIALCLAW_API_KEY.

revops by coreyhaines31

When the user wants help with revenue operations, lead lifecycle management, or marketing-to-sales handoff processes. Also use when the user mentions 'RevOps,' 'revenue operations,' 'lead scoring,' 'lead routing,' 'MQL,' 'SQL,' 'pipeline stages,' 'deal desk,' 'CRM automation,' 'marketing-to-sales handoff,' 'data hygiene,' 'leads aren't getting to sales,' 'pipeline management,' 'lead qualification,' or 'when should marketing hand off to sales.' Use this for anything involving the systems and proc

social-media-dashboard by nexu-io

Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics li

dask by k-dense-ai

Distributed computing for larger-than-RAM pandas/NumPy workflows. Use when you need to scale existing pandas/NumPy code beyond memory or across clusters. Best for parallel file processing, distributed ML, integration with existing pandas code. For out-of-core analytics on single machine use vaex; for in-memory speed use polars.

neuropixels-analysis by k-dense-ai

Analyze Neuropixels extracellular recordings end-to-end with SpikeInterface. Covers loading SpikeGLX/Open Ephys/NWB data, preprocessing, drift/motion correction, Kilosort4 (and CPU) spike sorting, quality metrics, and unit curation (threshold-based, model-based UnitRefine, and AI-assisted visual review). Use when working with Neuropixels 1.0/2.0 recordings, spike sorting, or extracellular electrophysiology analysis.

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

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>
Skill path
design-templates/social-media-matrix-tracker-template/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected