---
name: velcrafting/ui-refactor-extract
source: https://app.decimal.ai/s/velcrafting-ui-refactor-extract@1/SKILL.md
source_sha256: 12c27725df48
---

# 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.json` if 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
1) Identify the smallest extraction that reduces complexity meaningfully.
2) Preserve public APIs:
   - keep existing props stable unless explicitly requested
   - keep exports stable or update all call sites
3) Extract subcomponents:
   - prefer pure, presentational components
   - pass minimal props
4) Keep behavior stable:
   - no logic changes unless required for extraction correctness
5) Add/adjust tests:
   - ensure at least one test asserts expected render/interaction
6) 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`