返回技能列表

youtube-devrel

jonathimer
更新于 2 days ago
5 次查看
76
4
76
在 GitHub 上查看
ai

关于

This skill assists developers in creating technical YouTube content like tutorials, screencasts, and live coding videos. It provides guidance on video structure, recording setup, thumbnails, and SEO for developer-focused channels. Use it when triggered by phrases related to developer video content or YouTube creation.

快速安装

Claude Code

推荐
主要方式
npx skills add jonathimer/devmarketing-skills -a claude-code
插件命令备选方式
/plugin add https://github.com/jonathimer/devmarketing-skills
Git 克隆备选方式
git clone https://github.com/jonathimer/devmarketing-skills.git ~/.claude/skills/youtube-devrel

在 Claude Code 中复制并粘贴此命令以安装该技能

技能文档

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

AudienceWhat they wantVideo length
Learning developersComplete tutorials15-45 min
Working developersQuick solutions5-15 min
Senior developersDeep dives, architecture30-60 min
Decision makersDemos, overviews3-10 min
Conference attendeesRecorded talks20-45 min

Content Types That Work

Content typeView potentialEffortNotes
Tutorial (build X)Very highHighEvergreen traffic
Problem/solutionHighMediumSearch-driven
Tool comparisonsHighMediumHigh search volume
Live codingMedium-highLowEngagement-focused
Project updatesMediumLowCommunity building
Conference talksMediumLowRepurpose content
ShortsHigh reachLowDiscovery-focused

Successful Dev YouTube Channels

ChannelStyleWhy it works
FireshipFast, dense, opinionatedRespects viewer time
ThePrimeagenPersonality, live reactionsAuthentic, entertaining
Traversy MediaClear, beginner-friendlyComprehensive tutorials
Hussein NasserDeep dives, whiteboardEngineering depth
Ben AwadCasual, real codingRelatable, 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)

ElementPurpose
Show the end resultProve it's worth watching
State what they'll learnSet expectations
Mention prerequisitesQualify viewers
Estimated timeRespect 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 lengthSegment lengthNotes
5-10 min1-2 min segmentsFast, focused
15-30 min3-5 min segmentsStandard tutorial
30-60 min5-10 min segmentsDeep dive

Common Tutorial Mistakes

MistakeImpactFix
Too much setupViewers drop offSkip to interesting parts
Not showing end resultNo motivationShow finished product first
Going too fastConfusionPause on key steps
Going too slowBoredomEdit out pauses, typos
No timestampsPoor navigationAdd chapters
Walls of codeOverwhelmingBuild incrementally

Screen Recording Setup

Essential Equipment

EquipmentBudget optionBetter option
MicrophoneBlue Snowball ($50)Shure SM7B ($400)
Screen recordingOBS (free)ScreenFlow ($170)
WebcamBuilt-inLogitech C920 ($80)
LightingWindow lightRing light ($30)
EditorDaVinci Resolve (free)Premiere Pro ($22/mo)

Audio is More Important Than Video

PriorityWhy
1. Clear audioBad audio = immediate click away
2. Readable codeText must be crisp
3. Good lightingFor facecam sections
4. High resolution1080p minimum

Screen Recording Best Practices

SettingRecommendation
Resolution1920x1080 or 2560x1440
Font size18-24pt in editor
ThemeDark theme (easier on eyes)
ZoomUse IDE zoom for key sections
NotificationsDisable all
BrowserUse 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

FormatLengthPlatform
Twitch stream → YouTube1-4 hoursBoth
YouTube Live30-90 minYouTube
Pre-recorded "live"20-45 minYouTube

Live Coding Best Practices

DoDon't
Explain your thinkingCode silently
Embrace mistakesPretend you know everything
Read chatIgnore audience
Have a goalMeander aimlessly
Take breaksMarathon without pause
Use timestamps post-streamLeave as giant blob

Common Live Coding Content

ContentExample
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)

AspectBest practice
HookImmediate (first 1-2 seconds)
Length30-45 seconds optimal
Aspect ratio9:16 (vertical)
ContentOne tip, one concept
TextBig, on-screen captions
AudioClear voiceover

Shorts Content Ideas

TypeExample
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

GoalApproach
Grow subscribersPost 3-5 shorts/week
Drive to long-formTease tutorials in shorts
Algorithm favorConsistent posting schedule
Repurpose contentCut from long videos

Long-Form vs Shorts

Long-formShorts
Search trafficDiscovery traffic
Watch time revenueLow revenue
DepthBreadth
Subscribers who staySubscribers who scroll
Comments, communityLess engagement

Thumbnails for Developers

Thumbnail Principles

ElementGuideline
Text3-5 words max
FaceExpression adds emotion
Logo/iconTech being discussed
ColorsHigh contrast, brand consistent
CompositionRule of thirds

Thumbnail Patterns That Work

PatternExample
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

ToolBest for
CanvaQuick, easy templates
FigmaDesign control
PhotoshopAdvanced editing
Thumbnail templatesConsistency

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

LocationImpactBest practice
TitleHighestPrimary keyword early
DescriptionHighFirst 2 sentences keyword-rich
TagsLowInclude, but don't overthink
Captions/transcriptMediumAuto-generated + edit
FilenameLowInclude keyword anyway

Title Formulas

FormulaExample
[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

ToolUse for
YouTube search autocompleteReal search queries
TubeBuddy/VidIQSearch volume, competition
Google TrendsTrending topics
Competitor titlesWhat'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

DayContent
MondayShorts (tip/trick)
WednesdayLong-form tutorial
FridayShorts (from Wednesday video)
WeekendEdit next week's content

Monthly Planning

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

Tools

ToolUse case
OctolensMonitor YouTube and social for mentions of your tech topics, competitors, and find what developers are asking about.
OBS StudioFree screen recording and streaming
ScreenFlowMac recording and editing
DaVinci ResolveFree professional editing
DescriptEdit video by editing transcript
CanvaThumbnail creation
TubeBuddyYouTube SEO tools
Riverside.fmRemote 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

GitHub 仓库

jonathimer/devmarketing-skills
路径: skills/youtube-devrel
0

相关推荐技能

content-collections

Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。

查看技能

polymarket

这个Claude Skill为开发者提供完整的Polymarket预测市场开发支持,涵盖API调用、交易执行和市场数据分析。关键特性包括实时WebSocket数据流,可监控实时交易、订单和市场动态。开发者可用它构建预测市场应用、实施交易策略并集成实时市场预测功能。

查看技能

creating-opencode-plugins

该Skill帮助开发者创建OpenCode插件,用于接入命令、文件、LSP等25+种事件。它提供了插件结构、事件API规范和JavaScript/TypeScript实现模式,适合需要拦截操作、扩展功能或自定义事件处理的场景。开发者可通过它快速构建响应式模块来增强OpenCode AI助手的能力。

查看技能

sglang

SGLang是一个专为LLM设计的高性能推理框架,特别适用于需要结构化输出的场景。它通过RadixAttention前缀缓存技术,在处理JSON、正则表达式、工具调用等具有重复前缀的复杂工作流时,能实现极速生成。如果你正在构建智能体或多轮对话系统,并追求远超vLLM的推理性能,SGLang是理想选择。

查看技能