New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Social Media Dashboard

Free

Create a streamlined analytics dashboard for social media.

by nexu-io84.9k stars on nexu-io/open-design
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Social Media Dashboard does

The Social Media Dashboard skill is designed to help creators visualize their social media performance in a single, cohesive HTML document. This tool allows users to generate a dashboard that includes key performance indicators (KPIs) for platforms such as X, LinkedIn, YouTube, and Instagram. With a focus on clarity and usability, the dashboard features a platform switcher, KPI cards, a follower growth chart, and a preview of the top post for the week. Each component is designed to provide immediate insights into social media metrics, making it easier for creators to track their performance and engagement.

This skill operates by reading from an active DESIGN.md file to ensure that the visual elements are consistent with the creator's brand identity. It generates plausible data based on a selected creator persona, ensuring that the metrics displayed are relevant and realistic. The layout is structured for easy navigation, with a sticky header and hero strip that provides quick access to key information, while the main content area is designed to be informative yet visually appealing.

The dashboard is built using semantic HTML and CSS Grid for layout, ensuring that it is both responsive and accessible. Inline SVG charts are used for data visualization, allowing for a clean and efficient representation of follower growth and trending topics. This skill is particularly useful for social media managers, content creators, and marketers who need to keep track of their social media performance across multiple platforms without the need for complex software or extensive coding knowledge.

Overall, the Social Media Dashboard skill is a practical solution for anyone looking to create a visually appealing and data-driven overview of their social media activities, helping them make informed decisions based on their analytics.

When to use it

Use this skill when you need to generate a social media dashboard for analytics that includes multiple platforms and key metrics.

When not to use it

This skill may not be suitable for users looking for advanced analytics features or integration with third-party tools, as it focuses on a standalone HTML output.

What you can build with it

Social Media Performance Review

Generate a dashboard to analyze your social media performance over the last month.

Content Strategy Planning

Use the dashboard to identify which posts performed best and inform your future content strategy.

Client Reporting

Create a visually appealing report for clients showcasing their social media metrics and growth.

How to install Social Media Dashboard

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/social-media-dashboard --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Social Media Dashboard Skill

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

Workflow

  1. Read the active DESIGN.md (injected above). Colors, typography, 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.
  2. Identify which platforms the brief calls out. Default to X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform switcher to a single row, max 5 entries.
  3. Generate plausible data, never Metric A / Metric B placeholders. 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.
  4. Lay out the page top-to-bottom:
    • Header bar: brand mark + section label ("ANALYTICS"), a dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a creator avatar block on the right.
    • Hero strip: a one-sentence summary in display type ("You shipped 14 posts on X this week."), one supporting line of metadata, and two CTAs ("Export report", "New post →").
    • Ask bar: a single-line input styled as a search field, with ghost-text suggestions ("top performing last week", "comments from verified accounts").
    • Platform switcher: 4 cards in one row, each with platform monogram, name, follower count, and a +X.XK this week delta. The active platform uses an elevated surface from DESIGN.md.
    • KPI row: 4 cards — Followers · Engagement Rate · Likes (7D) · 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").
    • Main grid (2/3 + 1/3):
      • Left: Follower Growth · 30D — a full-width inline SVG line 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").
      • Right: Top Post · This Week — a card showing the rendered post (avatar, handle, post body, optional 16:9 media block), with a header tag "click-through rate 5.6%" in the DS accent.
    • Lower grid (1/2 + 1/2):
      • Trending topics on this platform: 5–7 chip-style rows with topic name + post count + 24h delta sparkline (10 polyline points, no labels).
      • Top comments: 3 cards, each with avatar, handle (verified check if relevant), comment body (2 lines max, ellipsised), and a small ❤ 312 · 💬 18 row in muted text.
  5. Write one self-contained HTML document:
    • <!doctype html> through </html>, CSS in one inline <style> block.
    • CSS Grid for page-level layout; Flexbox inside cards.
    • Semantic HTML: <header>, <main>, <section>, <article>.
    • Tag each logical region with data-od-id="slug" for comment mode: header, hero, ask, platform-switcher, kpis, follower-growth, top-post, trending, top-comments.
  6. Charts: inline SVG only, no JS libraries.
    • Line chart: <path> for the curve, a second <path> with low-alpha fill for the area, two <circle> annotation dots with text labels.
    • Sparklines: <polyline> with 10 points, no axes, ~16px tall.
    • Use the DS accent for highlights and the DS on-surface-variant for muted text. Accent appears at most three times on the page.
  7. Self-check:
    • Every color resolves to a DESIGN.md token (or a documented rgba(token, alpha) for glass surfaces).
    • Numbers are internally consistent (switcher follower count matches the active platform's KPI).
    • Header bar and hero strip are sticky; main content scrolls.
    • Density follows the DS mood: glass / cosmic DSes get more breathing room and ambient glow on the active platform; clean / corporate DSes tighten gaps and drop the glow.

Output contract

Emit between <artifact> 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.

Frequently asked questions about Social Media Dashboard

Similar skills

D3.js Visualisation

Create interactive and custom data visualisations with D3.js.

LeRobot Visualizer

Easily visualize and inspect LeRobot datasets in your browser.

Seaborn Statistical Visualization

Create attractive statistical graphics with minimal code.

Scientific Visualization

Create publication-ready scientific figures with integrity.

Matplotlib

Create highly customizable plots for scientific visualization.

ETE Toolkit 4

Efficiently analyze and visualize phylogenetic trees.