nalaj

Session Story — Design skill for Claude Code

Design community

Generate a self-contained HTML "session story" that links each prompt in a vibe coding session to the file edits it caused, with a review timeline, a GitHub-style diff view, and a plain-language narra.

How to install Session Story

This entry records only its repository, not the path inside it, so there is no exact command to give. Open nalaj/session-story and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Session Story does

Alternatives in Design

Nothing Design Skill — A Claude Code skill for generating UI in the Nothing design language 1.4k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★
Plan Artifact — Creates one polished, self-contained HTML artifact from a plan, PRD, roadmap, strategy, migration, rollout, re 652 ★

README

Session Story

Stop guessing what your AI changed. See the whole story.

A session story: each prompt in the session next to the code changes it led to

Start page · Live example · Quick start

Session Story

**Generate a self-contained HTML "session story" that links each prompt in a vibe coding session to the file edits it caused, with a review timeline, a GitHub-style diff view, and a plain-language narrative.**

Session Story is a zero-dependency Node.js extraction and rendering pipeline for Claude Code. It parses the session transcript into typed JSON IR, cross-indexes prompts to the edits they caused, and deterministically compiles that into one HTML file with inline CSS and JS.

Open it and review — a GitHub-style diff, a turn-by-turn timeline, a plain-language narrative, and a report of what happened (commands, tests, errors, decisions, outcome), switchable in