Code Tutorial

Description

--- name: code-tutorial description: 코드 블록 타이핑 애니메이션 중심의 개발 튜토리얼/바이브코딩 쇼츠 컴포지션 규칙 install_to: .claude/skills/ version: 0.1.0 depends_on: [remotion-composition, motion] --- # Code Tutorial 스킬 ## 목적 "개념 1개를 60초로 설명하는" 개발 튜토리얼 쇼츠. 핵심은 **코드 블록이 실제로 타이핑되는 것처럼** 보이는 애니메이션. ## 원칙 1. **코드는 데이터, 렌더는 계산** — 코드 문자열을 `Token[][]`으로 사전 토큰화해 props로 전달. 컴포넌트 내부에서 `useCurrentFrame`으로 글자 수 slice 2. **색은 팔레트 하나** — VSCode Dark+ 근사 팔레트 하나로 통일. 튜토리얼마다 테마 바꾸지 말 것 3. **커서는 2Hz 블링크** — `Math.floor((frame / fps) *

Installation

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

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