社媒矩阵数据追踪面板模板(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.
Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions.
social-media-matrix-tracker-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
DESIGN.md first, map tokens to CSS variables, then adapt assets/template.html.references/checklist.md before emitting the artifact.assets/template.html ships with hand-tuned sample arrays. When swapping in real data, follow this contract so charts and insights stay coherent:
values[] and xLabels[] are the same length and aligned by index.hourChart (engagements / decimals: 0), slaChart (minutes / decimals: 0), roiChart (multiplier x / decimals: 1), cohortChart (% / decimals: 0). Mismatched units break tooltip + A/B insight copy.mixChart, every bars[i].stack must remain a 3-element array ([Video, Thread, Carousel]). For sentimentChart, arcs[] percentages should sum to 100.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.
<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.template.html already declares.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>
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/social-media-matrix-tracker-template · pinned to the source commit
# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/social-media-matrix-tracker-template" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/social-media-matrix-tracker-template" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/social-media-matrix-tracker-template
Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.