|
| 1 | +# GitHub Pages Site Generation Prompt |
| 2 | + |
| 3 | +Generate a beautiful, self-descriptive website for the Spotify MCP server following these requirements: |
| 4 | + |
| 5 | +## Design Requirements |
| 6 | + |
| 7 | +### Theme & Colors (Spotify-inspired) |
| 8 | +- **Primary Background**: Black/dark (#191414) with subtle gradient to #2a1a1f |
| 9 | +- **Accent Color**: Spotify Green (#1DB954, #1ed760 for hover states) |
| 10 | +- **Card Backgrounds**: Dark gray (#282828) |
| 11 | +- **Text Colors**: |
| 12 | + - Primary: White (#FFFFFF) |
| 13 | + - Secondary: Light gray (#B3B3B3) |
| 14 | +- **Overall aesthetic**: Clean, modern, minimalist - inspired by https://open.spotify.com/ |
| 15 | + |
| 16 | +### Typography |
| 17 | +- Modern system fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif` |
| 18 | +- Bold, large headings with clamp() for responsive sizing |
| 19 | +- Good line-height for readability (1.6-1.7) |
| 20 | + |
| 21 | +### Layout & Responsiveness |
| 22 | +- Mobile-friendly, responsive design |
| 23 | +- Max-width: 1200px container |
| 24 | +- Grid layouts that stack on mobile |
| 25 | +- Smooth transitions and hover effects |
| 26 | +- Card-based design with subtle borders and shadows |
| 27 | + |
| 28 | +## Content to Include |
| 29 | + |
| 30 | +### Header Section |
| 31 | +- Spotify logo (use SVG) |
| 32 | +- Project title: "Spotify MCP" |
| 33 | +- Subtitle describing the project |
| 34 | +- Badges linking to: |
| 35 | + - GitHub repository: https://github.com/jamiew/spotify-mcp |
| 36 | + - Smithery: https://smithery.ai/server/@jamiew/spotify-mcp |
| 37 | +- Primary CTA buttons for installation and examples |
| 38 | + |
| 39 | +### Features Section |
| 40 | +Highlight these key capabilities: |
| 41 | +1. **Playback Control** - Complete playback management through Claude |
| 42 | +2. **Smart Search** - Intelligent search with pagination support |
| 43 | +3. **Playlist Management** - Create, modify, manage playlists with batch operations (1000+ tracks) |
| 44 | +4. **Optimized API Usage** - Smart batching reduces API calls 60-80% |
| 45 | +5. **Type-Safe Design** - Built with FastMCP, Pydantic validation, MyPy compliance |
| 46 | +6. **Real-time State** - Live user profile and playback status |
| 47 | + |
| 48 | +### Tools Section |
| 49 | +List all 13 MCP tools with brief descriptions: |
| 50 | + |
| 51 | +1. **playback_control** - Control playback (get state, start, pause, skip tracks) |
| 52 | +2. **search_tracks** - Search for tracks, albums, artists, or playlists with pagination |
| 53 | +3. **add_to_queue** - Add tracks to playback queue |
| 54 | +4. **get_queue** - View current playback queue |
| 55 | +5. **get_track_info** - Get detailed metadata for any track |
| 56 | +6. **get_artist_info** - Get artist details and top tracks |
| 57 | +7. **create_playlist** - Create new playlists with custom settings |
| 58 | +8. **get_playlist_info** - Get playlist metadata and details |
| 59 | +9. **get_playlist_tracks** - Retrieve tracks from playlists with full pagination (handles 10k+ tracks) |
| 60 | +10. **get_user_playlists** - List all user playlists with pagination |
| 61 | +11. **add_tracks_to_playlist** - Batch add up to 100 tracks at once |
| 62 | +12. **remove_tracks_from_playlist** - Batch remove tracks from playlists |
| 63 | +13. **modify_playlist_details** - Update playlist name, description, and privacy |
| 64 | + |
| 65 | +### Installation Section |
| 66 | +- Quick install command: `npx -y @smithery/cli install @jamiew/spotify-mcp --client claude` |
| 67 | +- Requirements: Spotify Premium account, `uv` >= 0.54 |
| 68 | +- Link to full installation guide in README |
| 69 | + |
| 70 | +### Usage Examples |
| 71 | +Include these example use cases: |
| 72 | +- "Create a chill study playlist with 20 tracks" → Search + playlist creation + bulk track addition |
| 73 | +- "Show me the first 50 tracks from my Liked Songs" → Pagination for large playlists |
| 74 | +- "Find similar artists to Radiohead and add their top tracks to my queue" → Search + artist info + queue management |
| 75 | + |
| 76 | +### Footer Section |
| 77 | +- **Attribution**: Created by [@jamiew](https://github.com/jamiew) |
| 78 | +- **Original Repository**: Forked from [varunneal/spotify-mcp](https://github.com/varunneal/spotify-mcp) with enhanced playlist features and API optimizations |
| 79 | +- **Technology Credits**: Built with [FastMCP](https://github.com/jlowin/fastmcp) • Powered by [Spotify Web API](https://developer.spotify.com/) |
| 80 | +- **License**: MIT License link |
| 81 | + |
| 82 | +## Technical Requirements |
| 83 | + |
| 84 | +- Single-file HTML with embedded CSS (no external dependencies) |
| 85 | +- Semantic HTML5 |
| 86 | +- Accessible (proper headings, alt text, ARIA where needed) |
| 87 | +- Fast loading (no heavy assets) |
| 88 | +- SEO meta tags (title, description) |
| 89 | +- Proper viewport meta tag for mobile |
| 90 | + |
| 91 | +## Output Format |
| 92 | + |
| 93 | +Generate a complete, production-ready `index.html` file that can be deployed directly to GitHub Pages. |
0 commit comments