Best for
- 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 li
Source profileQuality 75/100
nexu-io/open-design/design-templates/social-media-dashboard/SKILL.md
social-media-dashboard
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 li
- Source repository stars
- 91,167
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-08-25
- Source checked
- 2026-08-25
Decision brief
What it does: where it fits
Produce a single-screen, creator-facing social media analytics dashboard.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/social-media-dashboard"Safe inspection promptEditorial
Inspect the Agent Skill "social-media-dashboard" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/design-templates/social-media-dashboard/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
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…
Read the active DESIGN.md (injected above). Colors, typography,Identify which platforms the brief calls out. Default toGenerate plausible data, never Metric A / Metric B placeholders. - 02
Output contract
One sentence before the artifact, nothing after.
One sentence before the artifact, nothing after.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 75/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 91,167 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- nexu-io/open-design
- Skill path
- design-templates/social-media-dashboard/SKILL.md
- Commit
- edfa6b5f447e95cb120eae030f03baba00dc34de
- License
- Apache-2.0
- Collected
- 2026-08-25
- Default branch
- main
View the original SKILL.md
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 Bplaceholders. 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 weekdelta. 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 · 💬 18row 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-variantfor muted text. Accent appears at most three times on the page.
- Line chart:
- 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.
- Every color resolves to a DESIGN.md token (or a documented
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
What to verify before installation and use
What does the social-media-dashboard source document cover?
Produce a single-screen, creator-facing social media analytics dashboard.
How do I install social-media-dashboard?
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/social-media-dashboard". Inspect the command and pinned source before running it.
Alternatives
Compare before choosing
Computed 963,343
davepoon/buildwithclaude
mailchimp-automation
Automate Mailchimp email marketing including campaigns, audiences, subscribers, segments, and analytics via Rube MCP (Composio). Always search tools first for current schemas.
Computed 952,634
aaron-he-zhu/aaron-marketing-skills
social-calendar-builder
Use when the user asks to "build our social posting calendar", "set weekly slots and queue depth per channel", or "plan the evergreen recycle rotation"; produces the always-on brand calendar — pillar allocation with hero/hub/help balance and give:ask targets (all labeled Estimated starting heuristics to calibrate against own analytics, never scored rules), per-channel recurring slots with queue depth, a batching workflow, an evergreen recycle cycle with freshness re-checks, deliberate open slots
Computed 943,343
davepoon/buildwithclaude
sendgrid-automation
Automate SendGrid email operations including sending emails, managing contacts/lists, sender identities, templates, and analytics via Rube MCP (Composio). Always search tools first for current schemas.
Computed 94783
nexscope-ai/eCommerce-Skills
shopify-marketing
Comprehensive Shopify marketing strategy and execution. SEO optimization, email marketing automation, paid advertising management, conversion rate optimization, and customer retention strategies specifically for DTC Shopify brands. Use when the user asks about Shopify marketing, DTC marketing, Shopify SEO, or Shopify store growth.