Skip to content

Social Media Dashboard

Generates a single-file creator analytics dashboard mockup for X, LinkedIn, YouTube and Instagram

Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent builds a one-page social media analytics dashboard as a single HTML file. It lays out platform tabs, follower and engagement numbers, a follower growth chart, a top post preview, trending topics and top comments, styled to match the project's design system file. The numbers and comments are invented sample data made to look plausible, so the result is a visual prototype rather than a view of real accounts.

Great for

  • Designers who need a realistic dashboard mockup to show a client or stakeholder
  • Creators or marketers exploring how an analytics page could look before building one
  • Developers prototyping a social analytics UI with placeholder data

Skip it if

  • Pulling real follower or engagement numbers from X, LinkedIn, YouTube or Instagram: the skill generates fake data and does not connect to any platform API
  • Reporting real performance to a boss or client, since the figures could be mistaken for actual results

Try asking

  • “Create a social media analytics dashboard using my design system showing X, LinkedIn, YouTube and Instagram”
  • “Build a creator analytics dashboard with follower growth, top post and trending topics”
  • “Make a social analytics page for a design indie creator with 30-day charts”
Step-by-step guide: how to use Social Media DashboardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    social-media-dashboard.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip social-media-dashboard.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip social-media-dashboard.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a DESIGN.md first so the dashboard matches your brand, otherwise the look will be generic
  • Name the platforms and metrics you want in the brief to get a closer match
  • Treat the output as a mockup and replace the sample data before sharing any numbers

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.