{"id":"34104161-35df-4980-80cb-3ad481a84751","shortId":"jtcfLJ","kind":"skill","title":"social-media-matrix-tracker-template","tagline":"社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。\nUse when users ask for a cinematic, data-dense social media analytics dashboard\nwith multi-platform metrics, interactive charts, hover insights, range compare,\nand dark/light theme switching in a single HTML artifact.","description":"# Social Media Matrix Tracker Template\n\nShip a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions.\n\n## Resource map\n\n```text\nsocial-media-matrix-tracker-template/\n├── SKILL.md\n├── assets/\n│ └── template.html\n├── references/\n│ └── checklist.md\n└── example.html\n```\n\n## Workflow\n\n1. Read active `DESIGN.md` first, map tokens to CSS variables, then adapt `assets/template.html`.\n2. Keep the structural information architecture intact: hero + platform matrix + KPI strip + multi-chart deep sections.\n3. Preserve interaction fidelity:\n - dark/light theme toggle\n - hover tooltip on charts (auto-clamps inside viewport)\n - click-to-pin chart point\n - drag interval analysis\n - Shift+drag multi-range compare\n - insights panel live updates on every chart (line / stack / donut / geo)\n - touch + keyboard arrow-key support for line charts (a11y)\n4. Ensure template remains self-contained (single HTML with inline CSS/JS, no framework dependency).\n5. Keep default sample data realistic and internally consistent across cards/charts.\n6. Validate with `references/checklist.md` before emitting the artifact.\n\n### Adapting the sample data safely\n\n`assets/template.html` ships with hand-tuned sample arrays. When swapping in real data, follow this contract so charts and insights stay coherent:\n\n- Replace **whole arrays at once**, not individual indices — line charts assume `values[]` and `xLabels[]` are the same length and aligned by index.\n- 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.\n- Keep all four line series the **same length** (default 7 points). Different lengths leak into the A/B compare which expects shared indices.\n- For `mixChart`, every `bars[i].stack` must remain a 3-element array (`[Video, Thread, Carousel]`). For `sentimentChart`, `arcs[]` percentages should sum to 100.\n- Update KPI strip + platform card metrics in lock-step — the artifact's \"Live overview\" insight derives from the same numbers.\n- Single-data-point datasets are guarded (drawn as a labelled dot) but degrade UX; prefer ≥ 3 points per chart when adapting.\n\n## Output contract\n\nEmit 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.\n\n- The artifact **must** use the `` wrapper exactly as shown below — the daemon parser keys on the wrapper element.\n- `identifier=\"social-media-matrix-tracker\"` is the canonical id (don't suffix with project name).\n- `type=\"text/html\"` and `title` are required.\n- Inline CSS + JS only. No external framework / CDN. No external font imports beyond what `template.html` already declares.\n- 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.\n\n```xml\n\n\n...\n\n```","tags":["social","media","matrix","tracker","template","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-social-media-matrix-tracker-template","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/social-media-matrix-tracker-template","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (3,251 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:26.871Z","embedding":null,"createdAt":"2026-05-07T18:52:32.337Z","updatedAt":"2026-05-11T06:52:26.871Z","lastSeenAt":"2026-05-11T06:52:26.871Z","tsv":"'0':260,264,272 '1':87,269 '100':324 '2':100 '3':117,311,362 '4':169 '5':184 '6':195 '7':289 'a/b':277,296 'a11y':168 'across':193 'activ':89 'adapt':98,203,367,461 'align':249 'alreadi':454 'analysi':141 'analyt':24,58 'appli':466 'arc':319 'architectur':105 'array':215,232,313 'arrow':162 'arrow-key':161 'artifact':45,202,336,376,398,400 'ask':15 'asset':81 'assets/template.html':99,208 'assum':240 'auto':129 'auto-clamp':128 'bar':305 'beyond':451 'break':275 'canon':425 'card':329 'cards/charts':194 'carousel':316 'cdn':446 'chart':32,114,127,137,154,167,225,239,365 'checklist.md':84 'cinemat':18,54,378 'clamp':130 'click':134 'click-to-pin':133 'coher':229 'cohortchart':270 'compar':36,147,297 'consist':192 'contain':175,396 'contract':223,369 'copi':279,470 'css':95,440 'css/js':180 'daemon':410 'dark':383 'dark/light':38,121 'dashboard':25 'data':20,62,188,206,220,348 'data-dens':19 'dataset':350 'decim':256,259,263,268,271 'declar':455 'deep':115 'default':186,288,386 'degrad':359 'dens':21 'densiti':63 'depend':183 'deriv':341 'design.md':90,464 'differ':291 'document':458 'donut':157 'dot':357 'drag':139,143 'drawn':353 'e.g':377 'element':312,416 'emit':200,370,478 'engag':258 'ensur':170 'everi':153,304 'exact':405 'example.html':85 'exist':254 'expect':299 'extern':444,448 'fidel':120 'final':457 'first':91 'follow':221 'font':449 'four':282 'framework':182,445 'geo':158 'grade':67 'guard':352 'hand':212 'hand-tun':211 'hero':107 'high':61 'hourchart':257 'hover':33,124 'html':44,177,397 'id':426 'identifi':417 'import':450 'index':251 'index.html':475 'indic':237,301 'individu':236 'inform':104 'inlin':179,439 'insid':131 'insight':34,148,227,278,340 'intact':106 'interact':31,70,119,388 'intern':191 'interv':140 'js':441 'keep':101,185,280 'key':163,412 'keyboard':160 'kpi':110,326 'label':356 'leak':293 'length':247,287,292 'line':155,166,238,283 'live':150,338,389 'lock':333 'lock-step':332 'map':72,92 'match':252 'matrix':4,10,48,77,109,381,421 'media':3,9,23,47,57,76,380,420 'metric':30,330 'micro':69 'micro-interact':68 'minut':262 'mismatch':273 'mixchart':303 'multi':28,113,145 'multi-chart':112 'multi-platform':27 'multi-rang':144 'multipli':266 'must':308,401 'name':432 'number':345 'one':371 'output':368 'overview':339 'panel':149 'parser':411 'per':364 'percentag':320 'pin':136 'platform':29,108,328 'point':138,290,349,363 'prefer':361 'premium':53 'preserv':118 'product':66 'production-grad':65 'project':431 'rang':35,146 'read':88 'real':219 'realist':189 'refer':83 'references/checklist.md':198 'remain':172,309 'replac':230 'requir':438 'resourc':71 'roichart':265 'safe':207 'sampl':187,205,214 'section':116 'self':174,395 'self-contain':173,394 'sentenc':373 'sentimentchart':318 'separ':474 'seri':284 'share':300 'shift':142 'ship':51,209 'short':372 'shown':407 'singl':43,176,347,393 'single-data-point':346 'skill' 'skill-social-media-matrix-tracker-template' 'skill.md':80 'slachart':261 'social':2,8,22,46,56,75,379,419 'social-media':55 'social-media-matrix-track':418 'social-media-matrix-tracker-templ':1,74 'source-nexu-io' 'stack':156,307 'stay':228 'step':334 'strip':111,327 'structur':103 'suffix':429 'sum':322 'support':164 'swap':217 'switch':40 'templat':6,50,59,79,171 'template.html':82,453,462 'text':73 'text/html':434 'theme':39,122,384 'thread':315 'titl':436 'toggl':123 'token':93,465 'tooltip':125,276 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'touch':159 'tracker':5,11,49,78,382,422 'tune':213 'type':433 'unit':255,274 'updat':151,325 'use':12,402 'user':14 'ux':360 'valid':196 'valu':241 'variabl':96 'verbatim':469 'video':314 'viewport':132 'whole':231 'workflow':86 'wrapper':404,415 'x':267 'xlabel':243 'xml':480 '社媒矩阵数据追踪面板模板':7","prices":[{"id":"eb5a54ac-2660-4df1-ae87-09c480482c7f","listingId":"34104161-35df-4980-80cb-3ad481a84751","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-07T18:52:32.337Z"}],"sources":[{"listingId":"34104161-35df-4980-80cb-3ad481a84751","source":"github","sourceId":"nexu-io/open-design/social-media-matrix-tracker-template","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/social-media-matrix-tracker-template","isPrimary":false,"firstSeenAt":"2026-05-07T18:52:32.337Z","lastSeenAt":"2026-05-11T06:52:26.871Z"}],"details":{"listingId":"34104161-35df-4980-80cb-3ad481a84751","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"social-media-matrix-tracker-template","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"d4559f1fdfe5dc9ef94ccb188c71a62284cfba53","skill_md_path":"skills/social-media-matrix-tracker-template/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/social-media-matrix-tracker-template"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"social-media-matrix-tracker-template","description":"社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。\nUse when users ask for a cinematic, data-dense social media analytics dashboard\nwith multi-platform metrics, interactive charts, hover insights, range compare,\nand dark/light theme switching in a single HTML artifact."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/social-media-matrix-tracker-template"},"updatedAt":"2026-05-11T06:52:26.871Z"}}