Mmcp.market

social-media-dashboard skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.

A100/100content scan

Is the social-media-dashboard skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the social-media-dashboard 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-dashboard ~/.claude/skills/social-media-dashboard
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 Dashboard Skill

Produce a single-screen, creator-facing social media analytics dashboard.

Workflow

spacing, radii, and component styling all come from it. Do not invent new tokens; do not hard-code brand colors of the platforms — let the DESIGN.md carry the visual identity, and reference platforms only by name and monogram.

  1. Read the active DESIGN.md (injected above). Colors, typography,

X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform switcher to a single row, max 5 entries.

  1. Identify which platforms the brief calls out. Default to

Pick a creator persona (default: "AI / design indie creator") and derive consistent numbers across the page — e.g. follower counts on the switcher must match the KPI row when X is selected.

  1. Generate plausible data, never Metric A / Metric B placeholders.
  1. Lay out the page top-to-bottom:

dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a creator avatar block on the right.

  • Header bar: brand mark + section label ("ANALYTICS"), a

("You shipped 14 posts on X this week."), one supporting line of metadata, and two CTAs ("Export report", "New post →").

  • Hero strip: a one-sentence summary in display type

ghost-text suggestions ("top performing last week", "comments from verified accounts").

  • Ask bar: a single-line input styled as a search field, with

monogram, name, follower count, and a +X.XK this week delta. The active platform uses an elevated surface from DESIGN.md.

  • Platform switcher: 4 cards in one row, each with platform

Reposts (7D). Each card has a label (uppercase, label-md), a big value (display or headline-lg), a delta vs prior period, and a small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").

  • KPI row: 4 cards — Followers · Engagement Rate · Likes (7D) ·

chart with a soft area fill underneath, axis ticks at start / midpoint / end, and two labelled annotation dots ("Newsletter drop +842", "Viral thread +1.2K").

  • Main grid (2/3 + 1/3):
  • Left: Follower Growth · 30D — a full-width inline SVG line

post (avatar, handle, post body, optional 16:9 media block), with a header tag "click-through rate 5.6%" in the DS accent.

  • Right: Top Post · This Week — a card showing the rendered

topic name + post count + 24h delta sparkline (10 polyline points, no labels).

  • Lower grid (1/2 + 1/2):
  • Trending topics on this platform: 5–7 chip-style rows with

check if relevant), comment body (2 lines max, ellipsised), and a small ❤ 312 · 💬 18 row in muted text.

  • Top comments: 3 cards, each with avatar, handle (verified
  1. Write one self-contained HTML document:

header, hero, ask, platform-switcher, kpis, follower-growth, top-post, trending, top-comments.

  • <!doctype html> through , CSS in one inline block.
  • CSS Grid for page-level layout; Flexbox inside cards.
  • Semantic HTML: , , , .
  • Tag each logical region with data-od-id="slug" for comment mode:
  1. Charts: inline SVG only, no JS libraries.

fill for the area, two annotation dots with text labels.

  • Line chart: for the curve, a second with low-alpha

muted text. Accent appears at most three times on the page.

  • Sparklines: with 10 points, no axes, ~16px tall.
  • Use the DS accent for highlights and the DS on-surface-variant for
  1. Self-check:

rgba(token, alpha) for glass surfaces).

  • Every color resolves to a DESIGN.md token (or a documented

the active platform's KPI).

  • Numbers are internally consistent (switcher follower count matches

room and ambient glow on the active platform; clean / corporate DSes tighten gaps and drop the glow.

  • Header bar and hero strip are sticky; main content scrolls.
  • Density follows the DS mood: glass / cosmic DSes get more breathing

Output contract

Emit between tags:

<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

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.

All agent skills → · MCP servers