Frontend Component Extractor Claude Skill Template

---
name: frontend-component-extractor
description: Let Claude split large React views into focused components while preserving state flow and UI behavior.
---

# Frontend Component Extractor

## When To Use
Use when a page or component becomes too large, hard to test, or hard to reason about.

## What Claude Should Optimize For
- Keeps components focused
- Reduces prop clutter
- Preserves styling

## Workflow
1. Identify natural UI sections.
2. Separate server state from local UI state.
3. Extract components with narrow props.
4. Run type and visual checks.

## Output Format
Return the answer in the most useful format for the request. Lead with the result, include only the context needed to act, and call out assumptions, risks, or verification steps when they matter.

## Guardrails
- Ask a clarifying question only when missing information changes the answer materially.
- Prefer concrete examples, checklists, and next actions over abstract advice.
- Keep the response concise unless the user asks for depth.
- Do not invent facts, sources, metrics, or code behavior.

## Tags
- React
- components
- frontend
- refactor