social-spotify-card

Name: social-spotify-card
Availability: InStock
Author: nexu

Generate a single-file HTML Spotify-style card with inline SVG and CSS gradients.

8.2k|803|Updated May 11, 2026

Search Tags:#html #css #video #spotify #card #overlay #now-playing

Ready to run

npx skills add https://github.com/nexu-io/html-anything --skill social-spotify-card

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: social-spotify-card
Source: https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/social-spotify-card
Command: npx skills add https://github.com/nexu-io/html-anything --skill social-spotify-card

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render a Spotify Now Playing style card for video overlays or personal pages, combining a cover visual, progress bar, and playback controls in a self-contained HTML card.

Core Features & Use Cases

Album cover visuals built with CSS gradients (no external images)
Progress bar with time stamps and simple controls
Responsive layouts for 1280×720 video overlays or a compact 600×200 widget
Self-contained single-file HTML suitable for video projects and personal sites
Inline SVG logo and typography choices aligned with Spotify visuals

Quick Start

Describe the track details (title, artist, duration) and generate the HTML card for your project.

Frequently Asked Questions about social-spotify-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a Spotify Now Playing card for a video overlay?▼

To create a Spotify Now Playing card for a video overlay, provide the track title, artist, and duration to generate a self-contained HTML file with CSS gradients, an inline SVG logo, and playback controls.

Do I need external images to generate an album cover for my HTML music widget?▼

You do not need external images for the album cover, because the HTML music widget uses CSS gradients to build cover visuals directly within the single-file output.

What video overlay dimensions does the Spotify Now Playing HTML card support?▼

The Spotify Now Playing HTML card supports responsive layouts optimized for 1280x720 video overlays and a compact 600x200 widget for personal pages.

Can I use a CSS gradient music player widget on a personal page without external dependencies?▼

You can use the music player widget on personal pages without external dependencies, as it generates a single-file HTML with inline SVG and CSS gradients requiring no external assets.

What is the best way to add a progress bar with timestamps to an HTML video intro?▼

The best way to add a progress bar with timestamps to an HTML video intro is generating a self-contained Now Playing card that includes built-in progress tracking and simple playback controls.

Why does my HTML music card overlay require external image files?▼

An HTML music card overlay should not require external image files, because it uses CSS gradients for album cover visuals and an inline SVG logo to remain completely self-contained.