Ln 721 Frontend Restructure

ln-721-frontend-restructure

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

boisenoise/skills-collections·0installs10stars

SKILL.md

Full skill instructions

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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/boisenoise/skills-collections --skill levn-ln-721-frontend-restructure

View on GitHub

skills/levn-ln-721-frontend-restructure/SKILL.md

auth0-automation
Automate Auth0 tasks via Rube MCP (Composio). Always search tools first for current schemas.
0 installs
seo-content-auditor
Analyzes provided content for quality, E-E-A-T signals, and SEO best practices. Scores content and provides improvement recommendations based on established guidelines.
0 installs
lambda
AWS Lambda serverless functions for event-driven compute. Use when creating functions, configuring triggers, debugging invocations, optimizing cold starts, setting up event source mappings, or managing layers.
0 installs
azure-mgmt-fabric-dotnet
Azure Resource Manager SDK for Fabric in .NET.
0 installs

More skills from boisenoise

boisenoise/skills-collections

database-cloud-optimization-cost-optimize

You are a cloud cost optimization expert specializing in reducing infrastructure expenses while maintaining performance and reliability. Analyze cloud spending, identify savings opportunities, and implement cost-effective architectures across AWS, Azure, and GCP.

10 0

View

boisenoise/skills-collections

postmark-automation

Automate Postmark email delivery tasks via Rube MCP (Composio): send templated emails, manage templates, monitor delivery stats and bounces. Always search tools first for current schemas.

10 0

View

boisenoise/skills-collections

game-development

Game development orchestrator. Routes to platform-specific skills based on project needs.

10 0

View

boisenoise/skills-collections

test-fixing

Systematically identify and fix all failing tests using smart grouping strategies. Use when explicitly asks to fix tests (\"fix these tests\", \"make tests pass\"), reports test failures (\"tests are failing\", \"test suite is broken\"), or completes implementation and wants tests passing.

10 0

View

boisenoise/skills-collections

notebooklm

Interact with Google NotebookLM to query documentation with Gemini's source-grounded answers. Each question opens a fresh browser session, retrieves the answer exclusively from your uploaded documents, and closes.

10 0

View

boisenoise/skills-collections

agent-evaluation

Testing and benchmarking LLM agents including behavioral testing,

10 0

View

boisenoise/skills-collections

clickup-automation

Automate ClickUp project management including tasks, spaces, folders, lists, comments, and team operations via Rube MCP (Composio). Always search tools first for current schemas.

10 0

View

boisenoise/skills-collections

wordpress-penetration-testing

Assess WordPress installations for common vulnerabilities and WordPress 7.0 attack surfaces.

10 0

View

boisenoise/skills-collections

ln-761-secret-scanner

Scans codebase for hardcoded secrets with severity classification and remediation guidance. Use when auditing a project for leaked credentials.

10 0

View

boisenoise/skills-collections

azure-monitor-ingestion-java

Azure Monitor Ingestion SDK for Java. Send custom logs to Azure Monitor via Data Collection Rules (DCR) and Data Collection Endpoints (DCE).

10 0

View

boisenoise/skills-collections

ln-513-agent-reviewer

Runs parallel external agent reviews (Codex + Gemini) on code changes. Process-as-arrive, critical verification with debate. Returns filtered suggestions.

10 0

View

boisenoise/skills-collections