velcrafting Skill: frontend/ui-refactor-extract
Purpose
Improve UI maintainability without changing behavior by:
- extracting subcomponents
- renaming for clarity
- reorganizing file structure within existing conventions
- reducing component complexity (“god component” prevention)
Behavior must remain stable. This skill requires evidence.
Inputs
- Target component(s)/route(s)
- Refactor intent (why, what pain)
- Public API constraints (props, exports, routes)
- Repo conventions (from
REPO_PROFILE.jsonif present)
Outputs
- Refactored UI modules with smaller components
- Updated imports/exports as needed
- Evidence of no behavior change:
- tests updated/added OR
- deterministic before/after inspection notes if tests are unavailable
Non-goals
- Adding new features
- Visual redesign
- Changing data contracts
- Sweeping refactors outside the touched surface
Workflow
- Identify the smallest extraction that reduces complexity meaningfully.
- Preserve public APIs:
- keep existing props stable unless explicitly requested
- keep exports stable or update all call sites
- Extract subcomponents:
- prefer pure, presentational components
- pass minimal props
- Keep behavior stable:
- no logic changes unless required for extraction correctness
- Add/adjust tests:
- ensure at least one test asserts expected render/interaction
- Run validations from profile.
Checks
- No behavior change intended or introduced
- Public API compatibility preserved (props/exports/import paths)
- Typecheck/lint/tests pass if configured
- Component complexity reduced (clearer boundaries, fewer responsibilities)
Failure modes
- Refactor drifts into feature work → stop and propose separate skill invocation.
- Extraction reveals hidden state coupling → recommend
frontend/state-modeling. - Tests unavailable → provide deterministic inspection steps and keep diff minimal.
Telemetry
Log:
- skill:
frontend/ui-refactor-extract - refactor_type:
extract | rename | reorganize - evidence:
tests | inspection - files_touched
- outcome:
success | partial | blocked