Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Blue wave podcast site: 1440, made in this run
Run 1Blue wave podcast site“Build a website for my podcast. Brief is in brief.md, photos in photos/.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 12 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Blue Wave Podcast Site

A fresh blue podcast site with a show-cover hero, episode list with play buttons, host and newsletter.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a podcast website in a fresh blue wave style into your own project: fresh blue and white with wave dividers between sections, a show-cover hero with listen buttons, an episode list with play buttons and progress bars, the host, listener notes and a newsletter sign-up. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a podcast, radio show or audio series needs its own website, or someone asks for a blue, wavy, friendly show site.

By RecaplyUpdated 12 Nov

Install Blue Wave Podcast Site

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/blue-wave-podcast-site/install.md and follow it to install the blue-wave-podcast-site skill from blue-wave-podcast-site.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Blue Wave Podcast Site is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A podcast website in a fresh blue wave style
  • Checked at phone and desktop widths

Good fit

  • When a podcast, radio show or audio series needs its own website, or someone asks for a blue, wavy, friendly show site

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Build a website for my podcast. Brief is in brief.md, photos in photos/.

It said back

The Second Shift site is built in plain HTML, CSS and JavaScript, and the automated check passes with no failures. I looked at the 390px, 768px and 1440px screenshots. The host portrait was squashed at first, so I fixed it and re-ran the check. The page has not been opened in a real browser by me beyond the check's screenshots, and I haven't tried playing audio.

Files (all in site/)

  • index.html
  • style.css
  • script.js
  • images/helen-cho.jpg
  • images/marcus-bell.jpg
Show more

What it did in run 1

  1. blue-wave-podcast-site
  2. cat brief.md && ls -la photos
  3. ls -a . .claude/skills/blue-wave-podcast-site .claude/skills/blue-wave-podcast-site/reference && wc -c .claude/skills/blue-wave-podcast-site/reference/* && node .claude/skills/blue-wave-podcast-site/scripts/check.mjs --ready; sips -g pixelWidth -g pixelHeight photos/*
  4. ./.claude/skills/blue-wave-podcast-site/reference/index.html
  5. ./.claude/skills/blue-wave-podcast-site/reference/style.css
  6. ./.claude/skills/blue-wave-podcast-site/reference/script.js
  7. ./photos/marcus-bell.jpg
  8. ./photos/helen-cho.jpg
  9. mkdir -p site/images && S=.claude/skills/blue-wave-podcast-site/reference && cp $S/style.css $S/script.js site/ && sips -Z 900 photos/marcus-bell.jpg --out site/images/marcus-bell.jpg && sips -Z 1000 photos/helen-cho.jpg --out site/images/helen-cho.jpg && ls -la site/images
  10. mkdir -p site/images && cp .claude/skills/blue-wave-podcast-site/reference/style.css .claude/skills/blue-wave-podcast-site/reference/script.js site/
  11. sips -Z 900 photos/marcus-bell.jpg --out site/images/marcus-bell.jpg
  12. sips -Z 1000 photos/helen-cho.jpg --out site/images/helen-cho.jpg
  13. mkdir -p site/images && cp photos/marcus-bell.jpg photos/helen-cho.jpg site/images/ && ls site/images
  14. ./site/style.css
  15. ./site/script.js
  16. cat > /tmp/gen.mjs <<'EOF' import {writeFileSync} from 'node:fs'; const play=(t)=><button class="ep-play" type="button" aria-pressed="false" data-play><svg class="i-play" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5l11 7-11 7z"/></svg><svg class="i-pause" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg><span class="sr-only">Play ${t}</span></button>; const eps=[[86,'From banker to beekeeper','2 Nov 2026',42,'Helen Cho spent 22 years in corporate banking in London. Now she keeps 60 hives in Herefordshire and sells honey to 30 shops.'], [85,'The lawyer who became a carpenter','19 Oct 2026',38,'With Tom Reyes.'], [84,'Teaching at 50','5 Oct 2026',44,'With Grace Mensah.'], [83,'From pilot to potter','21 Sep 2026',41,'With Ingrid Sol.']]; const epHtml=eps.map(([n,t,d,m,l])=><li class="ep reveal">${play(episode ${n}: ${t})}<div class="ep-meta"><p class="ep-n">Episode ${n} · ${d} · ${m} min</p><h3>${t}</h3><p>${l}</p><div class="ep-bar" aria-hidden="true"><span></span></div></div></li>).join(''); const logo=<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><rect width="32" height="32" rx="9" fill="#1D4ED8"/><path d="M5 18c4-5 7-5 11 0s7 5 11 0" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/></svg>; const q=[['I listened on my commute for a year. Then I handed in my notice.','Dawn','D','47, now a midwife'],['Every episode ends with the money question nobody else asks.','Kwame','K','Manchester'],['Marcus asks what it actually felt like, not just what happened.','Sarah','S','Toronto']]; const qHtml=q.map(([t,n,i,r])=><li class="quote reveal"><figure><blockquote><p>${t}</p></blockquote><figcaption><span class="avatar" aria-hidden="true">${i}</span><span><b>${n}</b><br><span class="role">${r}</span></span></figcaption></figure></li>).join(''); const desc='Second Shift is a podcast about people who changed careers after 40, hosted by Marcus Bell. A new episode every other Monday.'; writeFileSync('site/index.html',<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Second Shift: stories of people who changed careers after 40</title> <meta name="description" content="${desc}"> <meta property="og:type" content="website"> <meta property="og:title" content="Second Shift: stories of people who changed careers after 40"> <meta property="og:description" content="${desc}"> <meta property="og:image" content="images/helen-cho.jpg"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Second Shift home">${logo}<span>Second Shift</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 7h16M4 12h16M4 17h16"/></svg><span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#episodes">Episodes</a></li><li><a href="#about">Host</a></li><li><a href="#stories">Listener notes</a></li><li><a href="#cta">Newsletter</a></li></ul><a class="btn btn-primary btn-sm" href="#episodes">Listen now</a></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="hero-words reveal"><p class="kicker">A podcast for the second act</p><h1>People who <em>changed careers</em> after 40</h1><p class="hero-sub">Host Marcus Bell taught history for 18 years, then retrained as a nurse at 46. Each episode, he asks someone who made their own leap what it actually felt like.</p><div class="hero-ctas"><a class="btn btn-primary" href="#episodes">Listen to the latest episode<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a class="btn btn-ghost" href="#cta">Join the newsletter</a></div><p class="hero-note">86 episodes · a new one every other Monday · on Apple Podcasts, Spotify, YouTube and RSS</p></div><div class="hero-art reveal"><div class="cover"><img src="images/helen-cho.jpg" width="1000" height="684" alt="Helen Cho in a beekeeper's suit holding a frame of honeycomb in front of her hives"><small>Latest: Episode 86</small><p>Second Shift</p></div></div></div></section> <section class="sec episodes wave-top wave-bottom" id="episodes" aria-labelledby="episodes-h"><div class="wrap"><div class="sec-head"><h2 id="episodes-h">Latest <em>episodes</em></h2></div><ol class="ep-list">${epHtml}</ol><p class="ep-note">Audio links for each episode are still to be added.</p></div></section> <section class="sec about" id="about" aria-labelledby="about-h"><div class="wrap about-in"><div class="about-words reveal"><div class="sec-head"><h2 id="about-h">Your host, <em>Marcus Bell</em></h2></div><p>Marcus taught history for 18 years. At 46 he retrained as a nurse, and he now works on a cardiac ward in Bristol.</p><p>He knows what it is to start again in the middle of a life, and that is the conversation he has with every guest.</p></div><div class="about-art reveal"><img src="images/marcus-bell.jpg" width="900" height="900" alt="Portrait of Marcus Bell in navy scrubs, smiling beside a microphone"></div></div></section> <section class="sec quotes" id="stories" aria-labelledby="stories-h"><div class="wrap"><div class="sec-head"><h2 id="stories-h">Listener <em>notes</em></h2></div><ul class="quote-list">${qHtml}</ul></div></section> <section class="sec cta" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">The Shift Note, after <em>every episode</em></h2><p>One email after each episode with the guest's three tips. Read by 9,400 people.</p><form class="inline-form" data-form><label class="sr-only" for="cta-email">Email address</label><input id="cta-email" type="email" name="email" required placeholder="you@example.com" autocomplete="email"><button class="btn btn-primary" type="submit">Subscribe</button><p class="form-status" role="status" aria-live="polite"></p></form></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">${logo}<span>Second Shift</span></a><p>A podcast about people who changed careers after 40.</p></div><nav class="foot-col" aria-label="Listen"><h2>Listen</h2><ul><li><a href="#episodes">Latest episodes</a></li><li><a href="#stories">Listener notes</a></li></ul></nav><nav class="foot-col" aria-label="Show"><h2>The show</h2><ul><li><a href="#about">Your host</a></li><li><a href="#cta">The Shift Note</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Second Shift. Hosted by Marcus Bell.</p></div></footer> <script src="script.js" defer></script> </body> </html> ); EOF node /tmp/gen.mjs && node .claude/skills/blue-wave-podcast-site/scripts/check.mjs site/index.html --out check 2>&1 | tail -40
  17. ./tools/gen.mjs
  18. node tools/gen.mjs && node .claude/skills/blue-wave-podcast-site/scripts/check.mjs site/index.html --out check 2>&1 | tail -40
  19. ./check/1440.png
  20. ./check/390.png
  21. ./site/style.css
  22. node .claude/skills/blue-wave-podcast-site/scripts/check.mjs site/index.html --out check 2>&1 | tail -10
  23. ./check/768.png
  24. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 37 s · $0.50 of API use

Questions

Is Blue Wave Podcast Site free?

No. Blue Wave Podcast Site costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Blue Wave Podcast Site?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Blue Wave Podcast Site?

A ZIP of the whole skill folder (39 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Blue Wave Podcast Site?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./blue-wave-podcast-site with your agent's flag.

What do I get from Blue Wave Podcast Site?

One HTML file with its CSS inside: no build step, no framework. A podcast website in a fresh blue wave style. Checked at phone and desktop widths.

What does Blue Wave Podcast Site need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Blue Wave Podcast Site?

7 files, about 28,817 tokens in all. The SKILL.md is about 2,467 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 2 min 37 s to 2 min 37 s and $0.50 to $0.50 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Blue Wave Podcast Site to use it?

Type /blue-wave-podcast-site first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.