social-media-dashboard

nexu-io/open-design · plugins/_official/examples/social-media-dashboard/SKILL.md

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.

Marketing & GrowthNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

Social Media Dashboard Skill

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

Workflow

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.
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.
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.
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.
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.
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.
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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/social-media-dashboard · 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/plugins/_official/examples/social-media-dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# 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/plugins/_official/examples/social-media-dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/social-media-dashboard

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so social-media-dashboard is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

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.

social-media-dashboard

nexu-io/open-design · plugins/_official/examples/social-media-dashboard/SKILL.md

Marketing & GrowthNo license★ 91788⑂ 10564commit 9881cff

What this skill does

Social Media Dashboard Skill

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

Workflow

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.
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.
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.
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.
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.
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.
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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/social-media-dashboard · 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/plugins/_official/examples/social-media-dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# 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/plugins/_official/examples/social-media-dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/social-media-dashboard

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so social-media-dashboard is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

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.

social-media-dashboard

What this skill does

Social Media Dashboard Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

social-media-dashboard

What this skill does

Social Media Dashboard Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits