skills/doyajin174/safe-edit/SKILL.md
Automatically backs up files, saves diffs, uses agents/skills, and ensures modular code (<200 lines) before any implementation. Use this skill for ALL code changes to ensure safe, reversible, and clean implementations.
npx skillsauth add aiskillstore/marketplace safe-editInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Comprehensive workflow automation for safe, reversible, and clean code implementations. This skill ensures every code change follows best practices: automatic backups, diff tracking, agent utilization, and modular architecture enforcement.
ALWAYS activate this skill before ANY code implementation:
User triggers (automatic activation):
1. Analyze task complexity and scope
2. Identify affected files and modules
3. Check if agents/skills can help
4. Plan modular architecture (if >200 lines)
5. Create TODO list for tracking
1. Create timestamped backup in .backups/
2. Generate git diff (save to /tmp/diffs/)
3. Document rollback commands
4. Verify backup integrity
1. Use appropriate agents/skills
2. Implement in modular chunks (<200 lines)
3. Follow existing patterns
4. Update TODO progress
1. Generate final diff
2. Run type checking (if TypeScript)
3. Test build (if applicable)
4. Document changes
.backups/
├── YYYY-MM-DD/
│ ├── HH-MM-SS_{filename}.backup
│ └── HH-MM-SS_{filename}.backup
└── ROLLBACK_GUIDE.md
/tmp/diffs/
├── YYYY-MM-DD_HH-MM-SS_{description}.patch
└── latest.patch
Format: {timestamp}_{original_path_with_underscores}.backup
Examples:
2025-10-24_13-45-30_app_pricing_page.tsx.backup
2025-10-24_13-45-30_components_editor_EditorContainer.tsx.backup
Format: YYYY-MM-DD_HH-MM-SS_{feature_description}.patch
Examples:
2025-10-24_13-45-30_add-footer-links.patch
2025-10-24_14-20-15_pricing-policy-update.patch
Detection:
Action Plan:
Example Refactoring:
Original: EditorContainer.tsx (450 lines)
↓
Modularized:
- EditorContainer.tsx (180 lines) - Main layout
- hooks/useEditorState.ts (80 lines) - State management
- hooks/useKeyboardShortcuts.ts (60 lines) - Keyboard logic
- actions/ttsActions.ts (70 lines) - TTS operations
- actions/mediaActions.ts (60 lines) - Media operations
Analysis Tasks:
Explore - Codebase explorationgeneral-purpose - Complex analysisImplementation Tasks:
frontend-developer - UI componentsbackend-api-developer - API endpointsdatabase-architect - Schema designux-ui-designer - Design specsSkill Integration:
supabase-manager - Database operationssafe-edit (this skill) - All implementations| Task Type | Agent/Skill | Why | |-----------|-------------|-----| | UI Component | frontend-developer | Design system + implementation | | API Endpoint | backend-api-developer | Best practices + patterns | | DB Schema | database-architect | Normalization + indexing | | Bug Analysis | Explore | Deep analysis + reasoning | | File Changes | safe-edit (always) | Backup + rollback safety |
# Before ANY file modification
timestamp=$(date +%Y-%m-%d_%H-%M-%S)
backup_dir=".backups/$(date +%Y-%m-%d)"
mkdir -p "$backup_dir"
cp "path/to/file" "$backup_dir/${timestamp}_${file_slug}.backup"
# Before and after changes
mkdir -p "/tmp/diffs"
timestamp=$(date +%Y-%m-%d_%H-%M-%S)
git diff path/to/file > "/tmp/diffs/${timestamp}_${description}.patch"
cp "/tmp/diffs/${timestamp}_${description}.patch" "/tmp/diffs/latest.patch"
# Before implementation
lines=$(wc -l < "path/to/file")
if [ $lines -gt 200 ]; then
echo "⚠️ File exceeds 200 lines - planning modularization"
# Execute modularization strategy
fi
// For complex UI work
Task({
subagent_type: "frontend-developer",
description: "Implement component",
prompt: "Detailed requirements..."
})
// For analysis
Task({
subagent_type: "Explore",
description: "Analyze codebase",
prompt: "Find patterns and structure..."
})
// Always create TODO list for multi-step tasks
TodoWrite({
todos: [
{ content: "Backup files", status: "in_progress", activeForm: "Backing up files" },
{ content: "Implement feature", status: "pending", activeForm: "Implementing feature" },
{ content: "Verify changes", status: "pending", activeForm: "Verifying changes" }
]
})
# Find backup
ls -lt .backups/$(date +%Y-%m-%d)/
# Restore
cp .backups/2025-10-24/13-45-30_app_pricing_page.tsx.backup app/pricing/page.tsx
# Apply reverse patch
cd /path/to/your/project
patch -R app/pricing/page.tsx < /tmp/diffs/2025-10-24_13-45-30_feature.patch
# If changes are staged but not committed
git restore app/pricing/page.tsx
# If committed but not pushed
git reset --hard HEAD~1
Before ANY implementation, this skill automatically:
.backups/YYYY-MM-DD//tmp/diffs//tmp/diffs/# View recent backups
ls -lt .backups/$(date +%Y-%m-%d)/
# View recent diffs
ls -lt /tmp/diffs/ | head -10
# Restore from backup
cp .backups/YYYY-MM-DD/HH-MM-SS_file.backup original/path
# Apply reverse diff
patch -R path/to/file < /tmp/diffs/YYYY-MM-DD_HH-MM-SS_desc.patch
# Check file sizes
find . -name "*.tsx" -o -name "*.ts" | xargs wc -l | sort -nr | head -20
# Clean old backups (keep 7 days)
find .backups/ -type f -mtime +7 -delete
.backups/ - Backup storage/tmp/diffs/ - Diff storage.claude/skills/safe-edit/SKILL.md - This file.claude/skills/safe-edit/README.md - User documentationdevelopment
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
tools
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
testing
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
tools
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.