change-walkthrough

Change Walkthrough

Generate a detailed, well-formatted markdown walkthrough of code changes with automatic HTML conversion and browser preview.

Workflow

1. Understand What Changes to Review

Ask or determine what changes the user wants documented:

• Uncommitted changes (default): All changes in working directory
• Staged changes: Only changes added to staging area
• Recent commits: Last N commits
• Commit range: Specific range (e.g., "abc123..def456")
• Branch comparison: Diff between branches
• Specific files: Only certain files or directories

If not specified, default to uncommitted changes.

2. Gather Change Information

Based on the scope, run appropriate git commands:

# Uncommitted changes
git diff --stat && git diff

# Staged changes
git diff --staged --stat && git diff --staged

# Last N commits
git log --oneline -n N && git diff HEAD~N..HEAD

# Branch comparison
git diff main..HEAD --stat && git diff main..HEAD

Also gather context by reading changed files to understand the full picture.

3. Generate the Walkthrough Document

Create a comprehensive markdown document:

# Change Walkthrough: {Descriptive Title}

**Date:** YYYY-MM-DD
**Scope:** {uncommitted/staged/commits/etc}
**Total Files:** N files changed (+additions/-deletions)

## Summary

{2-3 sentence overview explaining what changed and why}

## Files Changed

| File | Changes | Description |
|------|---------|-------------|
| `path/to/file.ts` | +15/-3 | Brief description |

## Detailed Walkthrough

### {Feature or Component Name}

#### `path/to/file.ts:10-25`

**What changed:** {Explanation}

\`\`\`typescript
// Code snippet with syntax highlighting
\`\`\`

**Why:** {Reasoning behind this change}

## Testing Notes

- {What should be tested}
- {Potential edge cases}

---
*Generated by change-walkthrough skill*

4. Generate Filename

Create a descriptive filename based on the changes:

1. Extract key terms from files changed or commit messages
2. Format as kebab-case: {action}-{subject}-{YYYY-MM-DD}.md