# Social Media Dashboard > | - **Type:** Skill - **Install:** `agentstack add skill-nexu-io-open-design-social-media-dashboard` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [nexu-io](https://agentstack.voostack.com/s/nexu-io) - **Installs:** 0 - **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics) - **Latest version:** 0.1.0 - **License:** Apache-2.0 - **Upstream author:** [nexu-io](https://github.com/nexu-io) - **Source:** https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/social-media-dashboard - **Website:** https://open-design.ai ## Install ```sh agentstack add skill-nexu-io-open-design-social-media-dashboard ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 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: - `` through ``, CSS in one inline `` block. - CSS Grid for page-level layout; Flexbox inside cards. - Semantic HTML: ``, ``, ``, ``. - 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: `` for the curve, a second `` with low-alpha fill for the area, two `` annotation dots with text labels. - Sparklines: `` 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 `` tags: ``` ... ``` One sentence before the artifact, nothing after. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [nexu-io](https://github.com/nexu-io) - **Source:** [nexu-io/open-design](https://github.com/nexu-io/open-design) - **License:** Apache-2.0 - **Homepage:** https://open-design.ai Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-nexu-io-open-design-social-media-dashboard - Seller: https://agentstack.voostack.com/s/nexu-io - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.