Communitygithub.com

Cody-W-Tucker/skills

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.

¿Qué es skills?

skills is a Claude Code agent skill that 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.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Cody-W-Tucker/skills/tree/HEAD/skills/youtube-devrel

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

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

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Cody-W-Tucker/skills

Landing page quality assessment for paid advertising campaigns. Evaluates message match, page speed, mobile experience, trust signals, form optimization, and conversion rate potential. Use when user says landing page, post-click experience, landing page audit, conversion rate, or landing page optimization.

Cody-W-Tucker/skills

TikTok Ads deep analysis covering creative quality, tracking, bidding, campaign structure, and TikTok Shop. Evaluates 28 checks with emphasis on creative-first strategy, safe zone compliance, and Smart+ campaigns. Use when user says TikTok Ads, TikTok marketing, TikTok Shop, Spark Ads, Smart+, or TikTok campaign.

Cody-W-Tucker/skills

YouTube Ads specific analysis covering campaign types, creative quality, audience targeting, and measurement. Evaluates video ad performance across skippable, non-skippable, bumper, Shorts, Demand Gen, and Connected TV formats. Covers VAC→Demand Gen migration, Shorts creative requirements, and CTV shoppable ads. Use when user says YouTube Ads, video ads, pre-roll, bumper ads, YouTube campaign, Shorts ads, or CTV ads.

Cody-W-Tucker/skills

Craft the story that makes investors say \"I want in.\" Master the narrative structure that Reid Hoffman, Sequoia, and top founders use to raise capital. Use when: **Preparing to fundraise** to develop your story before the deck; **Investor meetings** to structure conversations that convert; **Pitch practice** to refine your narrative arc; **Cold outreach** to write compelling investor emails; **Pivoting** to reframe your story after a change

Cody-W-Tucker/skills

Identify the best GTM motions and tools across 7 motion types: Inbound, Outbound, Paid Digital, Community, Partners, ABM, and PLG. Use when selecting marketing channels, choosing between inbound and outbound strategy, or planning cross-channel campaigns.

Cody-W-Tucker/skills

Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.

Cody-W-Tucker/skills

Optimize landing pages for maximum conversions using proven frameworks from Unbounce and Oli Gardner—apply the \"one goal, one message, one action\" principle with data-driven design, copy, and CTA best practices. Use when: **Create a new landing page** for a campaign; **Optimize an existing landing page** that isn't converting; **Review landing page design** before launch; **Improve form conversion rates** on lead gen pages; **A/B test landing page elements** systematically

Cody-W-Tucker/skills

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

Cody-W-Tucker/skills

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this.

Cody-W-Tucker/skills

A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.

Cody-W-Tucker/skills

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.

Cody-W-Tucker/skills

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

Cody-W-Tucker/skills

Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) — Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (←/→, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.

Cody-W-Tucker/skills

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.

Cody-W-Tucker/skills

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more.

Cody-W-Tucker/skills

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

Cody-W-Tucker/skills

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

Cody-W-Tucker/skills

Master April Dunford's 8-step sales narrative from \"Sales Pitch\" (2023). Transform your positioning into a compelling story that wins enterprise deals. Use when: Structuring B2B sales presentations and demos; Creating pitch decks for complex products; Training sales teams on narrative-driven selling; Converting positioning strategy into sales conversations; Winning against entrenched competitors

Cody-W-Tucker/skills

Swiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file.

Cody-W-Tucker/skills

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, video), and create real time alerts for events from live streams or desktop capture.

Skills relacionados