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