Claude Code Front Refactor
Modernize your frontend code without touching its behavior, directly from Claude Code.
Claude Code Front Refactor is a Claude Code skill that rewrites frontend files with improved naming, simplified logic, dead code removal, and modern syntax. Using a single slash command, preview mode analyses the file and outputs a structured diff of all proposed changes, apply mode rewrites it. Compatible with JavaScript, TypeScript, React, CSS, Sass, Vue, Svelte, and Astro, it covers a wide range of the frontend stack.
git clone https://github.com/Effeilo/claude-code-frontend-skills.git
Skill for Claude Code
See the CHANGELOG
Key Features of Claude Code Front Refactor
- 🔧 Two modes: Preview (structured diff, file untouched) or Apply (rewrites the file with all changes)
- 🌐 Supports 8 file types: JS, TS, React (JSX/TSX), CSS, Sass, Vue, Svelte, Astro
- 📦 Four refactoring categories: DEAD (dead code removal), NAMING (naming improvements), SIMPLIFY (logic simplification), MODERN (syntax modernisation)
- 🔒 Behavior-preserving: changes that affect exported symbols, public APIs, or cross-file references are flagged in Notes, never applied silently
- 📍 Every proposed change includes a line reference, a before/after snippet, and a one-sentence reason
- 🔀 Safe-by-default: cross-file renames and public API changes are reported but never applied automatically
- ✨ Context7 integration: if available, enriches the refactoring pass with up-to-date framework docs to catch deprecated patterns and their modern replacements
- ⚡ Optimized loading: sub-files per language, only the relevant rules are loaded per run
Part of the Claude Code Frontend Skills collection.
