Skip to main content
skill CX Codex

youtube-devrel — Claude Code skill: what it does, how to install

A skill that guides developers and DevRel teams through planning YouTube tutorials, technical screencasts, IDE recording setups, and short-form video.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add jonathimer/devmarketing-skills --skill youtube-devrel -a claude-code
Open on GitHub

What youtube-devrel does

The skill provides concrete templates for developer video production. It outlines standard structures with exact timestamps: showing the finished build within the first 30 seconds, walking through prerequisites, and pacing steps into 2- to 5-minute blocks. It also breaks down content formats by target audience, from quick 5-minute fixes for working engineers to 60-minute deep dives.

Technical recording standards are built into the guidance. It specifies an IDE font size of 18–24pt, dark themes, and a clean browser profile without a bookmarks bar. Audio takes priority over camera quality because bad sound causes immediate drop-offs. If .agents/developer-audience-context.md exists in the repository, the skill consults it before drafting video outlines.

What it helps with

  • Outline a minute-by-minute technical tutorial script
  • Write a 30-second opening hook showing the final result
  • Set readable IDE fonts and screen capture resolutions
  • Plan vertical YouTube Shorts under 60 seconds

Example prompts for the agent

  • Draft an outline and timestamps for a 20-minute tutorial on building a web scraper in Node.js
  • Help me write the first 30 seconds hook for a Rust live coding stream
  • Generate ideas for developer YouTube Shorts focusing on Git shortcuts

How to install youtube-devrel

1Skills CLI (Vercel)

npx skills add jonathimer/devmarketing-skills --skill youtube-devrel -a claude-code

2Manually: put the files in place

~/.claude/skills/youtube-devrel/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/youtube-devrel/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about youtube-devrel

How do I install youtube-devrel in Claude Code?

Run npx skills add jonathimer/devmarketing-skills --skill youtube-devrel -a claude-code. The skill file installs to ~/.claude/skills/youtube-devrel/SKILL.md.

What does the youtube-devrel skill do?

It assists with technical YouTube content strategy, screencast pacing, video structure, and live coding setups.

What editor settings does youtube-devrel recommend for screencasts?

It recommends an editor font size between 18 and 24pt, a dark theme, 1080p or 1440p resolution, and turning off all desktop notifications.

Source text

SKILL.md · MIT
---
name: youtube-devrel
description: When the user wants to create developer YouTube content, technical screencasts, or video tutorials. Trigger phrases include "YouTube," "developer video," "screencast," "video tutorial," "live coding," "YouTube for developers," "tech YouTube," or "YouTube thumbnails."
metadata:
  version: 1.0.0
---

# YouTube for Developer Relations

YouTube is the second-largest search engine and where developers go to learn. This skill covers tutorial structure, screen recording setup, live coding, shorts vs long-form, thumbnails, and SEO for technical content.

---

## Before You Start

1. Read `.agents/developer-audience-context.md` if it exists
2. Audit existing technical YouTube channels in your space
3. Understand: Developer YouTube is a long game — consistency > perfection

---

## Understanding Developer YouTube

### Who Watches Dev Content

| Audience | What they want | Video length |
|----------|----------------|--------------|
| Learning developers | Complete tutorials | 15-45 min |
| Working developers | Quick solutions | 5-15 min |
| Senior developers | Deep dives, architecture | 30-60 min |
| Decision makers | Demos, overviews | 3-10 min |
| Conference attendees | Recorded talks | 20-45 min |

### Content Types That Work

| Content type | View potential | Effort | Notes |
|--------------|----------------|--------|-------|
| Tutorial (build X) | Very high | High | Evergreen traffic |
| Problem/solution | High | Medium | Search-driven |
| Tool comparisons | High | Medium | High search volume |
| Live coding | Medium-high | Low | Engagement-focused |
| Project updates | Medium | Low | Community building |
| Conference talks | Medium | Low | Repurpose content |
| Shorts | High reach | Low | Discovery-focused |

### Successful Dev YouTube Channels

| Channel | Style | Why it works |
|---------|-------|--------------|
| Fireship | Fast, dense, opinionated | Respects viewer time |
| ThePrimeagen | Personality, live reactions | Authentic, entertaining |
| Traversy Media | Clear, beginner-friendly | Comprehensive tutorials |
| Hussein Nasser | Deep dives, whiteboard | Engineering depth |
| Ben Awad | Casual, real coding | Relatable, genuine |

---

## Tutorial Structure

### The Tutorial Template

```
0:00 - Hook (what you'll build/learn)
0:30 - Prerequisites & setup
2:00 - Concept explanation (why)
4:00 - Step 1: [First major step]
8:00 - Step 2: [Second major step]
...
XX:00 - Final result demo
XX:30 - Recap & next steps
XX:45 - CTA (subscribe, comment)
```

### Opening Hook (First 30 Seconds)

| Element | Purpose |
|---------|---------|
| Show the end result | Prove it's worth watching |
| State what they'll learn | Set expectations |
| Mention prerequisites | Qualify viewers |
| Estimated time | Respect their time |

**Example hook**:
```
"By the end of this video, you'll have a working CLI tool
that can scrape any website and export to JSON. We'll use
Node.js and Cheerio — you just need basic JavaScript
knowledge. This should take about 20 minutes. Let's go."
```

### Pacing Guidelines

| Video length | Segment length | Notes |
|--------------|----------------|-------|
| 5-10 min | 1-2 min segments | Fast, focused |
| 15-30 min | 3-5 min segments | Standard tutorial |
| 30-60 min | 5-10 min segments | Deep dive |

### Common Tutorial Mistakes

| Mistake | Impact | Fix |
|---------|--------|-----|
| Too much setup | Viewers drop off | Skip to interesting parts |
| Not showing end result | No motivation | Show finished product first |
| Going too fast | Confusion | Pause on key steps |
| Going too slow | Boredom | Edit out pauses, typos |
| No timestamps | Poor navigation | Add chapters |
| Walls of code | Overwhelming | Build incrementally |

---

## Screen Recording Setup

### Essential Equipment

| Equipment | Budget option | Better option |
|-----------|---------------|---------------|
| **Microphone** | Blue Snowball ($50) | Shure SM7B ($400) |
| **Screen recording** | OBS (free) | ScreenFlow ($170) |
| **Webcam** | Built-in | Logitech C920 ($80) |
| **Lighting** | Window light | Ring light ($30) |
| **Editor** | DaVinci Resolve (free) | Premiere Pro ($22/mo) |

### Audio is More Important Than Video

| Priority | Why |
|----------|-----|
| 1. Clear audio | Bad audio = immediate click away |
| 2. Readable code | Text must be crisp |
| 3. Good lighting | For facecam sections |
| 4. High resolution | 1080p minimum |

### Screen Recording Best Practices

| Setting | Recommendation |
|---------|----------------|
| Resolution | 1920x1080 or 2560x1440 |
| Font size | 18-24pt in editor |
| Theme | Dark theme (easier on eyes) |
| Zoom | Use IDE zoom for key sections |
| Notifications | Disable all |
| Browser | Use clean profile, no bookmarks bar |

### Recording Workflow

1. **Script key points** (don't read verbatim)
2. **Test audio levels** before recording
3. **Record in segments** (easier editing)
4. **Leave pauses** for edits (clap or say "edit")
5. **Show face** at transitions (builds connection)
6. **Record extra b-roll** (diagrams, browser, terminal)

---

## Live Coding Content

### Live Coding Formats

| Format | Length | Platform |
|--------|--------|----------|
| Twitch stream → YouTube | 1-4 hours | Both |
| YouTube Live | 30-90 min | YouTube |
| Pre-recorded "live" | 20-45 min | YouTube |

### Live Coding Best Practices

| Do | Don't |
|----|-------|
| Explain your thinking | Code silently |
| Embrace mistakes | Pretend you know everything |
| Read chat | Ignore audience |
| Have a goal | Meander aimlessly |
| Take breaks | Marathon without pause |
| Use timestamps post-stream | Leave as giant blob |

### Common Live Coding Content

| Content | Example |
|---------|---------|
| Project from scratch | "Building a REST API live" |
| Code review | "Reviewing subscriber PRs" |
| Problem solving | "LeetCode medium problems" |
| Exploring new tech | "Learning Rust in public" |
| Bug hunting | "Fixing production issues live" |

---

## Shorts vs Long-Form

### YouTube Shorts (< 60 seconds)

| Aspect | Best practice |
|--------|---------------|
| **Hook** | Immediate (first 1-2 seconds) |
| **Length** | 30-45 seconds optimal |
| **Aspect ratio** | 9:16 (vertical) |
| **Content** | One tip, one concept |
| **Text** | Big, on-screen captions |
| **Audio** | Clear voiceover |

### Shorts Content Ideas

| Type | Example |
|------|---------|
| Quick tips | "One command to speed up Git" |
| Syntax shortcuts | "JavaScript spread operator in 30s" |
| Tool demos | "VS Code extension you need" |
| Code transformations | "Before/after refactoring" |
| Hot takes | "Stop using X, here's why" |

### Shorts Strategy

| Goal | Approach |
|------|----------|
| Grow subscribers | Post 3-5 shorts/week |
| Drive to long-form | Tease tutorials in shorts |
| Algorithm favor | Consistent posting schedule |
| Repurpose content | Cut from long videos |

### Long-Form vs Shorts

| Long-form | Shorts |
|-----------|--------|
| Search traffic | Discovery traffic |
| Watch time revenue | Low revenue |
| Depth | Breadth |
| Subscribers who stay | Subscribers who scroll |
| Comments, community | Less engagement |

---

## Thumbnails for Developers

### Thumbnail Principles

| Element | Guideline |
|---------|-----------|
| **Text** | 3-5 words max |
| **Face** | Expression adds emotion |
| **Logo/icon** | Tech being discussed |
| **Colors** | High contrast, brand consistent |
| **Composition** | Rule of thirds |

### Thumbnail Patterns That Work

| Pattern | Example |
|---------|---------|
| Face + tech logo + emotion | [Surprised face] + [React logo] + "It changed everything" |
| Before/after | [Broken code] → [Working code] |
| Big text + icon | "STOP" + [X mark] |
| Comparison | [Tech A] vs [Tech B] |
| Result preview | [Screenshot of finished app] |

### Thumbnail Creation

| Tool | Best for |
|------|----------|
| Canva | Quick, easy templates |
| Figma | Design control |
| Photoshop | Advanced editing |
| Thumbnail templates | Consistency |

### A/B Test Thumbnails

YouTube allows thumbnail testing:
1. Upload video with thumbnail A
2. After 48 hours, change to B
3. Compare CTR in analytics
4. Keep winner

---

## YouTube SEO

### Where Keywords Matter

| Location | Impact | Best practice |
|----------|--------|---------------|
| **Title** | Highest | Primary keyword early |
| **Description** | High | First 2 sentences keyword-rich |
| **Tags** | Low | Include, but don't overthink |
| **Captions/transcript** | Medium | Auto-generated + edit |
| **Filename** | Low | Include keyword anyway |

### Title Formulas

| Formula | Example |
|---------|---------|
| [Tech] Tutorial: [What you'll build] | "React Tutorial: Build a Todo App from Scratch" |
| How to [Task] with [Tech] | "How to Deploy to AWS with Docker" |
| [Tech A] vs [Tech B]: Which is Better? | "Next.js vs Remix: Which Should You Learn?" |
| [Number] [Topic] Tips in [Time] | "10 VS Code Tips in 10 Minutes" |
| Why I [Action] [Tech] | "Why I Switched from React to Svelte" |

### Description Template

```
[First 150 chars: Compelling summary with main keyword]

In this video, I'll show you [what they'll learn].

Timestamps:
0:00 - Introduction
2:00 - [Section 1]
[...]

Resources mentioned:
- [Link 1]
- [Link 2]

Links:
🔗 My website: [URL]
🔗 GitHub repo: [URL]
🔗 Discord: [URL]

#[keyword1] #[keyword2] #[keyword3]
```

### Research Keywords

| Tool | Use for |
|------|---------|
| YouTube search autocomplete | Real search queries |
| TubeBuddy/VidIQ | Search volume, competition |
| Google Trends | Trending topics |
| Competitor titles | What's working |

---

## Platform-Specific Do's and Don'ts

### Do's

1. **Do** show the end result first
2. **Do** add chapters/timestamps
3. **Do** use clear, readable code fonts
4. **Do** invest in audio quality
5. **Do** maintain consistent posting schedule
6. **Do** engage with comments
7. **Do** repurpose to shorts
8. **Do** create custom thumbnails

### Don'ts

1. **Don't** skip the hook
2. **Don't** use tiny fonts
3. **Don't** record with room echo
4. **Don't** forget CTAs
5. **Don't** post inconsistently
6. **Don't** ignore SEO basics
7. **Don't** make clickbait thumbnails (trust erosion)
8. **Don't** perfectionism (ship it)

---

## Content Calendar

### Weekly Schedule Example

| Day | Content |
|-----|---------|
| Monday | Shorts (tip/trick) |
| Wednesday | Long-form tutorial |
| Friday | Shorts (from Wednesday video) |
| Weekend | Edit next week's content |

### Monthly Planning

| Week | Focus |
|------|-------|
| Week 1 | Tutorial (main content) |
| Week 2 | Live stream or Q&A |
| Week 3 | Tutorial (main content) |
| Week 4 | Comparison or review |

---

## Tools

| Tool | Use case |
|------|----------|
| **[Octolens](https://octolens.com)** | Monitor YouTube and social for mentions of your tech topics, competitors, and find what developers are asking about. |
| **OBS Studio** | Free screen recording and streaming |
| **ScreenFlow** | Mac recording and editing |
| **DaVinci Resolve** | Free professional editing |
| **Descript** | Edit video by editing transcript |
| **Canva** | Thumbnail creation |
| **TubeBuddy** | YouTube SEO tools |
| **Riverside.fm** | Remote recording |

---

## Getting Started Checklist

First video:

- [ ] Script/outline key points
- [ ] Test audio and screen recording
- [ ] Record in 1080p minimum
- [ ] Font size 18pt+ in editor
- [ ] Show end result in first 30 seconds
- [ ] Add timestamps/chapters
- [ ] Create custom thumbnail
- [ ] Write SEO-optimized title/description
- [ ] Include CTA at end
- [ ] Respond to comments within 24 hours

---

## Related Skills

- `developer-audience-context` — Know who's watching
- `dev-to-hashnode` — Turn videos into blog posts
- `linkedin-technical` — Share videos on LinkedIn
- `x-devs` — Promote videos on Twitter
- `github-presence` — Link repos in descriptions

© jonathimer · MIT · jonathimer/devmarketing-skills

Similar skills

All skills for Marketing and content →

From the same set34

x-devs x-devs helps shape technical threads for X and build a developer-focused profile. Use it to turn engineering experience into posts and choose formats for sharing it. CX Codex +1 ★ 87repo stars usage-based-pricing Walks you through a pricing model a developer can estimate before signing up: clear metrics, a calculator, spending caps. CX Codex +1 ★ 87repo stars technical-tutorials Configures the coding agent to generate step-by-step technical guides, quickstarts, and code walkthroughs. Useful for drafting developer docs that work out of the box. CX Codex +1 ★ 87repo stars sdk-dx This skill offers guidance on SDK APIs, types, IDE autocomplete, and actionable errors. Use it when designing a client library or reviewing an existing one. CX Codex +1 ★ 87repo stars reddit-engagement A skill that maps developer subreddits and their self-promotion rules, then pushes a comment-first approach so your account survives. CX Codex +1 ★ 87repo stars power-user-cultivation Identifies engaged developers, calculates advocate scores, and designs champion programs without forced quotas or generic discounts. CX Codex +1 ★ 87repo stars open-source-marketing Plan open-source project promotion through GitHub, community work, and a clearer contributor path. The skill expects an audience context file before it starts. CX Codex +1 ★ 87repo stars linkedin-technical A skill for writing technical LinkedIn posts aimed at B2B audiences, and for deciding when LinkedIn beats Twitter. CX Codex +1 ★ 87repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor