スキル一覧に戻る

youtube-devrel

jonathimer
更新日 Yesterday
1 閲覧
76
4
76
GitHubで表示
メタai

について

このスキルは、チュートリアル、スクリーンキャスト、ライブコーディング動画などの技術系YouTubeコンテンツを開発者が作成するのを支援します。開発者向けチャンネルに特化した、動画構成、録画設定、サムネイル、SEOに関するガイダンスを提供します。開発者向け動画コンテンツやYouTube作成に関連するフレーズによってトリガーされた際にご利用ください。

クイックインストール

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(Markdown/MDXファイルを型安全なデータコレクションに変換するTypeScriptファーストのツール)の本番環境でテストされた設定を提供します。Zodバリデーションによる型安全性を実現し、ブログ、ドキュメントサイト、コンテンツ重視のVite + Reactアプリケーション構築時にご利用ください。Viteプラグインの設定、MDXコンパイルから、デプロイ最適化、スキーマバリデーションまで、すべてを網羅しています。

スキルを見る

polymarket

メタ

このスキルは、開発者がPolymarket予測市場プラットフォームを活用したアプリケーション構築を可能にします。API統合による取引や市場データの取得に加え、WebSocketを介したリアルタイムデータストリーミングにより、ライブ取引や市場活動を監視できます。取引戦略の実装や、ライブ市場更新を処理するツールの作成にご利用ください。

スキルを見る

creating-opencode-plugins

メタ

このスキルは、開発者がコマンド、ファイル、LSP操作など25種類以上のイベントタイプにフックするOpenCodeプラグインを作成することを支援します。JavaScript/TypeScriptモジュール向けに、プラグイン構造、イベントAPI仕様、および実装パターンを提供します。カスタムイベント駆動ロジックでOpenCode AIアシスタントのライフサイクルをインターセプト、監視、または拡張する必要がある場合にご利用ください。

スキルを見る

sglang

メタ

SGLangは、高性能なLLMサービングフレームワークであり、RadixAttentionプレフィックスキャッシュを活用したJSON、正規表現、エージェントワークフロー向けの高速で構造化された生成を特長とします。特にプレフィックスが繰り返されるタスクにおいて、大幅に高速な推論を実現し、複雑な構造化出力やマルチターン対話に最適です。制約付きデコードが必要な場合や、広範なプレフィックス共有を伴うアプリケーションを構築する場合は、vLLMなどの代替案ではなくSGLangを選択してください。

スキルを見る