YT Skill Builder

A Chrome Extension that turns any YouTube video into a reusable SKILL.md file — structured, actionable knowledge formatted for use with LLM coding agents like Claude Code.

---

What it does

Open any YouTube video with captions, click Generate Skill, and the extension:

1. Opens the video's transcript panel and reads the full text directly from the DOM
2. Sends the transcript to any OpenAI-compatible LLM API
3. Streams back a production-grade SKILL.md you can copy or download as a .zip

The output follows a consistent structure — overview, when to use, core concepts, step-by-step workflow, best practices, common mistakes, and key references — so the generated skill is immediately usable as a Claude Code skill or any agent context file.

---

Installation

This extension is not published to the Chrome Web Store. Load it as an unpacked extension:

1. Clone or download this repository
2. Go to chrome://extensions
3. Enable Developer mode (toggle, top right)
4. Click Load unpacked and select the yt-skill-builder/ directory
5. Pin the extension to the toolbar

---

Setup

Click the extension icon on any page, then click Settings (or go to chrome://extensions → Details → Extension options):

Field	Description	Example
API Key	Your API key for the LLM provider	nvapi-...
API Base URL	Base URL of any OpenAI-compatible endpoint	https://integrate.api.nvidia.com/v1
Model	Model ID as the provider names it	meta/llama-3.3-70b-instruct

Settings are saved to chrome.storage.local — never in code, never in the manifest.

Compatible providers

Any OpenAI-compatible API works. Tested with:

• NVIDIA NIM — https://integrate.api.nvidia.com/v1
• OpenAI — https://api.openai.com/v1
• Local models — http://localhost:11434/v1 (Ollama), http://localhost:1234/v1 (LM Studio)

If you switch providers, update the host permission in manifest.json and reload the extension (see Adding a new API host below).

---

Usage

1. Navigate to any YouTube video that has captions (CC)
2. Click the YT Skill Builder icon in the toolbar
3. The popup shows the video title — click ⚡ Generate Skill
4. The extension opens the transcript panel on the page, reads it, and starts streaming the skill
5. When done, click Copy to copy the markdown, or Download .zip to save <skill-name>.zip containing SKILL.md

---

Output format

Generated skills follow this structure:

---
name: kebab-case-skill-name
description: >
  2-3 sentences describing what the skill enables, with trigger phrases.
---

# Skill Title

## Overview
## When to Use This Skill
## Core Concepts
## Step-by-Step Workflow
## Best Practices
## Common Mistakes to Avoid
## Reference: Key Facts & Specifics

The name field in the frontmatter is used as the zip filename and folder name.

---

Project structure

yt-skill-builder/
├── manifest.json          # MV3 extension manifest
├── background.js          # Service worker — LLM streaming call
├── content.js             # Injected into YouTube — transcript extraction
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
├── settings/
│   ├── settings.html
│   └── settings.js
├── lib/
│   └── jszip.min.js       # Bundled (no CDN — MV3 CSP blocks external scripts)
├── prompts/
│   └── skill_builder.txt  # System prompt (edit this to change output style)
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

---

Adding a new API host

manifest.json lists explicit host permissions for the LLM endpoint. If you switch to a provider not already listed, add its origin:

"host_permissions": [
  "https://www.youtube.com/*",
  "https://api.openai.com/*",
  "https://integrate.api.nvidia.com/*",
  "http://localhost/*",
  "http://127.0.0.1/*"
]

Then reload the extension at chrome://extensions. Without this, the service worker's fetch() will be blocked by CORS and you'll see "Failed to fetch".

---

Customising the output

Edit prompts/skill_builder.txt to change how skills are generated — the section structure, tone, level of detail, or output language. The file is loaded fresh on every generation, so changes take effect immediately without reloading the extension.

---

Known limitations

• Videos without captions — auto-generated or manual captions must be enabled. The extension reads YouTube's rendered transcript panel; if there's no "Show transcript" button on a video, it cannot extract text.
• Very long videos — transcripts over ~25,000 words are truncated before sending to the LLM to stay within context limits.
• YouTube layout changes — transcript extraction reads specific DOM elements (ytd-transcript-segment-renderer). A major YouTube redesign may require selector updates in content.js.
• SPA navigation — if you click between videos without a full page reload, refresh the page before generating to ensure the transcript panel reflects the current video.

---

Troubleshooting

Symptom	Likely cause	Fix
"Open a YouTube video first"	Extension opened on a non-watch page	Navigate to youtube.com/watch?v=...
"This video has no captions"	Video has no CC track	Try a different video
"Could not read video data"	Page not fully loaded	Refresh the YouTube page
"Failed to fetch"	API host not in host_permissions	Add the host to manifest.json and reload
API error 401	API key missing or wrong	Check Settings
API error 404	Model ID not recognised by the provider	Check the model name in Settings
Popup shows nothing / hangs	Content script not injected	Refresh the YouTube tab, then try again