Improves code structure while preserving behavior through test verification. Use when cleaning up code, reducing duplication, simplifying complexity, or reorganizing modules.
Refactors code structure while preserving behavior through test verification.
/plugin marketplace add rileyhilliard/claude-essentials/plugin install ce@claude-essentialsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/react-typescript.mdCore principle: Refactoring changes structure, not functionality. If behavior changes, you're rewriting.
Refactoring Progress:
- [ ] Phase 1: Understand current behavior
- [ ] Phase 2: Verify behavior-driven tests exist
- [ ] Phase 3: Identify issues
- [ ] Phase 4: Plan incremental steps
- [ ] Phase 5: Execute with continuous verification
Tests must verify BEHAVIOR, not implementation:
// ✅ Behavior-driven - survives refactoring
test('displays error when API returns 404', async () => {
server.use(http.get('/api/users', () => new HttpResponse(null, { status: 404 })));
render(<UserList />);
expect(await screen.findByText(/not found/i)).toBeInTheDocument();
});
// ❌ Implementation-detail - breaks during refactoring
test('sets error state', () => {
wrapper.instance().handleError(new Error('404'));
expect(wrapper.state('error')).toBe('404');
});
If tests are missing: Add behavior-driven tests first using Skill(ce:writing-tests).
| Issue | Indicators | Fix |
|---|---|---|
| Complexity | Deep nesting, >50 line functions | Extract smaller functions |
| Duplication | Copy-pasted code | Extract shared utility |
| Poor naming | x, data, temp | Rename to intent |
| Type gaps | any types, assertions | Add proper types |
If something breaks: STOP. Use Skill(ce:systematic-debugging). Don't proceed until understood.
| Smell | Refactoring |
|---|---|
| Long function | Extract smaller functions |
| Duplicate code | Extract to shared utility |
| Deep nesting | Early returns, guard clauses |
| Magic numbers | Named constants |
| Large component | Split into smaller components |
| Long parameter list | Parameter object |
Stop when code is clear, duplication eliminated, types explicit, tests pass.
Don't continue if:
For React/TypeScript patterns, see references/react-typescript.md.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.