YawnsDuzin

Code Tutorial — Development skill for Claude Code

Development community

코드 블록 타이핑 애니메이션 중심의 개발 튜토리얼/바이브코딩 쇼츠 컴포지션 규칙.

How to install Code Tutorial

Installs to ~/.claude/skills/yawnsduzin-remotion-skills-playground-code-tutorial/SKILL.md

Terminal

mkdir -p ~/.claude/skills/yawnsduzin-remotion-skills-playground-code-tutorial && curl -fsSL https://raw.githubusercontent.com/YawnsDuzin/remotion-skills-playground/HEAD/skills/code-tutorial.md -o ~/.claude/skills/yawnsduzin-remotion-skills-playground-code-tutorial/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Code Tutorial does

name: code-tutorial description: 코드 블록 타이핑 애니메이션 중심의 개발 튜토리얼/바이브코딩 쇼츠 컴포지션 규칙 install_to: .claude/skills/ version: 0.1.0 depends_on: [remotion-composition, motion]

Code Tutorial 스킬

목적

"개념 1개를 60초로 설명하는" 개발 튜토리얼 쇼츠. 핵심은 **코드 블록이 실제로 타이핑되는 것처럼** 보이는 애니메이션.

원칙

코드는 데이터, 렌더는 계산 — 코드 문자열을 Token[][]으로 사전 토큰화해 props로 전달. 컴포넌트 내부에서 useCurrentFrame으로 글자 수 slice
색은 팔레트 하나 — VSCode Dark+ 근사 팔레트 하나로 통일. 튜토리얼마다 테마 바꾸지 말 것
커서는 2Hz 블링크 — `Math.floor((frame / fps) *

Alternatives in Development

Tutorial 116 ★
Swap Tutorial — Claude Code 换窗教程：精炼续窗、启动包、冷仓与长期记忆 Based on LMC-5 56 ★
Claude Code Tutorial — Claude Code CLI 中文教程 - 从入门到精通，涵盖配置、Hooks、Skills、MCP集成及企业级最佳实践 55 ★