majiayu000 Code Delta Visualization Skill
When proposing code changes, ALWAYS present them in this structured format:
Format Template
╔══════════════════════════════════════════════════════════════════════════════╗
║ Change #N: [Short descriptive title] ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ FILE TREE ║
║ [root path]/ ║
║ ├── path/to/ ║
║ │ └── file1.tsx [ACTION] ±N LOC ║
║ └── path/to/ ║
║ └── file2.ts [ACTION] -N LOC ║
║ ───────────────── ║
║ Total: -N LOC ║
║ ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ IMPACT SUMMARY ║
║ ┌─────────────────────┬──────────────┬──────────────┬─────────┐ ║
║ │ Metric │ Before │ After │ Delta │ ║
║ ├─────────────────────┼──────────────┼──────────────┼─────────┤ ║
║ │ LOC (this change) │ — │ — │ -N │ ║
║ │ Cyclomatic │ N │ N │ -N │ ║
║ │ Cognitive │ N │ N │ -N │ ║
║ │ Dependencies │ [before] │ [after] │ [note] │ ║
║ └─────────────────────┴──────────────┴──────────────┴─────────┘ ║
║ ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ DIFF ║
╚══════════════════════════════════════════════════════════════════════════════╝
--- a/path/to/file1.tsx
+++ b/path/to/file1.tsx
-removed line
+added line
context line
--- a/path/to/file2.ts
+++ b/path/to/file2.ts
-removed line
+added line
╔══════════════════════════════════════════════════════════════════════════════╗
║ RATIONALE ║
║ • Reason 1 ║
║ • Reason 2 ║
║ • Reason 3 ║
╚══════════════════════════════════════════════════════════════════════════════╝
Field Definitions
FILE TREE
- Show relative paths from a common root
- Use tree characters:
├──,└──,│ - Actions:
[MODIFIED],[ADDED],[DELETED],[RENAMED] - Show LOC change per file:
+N LOC,-N LOC,±0 LOC - Include total at bottom
IMPACT SUMMARY
Required metrics:
- LOC (this change): Net lines added/removed
- Cyclomatic Complexity: Number of independent paths through code (if/else, switch cases, loops, &&, ||)
- Cognitive Complexity: How difficult code is to understand (nesting depth, breaks in linear flow, recursion)
- Dependencies: New imports, removed imports, or "Reuse" if using existing
Optional metrics (include when relevant):
- Test Coverage: If tests affected
- Bundle Size: If significant
DIFF
- Use ```diff syntax for red/green highlighting
- Group by file with
--- a/and+++ b/headers - Include minimal context lines for clarity
- Separate files with blank line
RATIONALE
- Bullet points explaining why this change improves the codebase
- Focus on: reduced duplication, reuse, readability, maintainability
Usage
After presenting a change in this format, always end with:
Apply? (y/n)
Wait for user confirmation before making changes.