Skip to content
Get packs

Guide · Agent skill

How to use the Social Media Dashboard agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The Social Media Dashboard skill tells an AI agent how to build a one-page social media analytics dashboard as a single HTML file. It is designed for making visual prototypes, not for showing real account data. This guide explains what the skill does, how to install it, how to ask for a dashboard, and where it falls short.

Social Media Dashboardnexu-io/open-design · Apache-2.0

Quick start

  1. 1Download the ZIP. Get the skill ZIP from this page. It contains SKILL.md and example.html.
  2. 2Unzip into a skills folder. Place the social-media-dashboard folder in ~/.claude/skills/ for personal use or in the project's .claude/skills/ folder.
  3. 3Add a DESIGN.md file. Make sure the project has a DESIGN.md file, since the skill reads colours and typography from it.
  4. 4Ask for a dashboard. Describe a social media or creator analytics dashboard and name the platforms and metrics you want.
  5. 5Review the HTML output. Open the generated single HTML file in a browser and check the layout against your design system.
  6. 6Label it as a mockup. Remember the numbers are sample data, and mark the page as a prototype before sharing it.

What the social-media-dashboard skill does

The skill sets out a fixed page layout for a creator-facing analytics screen. It includes a platform switcher for X, LinkedIn, YouTube and Instagram, a row of KPI cards for followers, engagement rate, likes and reposts, a follower growth chart, a top post preview, and a panel with trending topics and top comments.

The agent reads your project's DESIGN.md file and takes colours, typography and spacing from it. The numbers and comments are generated sample data, chosen so that figures stay consistent across the page, for example the follower count on the switcher matches the KPI row for the selected platform.

  • Output is one self-contained HTML document with inline CSS and inline SVG charts.
  • The charts use no JavaScript libraries.
  • Platform names are used as text and monograms, not as brand-coloured logos.
  • The skill is listed as a prototype with a desktop layout.

Install the skill from the ZIP

Download the ZIP for this skill from this page. It contains two files: SKILL.md and example.html. Unzip it so the folder named social-media-dashboard sits inside a skills directory the agent can read.

For a personal install, unzip into ~/.claude/skills/. For a single project, unzip into the project's .claude/skills/ folder.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/social-media-dashboard/
  • Project: .claude/skills/social-media-dashboard/
  • Claude apps: Settings → Capabilities → Skills

Check the requirements before you start

The skill needs a DESIGN.md design system file in the project. The agent reads colours and typography from it, and the skill tells the agent not to invent new design tokens. Without that file, the output will not follow your visual system.

The agent must support SKILL.md skills. According to this listing, the skill runs no scripts and makes no network calls.

  • A DESIGN.md file in the project
  • An agent that supports SKILL.md skills

Trigger the skill with a natural request

The skill activates when your request mentions a social media dashboard, creator analytics or social analytics, or names platforms such as X, Twitter, LinkedIn, YouTube, Instagram or TikTok together with metrics like followers, engagement, likes or reposts. You do not need to type a command.

The skill's own example request is shown below. You can adapt it to your platforms and metrics.

  • Make a creator analytics dashboard using my design system.
  • Build a social analytics page for X and LinkedIn showing followers, engagement rate and reposts.
  • Create a social media dashboard prototype for a client presentation with trending topics and top comments.
Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments.

Review the example output and the sample data

The package includes example.html, which shows the kind of page the skill produces. Open it in a browser to see the layout before you generate your own.

Every number on the page is invented. The skill asks the agent to make the data look plausible, so the page can look like a real product screen. That is the reason it is useful for mockups and dangerous for reporting.

  • Open example.html in a browser to preview the layout.
  • Use the time-range tabs and sections as a visual reference only.

Safety notes: scripts, network and fake data

The skill runs no scripts and uses no network access, so it does not pull data from X, LinkedIn, YouTube or Instagram. It does not connect to any platform API.

Because the figures are fabricated, do not present them as real performance to a manager, client or audience. A screenshot of this dashboard could be mistaken for actual results.

  • Do not use the output to report real follower or engagement numbers.
  • Label the page as a prototype or mockup when sharing it.
  • Use a real analytics tool or platform export for actual metrics.

What people use it for

  • Showing a client a realistic analytics screen before any data integration is built.
  • Exploring how a creator dashboard could lay out platform tabs, KPIs and charts.
  • Prototyping a social analytics UI with placeholder data during front-end development.
  • Testing how a DESIGN.md design system looks applied to a data-heavy desktop page.

Frequently asked questions

Does the social media dashboard skill show real follower numbers?

No. The skill generates invented sample data that looks plausible. It does not connect to any platform API, and it makes no network calls, so it cannot show real accounts.

What do I need to use this skill?

You need a DESIGN.md design system file in your project and an agent that supports SKILL.md skills. The skill runs no scripts.

Where do I install the social-media-dashboard skill?

Unzip the downloaded ZIP into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.

Is this skill free to use?

The source lists the licence as Apache-2.0. This page does not state any price, so check the project's repository for licence terms.

Which platforms does the dashboard support?

The skill's default platform switcher covers X, LinkedIn, YouTube and Instagram. The skill also triggers on requests naming TikTok, and the platform switcher is limited to a single row of up to five entries.

Can I use this instead of a real analytics tool?

No. It is a design prototype only. For real performance figures, use the platforms' own analytics or a dedicated analytics tool, since this skill produces only sample data.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Choose this skill if you are a designer, creator or developer who needs a believable social analytics mockup in your design system. Pick a real analytics tool or platform export if you need to report or act on actual performance, because this skill generates invented data.

Download the skill