social-media-matrix-tracker-template skill
社媒矩阵数据追踪面板模板（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 theme switching in a single HTML artifact.
A100/100content scan
Is the social-media-matrix-tracker-template skill safe?
Clean: nothing in its files matched our rules. We read 4 files in the folder on 2026-09-28.
No findings.
Install the social-media-matrix-tracker-template skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design mkdir -p ~/.claude/skills cp -r /tmp/open-design/design-templates/social-media-matrix-tracker-template ~/.claude/skills/social-media-matrix-tracker-template
available in every project
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
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.htmlWorkflow
- 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 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>More skills from nexu-io/open-design
- Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
- Acard-twitterTwitter quote or data card designed to pair with a post.
- Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
- Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.