skills.rest
JDerekLomas
JDerekLomasCOMMUNITY
Explore all skills by this author →
GitHub

session-replay

Generate standalone HTML session replay timelines from project prompts and images.

1|Updated Jan 14, 2026
Search Tags:#timeline#html#video#canvas#claude-code#session-replay#codevibing
One-click install
npx skills add https://github.com/JDerekLomas/claude-code-skills --skill session-replay-jdereklomas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: session-replay
Source: https://github.com/JDerekLomas/claude-code-skills/tree/main/session-replay
Command: npx skills add https://github.com/JDerekLomas/claude-code-skills --skill session-replay-jdereklomas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of cinematic canvas-based session replays for Claude Code projects, enabling you to showcase real prompts, AI responses, and visuals in a compact, shareable format.

Core Features & Use Cases

  • End-to-end session replays: Generate standalone HTML timelines that replay a Claude Code building session with typed prompts, responses, and images.
  • Portfolio-ready demos: Produce videos for presentations, tutorials, or design showcases that demonstrate the workflow.
  • Extensible templates: Adapt the timeline and visuals for different projects or design systems.

Quick Start

Use the session-replay skill to generate a ready-to-run HTML session file from a project prompt and image set.

Frequently Asked Questions about session-replay

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a video replay of a Claude Code session?▼

You can create a Claude Code session replay by generating a standalone HTML file that uses a canvas-based timeline to cinematically replay typed prompts, AI responses, and project images for tutorials or portfolios.

What do I need to generate an HTML session replay for a project?▼

To generate an HTML session replay, you need a source project containing the prompts and images from your Claude Code building session. The skill then automates the creation of a standalone HTML file suitable for gallery integration.

Can I use session replays for design portfolios and tutorials?▼

Yes, session replays are designed specifically for portfolio-ready demos and tutorials. They produce compact, shareable HTML timelines that visually demonstrate your Claude Code workflow, prompts, and AI responses in a cinematic format.

Does the session replay output require external dependencies to play?▼

No, the session replay output is a self-contained HTML file. It does not require external dependencies or components to play, making it easy to share and integrate directly into web galleries or project showcases.

Are the timeline and visuals in the HTML session file customizable?▼

Yes, the session replays use extensible templates, allowing you to adapt the HTML timeline and canvas visuals to fit different projects or design systems while maintaining the cinematic replay of your Claude Code prompts and responses.

Related Skills

Explore More Design & Creative Skills→
jimwellerjimweller
1

session-migrate

Migrate Claude Code sessions between project folders while preserving history and subagents.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

industrial-archive

Generate single-file HTML product landing pages with a Nordic-industrial museum aesthetic.

Community
Intermediate
chipoto69chipoto69
1

portfolio-forge

Convert an Obsidian knowledge base into a static HTML portfolio.

Community
Basic
bianhaifeng789-huebianhaifeng789-hue

extract-moves-from-video

Extract validated command sequences from video recordings using OCR.

Community
Intermediate