Skip to content
Get packs

Spotify Now-Playing Card

Designs a Spotify-style now-playing card as a single HTML file for video overlays or profiles

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

This skill teaches an AI agent to turn a song, podcast, or short personal intro into a Spotify-style 'Now Playing' card, built as one self-contained HTML page. The card shows a CSS-drawn album cover, title, artist, a progress bar with timestamps, and playback control icons in Spotify's dark style. The output is meant for placing over a video or on a personal website, in either a 1280x720 or 600x200 size. It forbids external image links, so the cover art is a gradient or graphic rather than a real album photo.

Great for

  • Creators who want a music card overlay for a video or stream
  • People building a personal about page or hero section who want a 'now listening' widget
  • Designers who need a quick Spotify-like mockup without using Spotify's real assets

Skip it if

  • Showing real album art or live Spotify data: the skill forbids external images and does not connect to Spotify, so the progress and track details are invented placeholders.
  • Anything needing accurate track length or playback status, since the default duration of 3:42 is an estimate, not real data.

Try asking

  • “Make a Spotify now-playing card for the song 'Midnight Drive' by a lo-fi artist, sized for a 1280x720 video overlay”
  • “Create a compact 600x200 now-playing widget for my portfolio homepage”
  • “Turn this podcast episode title and host name into a Spotify-style card with a progress bar”
Step-by-step guide: how to use Spotify Now-Playing CardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    social-spotify-card.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip social-spotify-card.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip social-spotify-card.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the song title, artist, and a rough progress time so the displayed values look realistic.
  • Ask for the dark gradient or the classic #121212 background depending on whether the card sits on a dark or light video.
  • Remember the design imitates Spotify's look; check branding rules before publishing commercially.

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.