Spotify Now-Playing Card
Designs a Spotify-style now-playing card as a single HTML file for video overlays or profiles
- 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”
Install in 3 steps
- 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
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
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.