Agent skill · design visual · nexu-io
social-media-matrix-tracker-template
社媒矩阵数据追踪面板模板（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.
Why this skill is useful
Provides a specialized template for creating a cinematic social media analytics dashboard with specific interactive features and design requirements.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Social Media Matrix Tracker Template Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions. Resource map 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/social-media-matrix-tracker-template