<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Matt Stankowski</title>
    <description>The latest articles on DEV Community by Matt Stankowski (@mstan1990).</description>
    <link>https://dev.to/mstan1990</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3966729%2F9ffcbd35-0b7e-41fc-ac63-36514eca9a01.png</url>
      <title>DEV Community: Matt Stankowski</title>
      <link>https://dev.to/mstan1990</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mstan1990"/>
    <language>en</language>
    <item>
      <title>How I built a Chrome extension that turns YouTube tutorials into Claude Skills</title>
      <dc:creator>Matt Stankowski</dc:creator>
      <pubDate>Wed, 03 Jun 2026 14:53:29 +0000</pubDate>
      <link>https://dev.to/mstan1990/how-i-built-a-chrome-extension-that-turns-youtube-tutorials-into-claude-skills-46il</link>
      <guid>https://dev.to/mstan1990/how-i-built-a-chrome-extension-that-turns-youtube-tutorials-into-claude-skills-46il</guid>
      <description>&lt;p&gt;&lt;a href="https://tube2skill.com/?utm_source=reddit&amp;amp;utm_medium=post&amp;amp;utm_campaign=launch_jun26&amp;amp;utm_content=devto" rel="noopener noreferrer"&gt;Tube2Skill&lt;/a&gt; is live on the Chrome web store now&lt;/p&gt;

&lt;p&gt;For the last year I've watched probably 200+ YouTube tutorials on AI, LangChain, agent building, and the various flavours of "build a SaaS in a weekend." Every single time, I hit the same wall:The tutorial ends. I want Claude to help me implement what I just watched. But Claude doesn't know the tutorial. So I spend the next 30 minutes pausing the video, copying code, re-prompting Claude with "no, the speaker actually meant &lt;em&gt;this&lt;/em&gt;", and slowly reconstructing the framework the creator was using.&lt;/p&gt;

&lt;p&gt;Eventually I got fed up and built a tool. It's called Tube2Skill,it's a Chrome extension, and it does in one click what I was doing manually for half an hour every time. This post is a write-up of how it works and what I learned shipping it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem, more precisely
&lt;/h2&gt;

&lt;p&gt;When you give Claude a YouTube transcript directly, it summarizes the video. Useful, but summary isn't what I want. I want Claude to &lt;em&gt;act&lt;/em&gt; on the tutorial, write code in the same style, apply the same architectural pattern, debug using the same mental model the creator just demonstrated.&lt;/p&gt;

&lt;p&gt;The trick is that Claude has a feature called &lt;strong&gt;Skills&lt;/strong&gt; &lt;code&gt;.md&lt;/code&gt; files with a specific structure that Claude treats as procedural knowledge, not just retrieved context. A Skill tells Claude: "when this pattern matches, follow these steps." So the real task wasn't "give Claude a transcript" it was "convert a transcript into a Skill."&lt;/p&gt;

&lt;h2&gt;
  
  
  The architecture
&lt;/h2&gt;

&lt;p&gt;The extension is Manifest V3, which means a service worker rather than a persistent background page. The flow is dead simple:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content script&lt;/strong&gt; detects we're on a YouTube video page and injects the extension UI&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User clicks the icon&lt;/strong&gt; — popup triggers a request for the transcript&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Service worker&lt;/strong&gt; fetches the transcript (more on this in a second), then calls the Anthropic API to convert it to a Skill&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Skill file downloads&lt;/strong&gt; to the user's machine, ready to drop into Claude&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The interesting part is step 3.&lt;/p&gt;

&lt;h2&gt;
  
  
  Converting transcripts into Skills
&lt;/h2&gt;

&lt;p&gt;A raw YouTube transcript is a wall of text with timestamps. Claude Skills, by contrast, have a specific shape:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;
&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;my-skill&lt;/span&gt;
&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;When&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;to&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;use&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;this&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;skill..."&lt;/span&gt;
&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;span class="c1"&gt;# Skill Name&lt;/span&gt;
&lt;span class="c1"&gt;## When to use&lt;/span&gt;
&lt;span class="nn"&gt;...&lt;/span&gt;
&lt;span class="c1"&gt;## Procedure&lt;/span&gt;
&lt;span class="s"&gt;1. Step one&lt;/span&gt;
&lt;span class="s"&gt;2. Step two&lt;/span&gt;
&lt;span class="nn"&gt;...&lt;/span&gt;
&lt;span class="c1"&gt;## Examples&lt;/span&gt;
&lt;span class="nn"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The conversion needs to:&lt;/p&gt;

&lt;p&gt;Identify the implicit workflow the creator demonstrated&lt;br&gt;
Pull out code snippets and preserve them exactly&lt;br&gt;
Extract terminology and gotchas the creator emphasized&lt;br&gt;
Map all of that into the Skill schema&lt;/p&gt;

&lt;p&gt;I burned a few weekends iterating on the prompt that does this. The biggest win was structuring the conversion as a multi-pass operation:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pass 1:&lt;/strong&gt; Extract sections by detecting topic shifts (often signaled by phrases like "ok so now let's...", "the next thing we need to do is...").&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pass 2:&lt;/strong&gt; For each section, pull out: action verbs (these become procedure steps), code blocks (preserved verbatim), and conceptual explanations (these become "When to use" guidance).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pass 3:&lt;/strong&gt; Validate against the Skill schema and format.&lt;/p&gt;

&lt;p&gt;A single-pass approach worked but produced Skills that were ~60% as useful. Three passes hit ~90%.&lt;br&gt;
The transcript fetching pain&lt;br&gt;
Quick note for anyone building a YouTube extension: transcript availability is genuinely inconsistent. The YouTube transcript API shape changes occasionally, auto generated captions have lower accuracy on code heavy speech ("import" frequently becomes "in port"), and some videos straight-up don't have captions.&lt;/p&gt;

&lt;p&gt;My fallback chain:&lt;/p&gt;

&lt;p&gt;Try uploaded captions (highest quality)&lt;br&gt;
Fall back to auto-generated English captions&lt;br&gt;
If no English, fall back to auto translated captions from the original language&lt;br&gt;
If none of the above, fail gracefully with a clear error message&lt;/p&gt;

&lt;p&gt;I considered using Whisper as a last resort fallback (running the audio through speech-to-text ourselves), but the cost per conversion made the unit economics painful for the free tier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Billing&lt;/strong&gt;&lt;br&gt;
I used ExtensionPay, a thin Stripe wrapper specifically designed for Chrome extensions. It handles the payment UI, license checking, and upgrade flow. Probably saved me two weeks of integration work and removed any need to deal with PCI compliance myself.&lt;/p&gt;

&lt;p&gt;The pricing model: free tier with 2 conversions, paid tiers from £5/mo (5 conversions) up to £99/mo (unlimited). Charging from day 1 was deliberate, I wanted to know early if anyone would actually pay before going deeper.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The launch meta-joke&lt;/strong&gt;&lt;br&gt;
Here's the bit I find funnest. To make a demo video for Tube2Skill, I needed a script. So I fed a popular YouTube tutorial titled "How to make a SaaS product demo video" into Tube2Skill, then had Claude use the resulting skill to plan the demo. The demo video you see on the landing page was generated this way.&lt;/p&gt;

&lt;p&gt;A tool that converts YouTube into Claude Skills, demoed using a YouTube tutorial about demos, turned into a Claude Skill, used to plan the demo. Recursive AI dogfooding all the way down.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I learned shipping it&lt;/strong&gt;&lt;br&gt;
Manifest V3 service worker lifecycle is painful. Anything you put in chrome.storage is fair game; anything you keep in a variable in the worker disappears unpredictably.&lt;/p&gt;

&lt;p&gt;Chrome Web Store review is faster than I expected. v1 took 4 days. v1.1 took 1 day. Submit early and often.&lt;/p&gt;

&lt;p&gt;The Trader Status declaration is now non-optional if you have any paid features and EU/UK users. Set up a virtual mailbox before declaring.&lt;/p&gt;

&lt;p&gt;A small Plausible setup beats elaborate analytics. I tracked outbound clicks to the Chrome Web Store as my conversion signal good enough.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Try it&lt;/strong&gt;&lt;br&gt;
It's live on the Chrome Web Store. Free to install, 2 free conversions to test it. Plans from £5/mo if you want more.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tube2skill.com/?utm_source=reddit&amp;amp;utm_medium=post&amp;amp;utm_campaign=launch_jun26&amp;amp;utm_content=devto" rel="noopener noreferrer"&gt;Install Tube2Skill&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you build with Claude, I'd genuinely love feedback on:&lt;/p&gt;

&lt;p&gt;What kinds of tutorials would you most want to convert?&lt;br&gt;
What does the Skill output need to make it 10x more useful for your workflow?&lt;/p&gt;

&lt;p&gt;Drop a comment &lt;/p&gt;

</description>
      <category>showdev</category>
      <category>ai</category>
      <category>claude</category>
      <category>extensions</category>
    </item>
  </channel>
</rss>
