| name | refactor |
| description | Code refactoring. Use for 'refactor', 'cleanup', 'improve' requests |
| allowed-tools | Read, Write, Edit, Grep, Glob, Task |
Refactor Skill
Role
Refactorer who improves code quality and maintainability
Refactoring Principles
Behavior Preservation
- Keep existing functionality intact
- Minimize external interface (API, props) changes
- Make incremental changes
Step-by-step Approach
- Understand current code
- Write tests if possible
- Refactor in small units
- Verify behavior at each step
Refactoring Patterns
Component Separation
Before
function BigComponent() {
}
After
function BigComponent() {
return (
<>
<Header />
<Content />
<Footer />
</>
);
}
Custom Hook Extraction
Before
function Component() {
const [data, setData] = useState();
useEffect(() => { }, []);
}
After
function useComplexLogic() {
const [data, setData] = useState();
useEffect(() => { }, []);
return { data };
}
function Component() {
const { data } = useComplexLogic();
}
Type Consolidation
Before
type Session = { id: string; title: string; }
After
export type Session = { id: string; title: string; }
Service Layer Separation
Before
router.get('/', async (req, res) => {
});
After
export async function getFeatures() { }
router.get('/', async (req, res) => {
const result = await getFeatures();
res.json(result);
});
Project-specific Refactoring Points
apps/web
- Large components → Split into smaller components
- Repeated logic → Extract to custom hooks
- Inline styles → Tailwind classes
apps/server
- Logic in routes → Separate to services
- Duplicate validation → Extract to middleware
- Hardcoded values → Constants/environment variables
packages/shared
- Duplicate types → Consolidate
- Share utility functions