How to use the Spotify Now-Playing Card agent skill

What does the skill make the agent do?

The skill teaches an agent to build one self-contained HTML file that looks like Spotify's 'Now Playing' panel. The card has a CSS-drawn album cover, a title, an artist line, a progress bar with timestamps, and playback control icons (previous, play/pause, next, plus smaller shuffle and repeat icons). It also includes a small Spotify-style logo and an optional animated sound-wave effect.

The card uses a dark style: a #121212 background or a gradient taken from the cover colours, a #1DB954 green accent and #b3b3b3 secondary text. It comes in two sizes: 1280x720 for a video overlay, or 600x200 as a compact strip for a hero section.

• Canvas sizes: 1280x720 (video overlay) or 600x200 (compact widget)
• Cover art is a CSS gradient with a monogram or abstract shapes, not a photo
• Sound-wave animation uses CSS keyframes and turns off for users who prefer reduced motion

Install the skill from the ZIP file

Download the ZIP for this skill from this page and unzip it. The package contains SKILL.md, example.md and example.html. Then place the skill folder in one of two locations: your personal skills folder at ~/.claude/skills/, or a project-level .claude/skills/ folder inside the project where you work.

If you use the Claude apps instead of a folder, open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Apps install: Settings → Capabilities → Skills

How do you trigger the skill with a request?

You don't call the skill by name. Describe the card you want in plain language and say what it is for, and the agent should pick up the skill when the request matches. The skill handles three kinds of input: a song, a podcast episode, or a short personal introduction. If you give it a plain title and artist, it treats the title as the song name and the artist as the artist line.

If you don't give a duration, the skill uses 3:42 as a default. Say the length and progress you want if the card should look like a specific moment.

• Make a Now Playing card for this song: [title] by [artist], 1280x720 for a video overlay
• Create a compact 600x200 music widget for my about page, showing my favourite track
• Build a Spotify-style card for my podcast episode 'Episode title' with the progress at 1:24

Example of what you get

The bundled example is a 'Lo-Fi Beats · Chillhop' card. It shows the track 'Sunday Afternoon' by j'san and evil needle, with progress at 1:24 of 3:42 and a control row. The example.md file contains the matching description, and example.html is the rendered page you can open in a browser.

Open example.html in any web browser to see the layout. To use the card in a video, screen-record the page or place it in your editor as a visual layer. To use it on a website, copy the HTML structure into your page.

What does the skill need, and what are its safety limits?

The skill needs an AI agent that reads SKILL.md files and a web browser to view the HTML it creates. According to the skill's own listing, it runs no scripts and uses no network access. Its instructions forbid external image links, so the cover art is always a gradient or graphic and never a real album photo.

The card is a mockup. It does not connect to Spotify, so the track name, progress, timestamps and playback state are the values you give it or the defaults. Do not present the output as live or accurate playback data.

• No scripts are run by the skill
• No network use is declared by the skill
• External images are forbidden; cover art is CSS-drawn
• Nothing is read from your Spotify account

Tips for better cards

Give the agent the song title, artist, and the colours you want if you have a brand palette. Ask for the 1280x720 size when the card will sit over video, and the 600x200 size for a website strip. Keep the cover monogram short so it stays readable at 60 to 200 pixels square.

If the text is cut off or the layout looks wrong, ask the agent to shorten the title or use the compact size. Reduced-motion users will see the wave animation switched off by design.

• Specify the canvas size before you start
• Keep titles short so they fit on one line
• Use the designer's mockup for quick concepts, not for marketing claims about real playback