skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

social-spotify-card

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
One-click install
npx skills add https://github.com/nexu-io/html-anything --skill social-spotify-card
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
lucasromanhlucasromanh

remotion

Fetch Stitch project screens and render a Remotion video composition with transitions.

Community
Advanced
MRWillisTMRWillisT
7

high-end-website-design

Generate cinematic hero images, looping videos, and single-file HTML landing pages.

Community
Advanced
nexu-ionexu-io
8.2k

frame-logo-outro

Assemble modular logo outro with glow bloom using inline SVG and CSS.

Official
Intermediate
eachlabseachlabs
28

album-cover-generation

Generate 3000x3000 album covers and Spotify Canvas visuals via each::sense API.

Official
Intermediate