shibbirweb

Refactor Compare Skill — AI skill for Claude Code

AI community

An Agent Skill for any AI coding agent (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode) that builds an interactive before and after page for a refactor: pick a real example, step through ol.

How to install Refactor Compare Skill

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

What Refactor Compare Skill does

Alternatives in AI

Model Update — 增量更新财务模型 — 用新财报/新指引/修正假设重算 DCF 内在价值、Comps 隐含价、投资逻辑与目标价，输出 before→after delta 6.6k ★
Oil UI — Push AI UI design to its limits: explore distinct directions, compare them side by side, and refine against re 861 ★
Cross Agent Session Resumer — Resume AI coding sessions across providers: converts Codex, Claude, Gemini, and other session formats through 71 ★

README

refactor-compare

An Agent Skill for any AI coding agent (Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode and others) that turns "what does this refactor actually change?" into an interactive before and after page. Pick a concrete example, step through the old and new code side by side, and see at every step which lines run, which lines the change added or removed, and how the values the code holds differ. A result card tells you at a glance whether that example ends the same or differently.

It is built for the moments a diff alone does not answer: reviewing a refactor that is supposed to keep behavior, signing off a behavior change, or explaining a migration to someone who did not write it.

![A comparison page on step 4 of a sample checkout refactor: examples picker, the example's inputs, a result card showing the total changing from 90 to 81, a two-track step diagram with a ghost step that only exists in the new code, and the before and after code side by side with running lines highlighted and added and removed lines marked](docs/img/compare-desktop-light.png)

The page follows the viewer's theme and stacks to one column on a phone. The data in these screenshots is a made-up checkout refactor from `tests/fixtures/checkout/`, not a real codebase.

![Dark theme](docs/img/compare-desktop-dark.png)

What you get

An examples picker grouped into "changed" and "same", so regression guards sit next to the intended changes
A result card comparing the final values of both versions for the selected example
A two-track step diagram: steps that exist only in one version show as ghosts with a bypass curve
A before and after inspector per step: a note per side, the tracked values with differences colored, and the real code with running lines highlighted and + and - marks taken from git diff
Back, Play, Next, a scrubber, arrow keys and Space, a focus view that folds lines that do not run, and deep links such as #gold-save10-step4
A bu