Create detailed markdown walkthroughs of code changes. Use when the user asks to "create a walkthrough", "explain the changes", "review recent commits", "document what changed", "walk me through the diff", "summarize my changes", or similar requests for change documentation.
Generates detailed markdown walkthroughs of code changes with automatic HTML preview.
/plugin marketplace add SawyerHood/sawyer-mart/plugin install change-walkthrough@sawyer-martThis skill inherits all available tools. When active, it can use any tool Claude has access to.
package.jsonscripts/md-to-html.jsGenerate a detailed, well-formatted markdown walkthrough of code changes with automatic HTML conversion and browser preview.
Ask or determine what changes the user wants documented:
If not specified, default to uncommitted changes.
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.
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*
Create a descriptive filename based on the changes:
{action}-{subject}-{YYYY-MM-DD}.mdExamples:
add-user-authentication-2025-12-22.mdfix-login-validation-2025-12-22.mdrefactor-database-queries-2025-12-22.mdWrite the walkthrough to the skill's tmp directory. All generated files should be stored within the skill folder, not in the user's project directory.
The skill's base directory is shown at the top when the skill loads as "Base directory for this skill: ...". Use this path to construct the output location:
{SKILL_BASE_DIR}/tmp/{filename}.md
Write the generated markdown using the absolute path to the skill's tmp directory.
The conversion script requires npm dependencies. Run all commands from the skill's base directory (shown at the top when the skill loads as "Base directory for this skill: ...").
# Change to skill directory and install dependencies (only needed once per cache)
cd {SKILL_BASE_DIR} && npm install
# Convert markdown to HTML (use ABSOLUTE paths for input/output)
node scripts/md-to-html.js {SKILL_BASE_DIR}/tmp/{filename}.md
# Open in default browser
open {SKILL_BASE_DIR}/tmp/{filename}.html
Replace {SKILL_BASE_DIR} with the skill's base directory path. The script accepts absolute paths for the input file and automatically creates the .html file alongside it in the skill's tmp directory.
Report to the user the paths to both files and confirm the browser opened.
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.