---
name: handoff-and-refactor
description: Use after design or implementation to package handoff notes, refactor UI code, split god components, document tokens, and prepare maintainable frontend deliverables.
---

# Handoff and Refactor

Use this skill after design implementation or when an interface needs production hardening.

## Handoff package

Include only useful handoff material:

- Files changed.
- Components created or modified.
- Tokens added or updated.
- State coverage.
- Accessibility considerations.
- Verification run.
- Known caveats.
- Next steps.

## Refactor triggers

Refactor when:

- A file approaches 1000 lines.
- A component has unrelated responsibilities.
- Class strings are repeatedly duplicated.
- Surface/radius/spacing decisions are hard-coded repeatedly.
- Theme values diverge between light and dark.
- State handling is interleaved with visual primitives.

## Refactor shape

Separate:

- `tokens` or CSS variables.
- Primitive UI components.
- Product components.
- Screen composition.
- Hooks and data access.
- Test fixtures or sample data.

## Completion note

Keep final notes concise. State what changed, where to review it, what was verified, and what remains uncertain.