본문으로 건너뛰기
cccskills
무료GitHub에 공개

session-replay

Converts a Claude Code session JSONL file into an animated GIF terminal replay. Use when creating demos or visual evidence from past sessions.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md5.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Session Replay

Turn a Claude Code session JSONL file into an animated GIF that plays back the conversation as typed terminal output.

The skill orchestrates three steps: parse the session file into turns, generate a VHS tape from those turns, and hand off to scry for GIF rendering.

When To Use

  • Creating demos of development workflows
  • Adding visual evidence to pull requests
  • Sharing session highlights to Slack or GitHub
  • Embedding session replays in tutorials

When NOT To Use

  • Writing blog posts from sessions (use scribe:session-to-post)
  • Generating API documentation (use scribe:doc-generator)
  • Recording live terminal commands (use scry:vhs-recording directly)

Integration Points

NeedSkillWhat it adds
GIF renderingscry:vhs-recordingConverts VHS tape to animated GIF
Tutorial embeddingscribe:tech-tutorialEmbed GIF in tutorial markdown
PR preparationsanctum:prepare-prAttach replay as PR evidence

Workflow

Step 0: Pick a Session (when no path is provided)

When the user invokes /session-replay without a path argument, use scribe.session_parser.list_sessions() to discover recent session files from ~/.claude/projects/.

The function returns a list of SessionInfo objects sorted by modification time (most recent first), each containing:

  • path: full path to the .jsonl file
  • modified: mtime timestamp
  • first_user_message: preview of the first human message
  • turn_count: number of user turns in the session
  • project_name: parent directory name

Present the list to the user as a numbered menu:

Recent sessions:
 1. [my-project] "implement auth module" (8 turns, 2h ago)
 2. [api-server] "fix rate limiting bug" (3 turns, 5h ago)
 3. [docs-site]  "update installation guide" (12 turns, 1d ago)

Ask the user to pick a number. Use the selected session's path for the remaining steps.

If list_sessions returns an empty list, report that no sessions were found and suggest providing a path directly.

Step 1: Parse the Session

Use scribe.session_parser.parse_session() to read the JSONL file. The parser:

  • Extracts user and assistant turns
  • Skips sidechain (subagent) records
  • Collapses tool calls into readable summaries
  • Wraps text at the configured column width
  • Truncates long responses at the configured row count

Apply filters based on user options:

  • --turns selects specific turn ranges (e.g. 1-5)
  • --show controls which layers appear: user, assistant, tools, thinking (thinking is excluded by default)

Step 2: Generate VHS Tape

Use scribe.tape_generator.generate_tape() to convert the parsed turns into a VHS tape file. The generator:

  • Creates the Output directive and Set commands
  • Types user messages at 30ms/char with $ prefix
  • Types assistant responses at 15ms/char
  • Types tool summaries at 100ms with two-space indent
  • Adds 1.5s pauses between turns
  • Holds the final frame for 3s
  • Scales all timing by the --speed multiplier
  • Truncates when --max-duration is exceeded

Write the tape to a temp file: {tempdir}/session-replay-{timestamp}.tape

Step 3: Render GIF

Invoke Skill(scry:vhs-recording) with the tape file path. Scry validates the tape, runs VHS, and produces the GIF at the path specified in the Output directive.

After successful rendering, delete the temp tape file.

Error Handling

ErrorAction
VHS not installedReport: install via go install github.com/charmbracelet/vhs@latest
Tape syntax errorReport VHS error output. Likely a string escaping bug.
GIF generation failsReport VHS error. Suggest --turns 1-5 to reduce scope.
Scry skill not foundReport: scry plugin required for GIF rendering.

Example

# Pick from recent sessions interactively
/session-replay

# Replay a specific file directly
/session-replay ~/.claude/projects/my-project/abc123.jsonl

# First 5 turns only, faster playback
/session-replay --turns 1-5 --speed 1.5

# Show only the conversation, no tool calls
/session-replay --show user,assistant --output demo.gif

Output (interactive picker):

Recent sessions:
 1. [my-project] "implement auth module" (8 turns, 2h ago)
 2. [api-server] "fix rate limiting bug" (3 turns, 5h ago)
 3. [docs-site]  "update installation guide" (12 turns, 1d ago)

Pick a session [1-3]: 1

Parsed 42 turns from session (12 user, 15 assistant, 15 tools)
Generated tape: /tmp/session-replay-1711234567.tape
Rendering GIF via scry...
Done: session-replay.gif (18s, 960x540)

Exit Criteria

  • VHS tape file written to {tempdir}/session-replay-{timestamp}.tape before rendering is attempted
  • GIF produced at the path specified in the tape's Output directive and its size reported (duration, dimensions)
  • Temp tape file deleted after the GIF renders successfully
  • If VHS is not installed, error reported with the install command go install github.com/charmbracelet/vhs@latest rather than silently failing
  • If no JSONL path is given and list_sessions() returns empty, user is told no sessions were found and directed to provide a path directly

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Shapes turns action-first: action leads, steps numbered, state restated. Use for ADHD-friendly output. Do not use to trim tokens; use response-compression.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

athola/claude-night-market3432026년 10월 24일 업데이트

Inverts burden of proof for code additions. Use when reviewing PRs, planning refactors, or running unbloat to challenge every addition's necessity.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

athola/claude-night-market3432026년 10월 24일 업데이트

Tracks per-agent token usage and flags waste in parallel dispatch. Use when evaluating parallel agent efficiency or after a multi-agent run.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

athola/claude-night-market3432026년 10월 24일 업데이트

Coordinates Claude agent teams via filesystem protocol. Use when orchestrating parallel agents with task dependencies. Do not use for single-agent tasks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

athola/claude-night-market3432026년 10월 24일 업데이트

Evaluates API surface design, consistency, and exemplar alignment. Use when reviewing public API changes or before releasing a new API surface.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

athola/claude-night-market3432026년 10월 24일 업데이트

Selects architecture paradigm via research before scaffolding. Use when architecture is undecided and the choice needs justification and documentation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

athola/claude-night-market3432026년 10월 24일 업데이트

athola의 스킬 모두 보기

이 스킬의 문제 신고