AgentStack
Browse Sign in
Browse Why AgentStack Sell Docs
Sign in
SKILL verified Apache-2.0 Self-run

Social Spotify Card

skill-nexu-io-open-design-social-spotify-card · by nexu-io

Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.

↗ Website ↗ Repository
— No reviews yet
0 installs
40 views
0.0% view→install

Install

$ agentstack add skill-nexu-io-open-design-social-spotify-card

✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

View the full security report →

Verified badge

Passed review? Show it. Paste this badge into your README, it links to the public security report.

AgentStack Verified badge Links to your public security report.
[![AgentStack Verified](https://agentstack.voostack.com/badges/verified.svg)](https://agentstack.voostack.com/security/report/skill-nexu-io-open-design-social-spotify-card)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 2mo ago

Declared compatibility

Claude CodeClaude Desktop

Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.

Preview Execution monitoring

We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.

How agent discovery & health will work →
Are you the author of Social Spotify Card? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

【模板: Spotify Now-Playing 卡】 【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。

【画布】两个尺寸:

  • 横版视频叠加: 1280×720, 卡片居中或左下角浮动。
  • 紧凑横条 widget: 600×200, 可嵌入到任何 hero。

【卡片结构】

  • 外框: 圆角 12-16px; bg 用专辑封面色提取的暗渐变 (e.g. linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) 或 Spotify 经典 #121212; 边缘有 1px subtle border。
  • 左侧: 专辑封面 (CSS 渐变 + 大字 monogram 或抽象几何描绘, 不能外链图片), 圆角 6px, 60-200px 方形。
  • 右侧:
  • 顶部 NOW PLAYING (uppercase letterspace 0.14em, 11px, 绿色 #1DB954)。
  • 歌名 / 标题 (Inter / Spotify Circular, 22-28px, weight 700, 白色)。
  • 艺人 / 副标 (16px, weight 400, opacity 0.7)。
  • 进度条: 4px 高, 圆角, 灰色背景 + 白色 fill (width: 38%); 两端时间戳 1:24 / 3:42 (mono, 11px, 灰)。
  • 控制行: ⏮ ⏯ ⏭ icon (inline SVG, 24px, 白色 fill), shuffle / repeat icon 较小。
  • 右上角: Spotify logo (内联 SVG, 绿色 #1DB954 圆 + 三道白色波纹)。
  • 可选: 右下角小型音波动效 (3 个 bar @keyframes)。

【字体】

  • 主: Spotify Circular → fallback Inter / Inter Tight, weight 400 / 700。
  • 数字: 同主字体, 不用 mono 太多。

【设计细节】

  • Spotify 经典 dark mode: #121212 bg, #1DB954 accent, #b3b3b3 secondary text。
  • 若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
  • 若用户输入是音乐相关 → 直接对应。
  • 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
  • 微动效: 音波动效用 @keyframes, 可被 prefers-reduced-motion 关闭。
  • 单文件 HTML。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet, be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Content & Media