Interview Podcast Sitev0.1.1
Use this Skill to build a product website.
An interview show's whole 31-route home in one file, from a podcast website skill for Claude Fable 5: dark hero card, a docked player that keeps playing, transcripts, guest pages.
Picked most often by
Updated Oct 31, 2026
Preview gallery
Similar Skills
View all
What you get
- One offline HTML file with 31 linked routes, every one readable without JavaScript
- Home: the dark hero card with its audio card, newest episodes with topic chips, themed playlists, quote carousel, a mosaic of guests, the host section and the newsletter band
- A docked player: skips, speed, seeking by click, drag or keyboard, resume, chapters, an Up next queue that advances on its own, and a now-playing sheet
- An archive with search, selects for season and sort, a grid or list view, routes per topic and season, and an empty state; one page per episode with chapters, key ideas, transcript excerpt, mentions, guest card and related episodes
- Guests, About (sponsorship, a suggest-a-guest form, contacts), privacy, terms and a 404, plus a search dialog and a follow dialog
- Newsreader, Schibsted Grotesk and Geist Mono embedded with the icons, and structured data of the PodcastSeries type
Good fit
- Interview and conversation podcasts
- Business, craft and trade shows with one guest per episode
- Shows that want a proper website with a player that works
Not for
- Hosting the audio itself: point episodes at the show's own MP3 URLs
- Live analytics, comment threads or paid memberships
- Shows that are video first
About this Skill
A conversation show needs a home where listeners can press play, keep browsing and find the moment a guest said the thing. Give your agent the real episode list with guests and chapters, plus the quotes and transcripts, and it returns one offline HTML file of 31 routes. The top of the home page is a dark rounded card holding soft blurred blooms of cobalt, sky and cyan: a heavy headline over three lines, one play button with recent guests' faces next to it, four follow marks, and a small card for the newest episode's audio. Hit play and a frosted bar docks along the bottom and keeps going from page to page; tap it for a now-playing sheet with a waveform, chapter list, speed control and queue. Further down Home: the latest six episodes with topic chips, themed playlists behind vertical tabs, a carousel of quotes that each start playback at the right second, a mosaic of this season's guests, a section on the host, and the newsletter sign-up on the blue stage. In the archive, listeners search, narrow by topic or season, sort, and toggle grid or list. Each episode gets a page of key ideas, a transcript excerpt with buttons that seek to each line, what was mentioned, a guest card, previous and next links, and related episodes. A directory of guests, About with sponsorship notes and a form to suggest a guest, privacy, terms and a designed 404 finish the site. Covers need no designer: CSS turns each guest's portrait into duotone art.
How it works
- Collect from the show: name, host, feed, release day, topics, the facts of every episode, chapters, quotes, transcript excerpts and team credits
- Fill in site.json from the example brief and leave out what isn't known
- Generate or bring in the image plan's photos: a square portrait for each guest, a host portrait and one of the studio
- Build next; the script flags every gap in the brief together
- Validate: a single file, one h1 on each page, all links resolving, labeled controls, every photo present
- At 390, 768, 1024 and 1440 px, test the player and its sheet, archive filters, theme tabs, carousel, search dialog and both forms
- Hand over the file with a list of what the show still has to confirm
Checked before delivery
- validate.mjs passes: single file, one h1 per page, every link resolves, no remote assets, structured data
- Every date, duration, chapter time, quote and credit matches the brief; no invented listener counts, rankings, ratings or awards
- Play, seek, skip, speed, chapters, the queue, resume, the search dialog, archive filters, the theme tabs, the carousel and both forms work at widths of 390, 768, 1024 and 1440 px
What you need before you start
- You bring
- Show name, tagline, host, feed URL, site URL, release day and time, newsletter name and next date, contact emails, company name · Topics, and every episode: number, season, date, duration, title, guest, role, business, place, team size, a two-sentence summary; for full episodes also chapters, three key ideas, a quote, a transcript excerpt and the things mentioned · Themed playlists (two to four episodes each with a reason to listen), the episodes whose quotes go in the carousel, the five guests in the mosaic · Guest and host portraits with permission, a studio photo, team credits, sponsorship policy, privacy and terms text
- Dependencies
- Node.js 20 or later · Nothing to install, no keys, no network calls
- Outside costs
- None
- Last tested
- v0.1.1 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
Will listeners hear actual episodes?
Yes, once an episode has an audio URL: the player then runs a real audio element. Without one, a simulated clock runs instead, so chapters, progress labels, the queue and every control still work in the preview.
What goes into the episode pages, and what never does?
Only what the show's brief provides: numbers, dates, durations, titles, guests and their businesses, chapter marks, key ideas, quotes and excerpts of transcript. Listener counts, chart rankings and awards are never invented.
Who provides the portraits?
The show, with each guest's permission. CSS turns any square portrait into duotone cover art, and an episode without a photo shows the show artwork.
Does it fit a solo show or a company podcast?
Yes. Solo shows repurpose the guest pages as segments or topics, and a company show uses About to tell the show's story; the Skill says which sections to rename and which ones to remove.