# UI Refactor Extract

> Refactor UI code without behavior change (extract/rename/reorganize) while preserving public APIs and adding evidence via tests or inspection.

- Skill: `velcrafting/ui-refactor-extract` (Agent Skill)
- Install (CLI): `npx skillmds@latest add velcrafting/ui-refactor-extract`
- Raw SKILL.md: https://api.skillmd.com/api/skills/velcrafting/ui-refactor-extract/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: velcrafting (https://skillmd.com/u/velcrafting)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/velcrafting/ui-refactor-extract

---


# 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`