Claude-code-skills ln-721-frontend-restructure

Scaffolds new React projects or restructures monoliths to component-based architecture. Use when setting up frontend structure.

install

source · Clone the upstream repo

git clone https://github.com/levnikolaevich/claude-code-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/levnikolaevich/claude-code-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills-catalog/ln-721-frontend-restructure" ~/.claude/skills/levnikolaevich-claude-code-skills-ln-721-frontend-restructure && rm -rf "$T"

manifest: skills-catalog/ln-721-frontend-restructure/SKILL.md

source content

Paths: File paths (
shared/
,
references/
,
../ln-*
) are relative to skills repo root. If not found at CWD, locate this SKILL.md directory and go up one level for repo root. If
shared/
is missing, fetch files via WebFetch from
https://raw.githubusercontent.com/levnikolaevich/claude-code-skills/master/skills/{path}
.

ln-721-frontend-restructure

Type: L3 Worker Category: 7XX Project Bootstrap

Frontend structure worker with two modes: SCAFFOLD (generate minimal React project from template) or RESTRUCTURE (migrate monolith to component-based architecture).

Mode Selection

Mode	When	Input	Output
SCAFFOLD	CREATE pipeline — no existing frontend	Target stack config from ln-720	Minimal React + Vite project (~7 files)
RESTRUCTURE	TRANSFORM pipeline — existing frontend found	Monolithic React source	Component-based architecture

Purpose & Scope

Aspect	Description
Input	Target stack config (SCAFFOLD) or monolithic React source (RESTRUCTURE)
Output	Minimal project (SCAFFOLD) or component-based architecture (RESTRUCTURE)
Framework	React + TypeScript + Vite

Scope boundaries:

SCAFFOLD: generates minimal starter files, no business logic
RESTRUCTURE: restructures existing code, does not add new functionality
Works with React + TypeScript projects
Applies transformation rules from reference files

Workflow

SCAFFOLD Mode (CREATE pipeline)

Phase	Name	Actions	Output
S1	Generate	Create minimal React + Vite + TypeScript project files	~7 starter files
S2	Verify	Check file structure, validate configs	Valid project skeleton

RESTRUCTURE Mode (TRANSFORM pipeline)

Phase	Name	Actions	Output
1	Analyze	Scan source, detect component types, measure complexity	File inventory, complexity metrics
2	Plan	Apply split thresholds, calculate file moves, detect conflicts	Migration plan
3	Execute	Create folders, extract content, update imports	Restructured files
4	Verify	Run build, check imports, validate structure	Build success report

SCAFFOLD Mode Phases

Phase S1: Generate Starter Files

Create minimal React + Vite + TypeScript project.

File	Purpose
`package.json`	Dependencies: react, react-dom, typescript, vite, @vitejs/plugin-react
`vite.config.ts`	Vite config with React plugin, port, proxy settings
`tsconfig.json`	Strict TypeScript config with path aliases
`index.html`	Entry HTML with root div
`src/main.tsx`	React entry point with StrictMode
`src/App.tsx`	Root App component with router placeholder
`src/index.css`	Base styles (reset, variables, layout)

Phase S2: Verify Scaffold

Check	Method	Expected
All files created	File existence check	7 files present
package.json valid	JSON parse	No syntax errors
tsconfig.json valid	JSON parse	No syntax errors
No hardcoded values	Content scan	Project name from config, not hardcoded

RESTRUCTURE Mode Phases

Phase 1: Analyze

Scan current frontend structure and classify components.

Step	Action	Reference
1.1	Scan all `.tsx` and `.ts` files in source	—
1.2	Measure file complexity (lines, hooks, types)	`transformation_rules.md`
1.3	Classify components by category	`component_patterns.md`
1.4	Build import dependency graph	`import_strategy.md`

Output: Component inventory with classifications and metrics.

Phase 2: Plan

Generate migration plan based on analysis.

Step	Action	Reference
2.1	Apply split thresholds to identify files to restructure	`transformation_rules.md`
2.2	Calculate target paths for each file	`react_folder_structure.md`
2.3	Identify import updates needed	`import_strategy.md`
2.4	Detect potential conflicts (name collisions, circular deps)	—

Output: Migration plan with Before/After mapping.

Phase 3: Execute

Apply transformations in correct order.

Step	Action	Notes
3.1	Create directory structure	All target folders
3.2	Extract types to `types.ts`	Types have no dependencies
3.3	Extract constants to `constants.ts`	Constants depend only on types
3.4	Extract hooks to `hooks.ts`	Hooks depend on types, constants
3.5	Extract sub-components	Components use all above
3.6	Create barrel exports ( `index.ts` )	For clean imports
3.7	Update all import paths	Fix references

Order is critical: Execute in sequence to avoid broken imports.

Phase 4: Verify

Validate restructured project.

Check	Command	Expected
TypeScript compilation	`npx tsc --noEmit`	No errors
Build	`npm run build`	Success
No orphan files	Manual check	Source location empty
Imports resolve	Build success	No module not found errors

Transformation Summary

Transformation	Before State	After State
Component Split	Single file >300 lines	Feature folder with co-located files
Type Extraction	Inline interfaces	Separate `types.ts`
Constant Extraction	Inline magic values	Separate `constants.ts`
Hook Extraction	Inline useState/useEffect	Separate `hooks.ts` or shared hooks
UI Component Move	Scattered in features	Centralized in `components/ui/`
Layout Component Move	Mixed with features	Centralized in `components/layout/`

Critical Rules

Mode Awareness: SCAFFOLD creates from template; RESTRUCTURE transforms existing — never mix
Single Responsibility: Handle only frontend structure, no backend changes
Idempotent: Can re-run without duplicate files or corruption
Build Verification: Must verify build passes after changes (RESTRUCTURE:
```
npm run build
```
)
Preserve Functionality: No behavioral changes, only structural (RESTRUCTURE mode)
Backup Strategy: Do not delete source files until verification passes (RESTRUCTURE mode)
Import Consistency: Use path aliases for shared, relative for co-located

Definition of Done

SCAFFOLD mode:

All 7 starter files generated
package.json and tsconfig.json valid
No hardcoded project names (uses config values)

RESTRUCTURE mode:

All source files analyzed and classified
Migration plan generated with Before/After mapping
Directory structure created per template
All extractions completed (types, constants, hooks, components)
Import paths updated throughout project
```
npm run build
```
passes successfully
No orphan imports or missing files
Barrel exports created for shared folders

Risk Mitigation

Risk	Detection	Mitigation
Build failure after restructure	`npm run build` fails	Rollback: restore from source, investigate specific error
Missing imports	Module not found errors	Scan all imports before/after, update missed paths
Circular dependencies	Build warning or runtime error	Analyze dependency graph, break cycles by extracting shared code
Lost functionality	Tests fail or UI broken	Run existing tests before/after transformation
Name collisions	Duplicate export names	Rename with feature prefix before moving

Reference Files

File	Purpose
`references/transformation_rules.md`	Split thresholds, extraction rules, transformation order
`references/component_patterns.md`	Component classification by category
`references/import_strategy.md`	Import update rules, path aliases, barrel exports
`references/react_folder_structure.md`	Target directory structure template

Version: 3.0.0 Last Updated: 2026-02-07