OpenDesign is an open-source, local-first desktop app that lets coding agents create prototypes, dashboards, slide decks, images, video, and design systems as exportable files. It is used by people working with agent runtimes such as Claude Code, Codex, Cursor, and DeepSeek Harness. The catalogue add-ons extend the OpenDesign workflow with skills, instructions, commands, and plugins.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add nexu-io/open-design --skill social-media-dashboardgit clone --depth 1 https://github.com/nexu-io/open-designWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/nexu-io/open-design/social-media-dashboard)<a href="https://agentmods.dev/skills/nexu-io/open-design/social-media-dashboard"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/social-media-dashboard/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/nexu-io/open-design/social-media-dashboard"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/social-media-dashboard.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00130 | $0.01439 |
| Opus 5 | $0.00065 | $0.00720 |
| Sonnet 5 | $0.00026 | $0.00288 |
| Haiku 4.5 | $0.00013 | $0.00144 |
Grade A, and why
social-media-dashboard scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
Copies of this mod
1 near-identical copy found in the catalogue:
- social-media-dashboard — 100% identical, 0 lines differ
How it starts
The opening of the file, as written. The whole thing — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 119 lines · 130 tokens per session scan A 8755632fff86
social-media-dashboard is a skill published in the GitHub repository nexu-io/open-design (95,624 stars, last pushed today), licensed Apache-2.0. It adds 130 tokens to every session and 1,439 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
deck-guizang-editorial
A slide-deck template combining electronic-magazine layouts with an e-ink, printed-paper look. It offers five fixed color palettes and ten reusable page layouts for storytelling and editorial content.
deck-open-slide-canvas
A presentation layout system for freely arranging React components on a fixed 1920×1080 slide canvas. React is a way to build interfaces from reusable pieces.
frame-flowchart-sticky
A single-file HTML template for showing a process or system as a whiteboard with coloured sticky notes, curved arrows, and optional mouse interactions.
social-spotify-card
A Spotify-style now-playing card that shows cover art, a title, artist or subtitle, playback progress, and music controls. It can be sized for video overlays or a website hero section.
social-x-post-card
A realistic X post card that displays a profile, handle, post text, optional quoted content or image area, and engagement figures such as likes, reposts, replies, and views. X is the social platform formerly known as Twitter.
video-hyperframes
A web-based sequence of video frames designed for Hyperframes or Remotion, with each frame presenting one visual idea.