refactoring
Refactoring
Quick Start
- Define scope and boundaries
- Cover with tests
- Refactor in small steps (one technique per commit)
- Verify after each change
Workflow
Before Refactoring
- Define scope, find boundaries (junction points between code to change and everything else)
- Cover with tests (edge cases, explicit/implicit input, specify desired result on boundaries)
- Make linter/compiler stricter
More from iamkhan21/skills
frontend-init
Standardizes an already-scaffolded frontend TypeScript web app with baseline tooling, structure, and conventions. Use when setting up or aligning pnpm + TypeScript strict + path aliases, Vitest, Oxc (oxlint/oxfmt), and a progressive FSD-style folder layout, or when the user asks about initial project rules and UI library choices.
9react-testing
Testing React components, hooks, and interactions with React Testing Library. Use when writing new tests, debugging failing tests, refactoring test code, setting up test infrastructure, mocking APIs in React tests, or when the user mentions Jest/Vitest with React, `render`, `screen`, `userEvent`, `waitFor`, `findBy`, MSW, or testing patterns. Also use when the user asks how to test a specific React component or hook, even if they don't mention "testing library" explicitly.
8typescript-refactoring
Use this skill when improving existing TypeScript or JavaScript code without intentionally changing product behavior. Reach for it whenever the user says a file or module is too big, messy, brittle, hard to test, full of duplication, deeply nested, over-coupled, confusingly named, legacy, or in need of cleanup, restructuring, simplification, or technical-debt reduction. Also use it when the user asks how to safely split a large component, untangle a service, reduce complexity, isolate side effects, simplify types, or plan a refactor, even if they never say the word "refactor.
5modern-ui-page
Creates modern full-page UI with strong visual direction while preserving accessibility and UX fundamentals. Use when the user asks for a landing page, marketing page, dashboard page, homepage, redesign, or to make a page feel more polished, modern, or premium.
1