ln-721-frontend-restructure
Scaffolds new React projects or restructures monoliths to component-based architecture. Use when setting up frontend structure.
- Installs
- 378
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/levnikolaevich/claude-code-skills --skill ln-721-frontend-restructure- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ln-721-frontend-restructure automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Paths: File paths (
references/,../ln-*) are relative to this skill directory.
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 buildpasses 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
FAQ
What does the ln-721-frontend-restructure skill do?
Scaffolds new React projects or restructures monoliths to component-based architecture. Use when setting up frontend structure.
How do I install ln-721-frontend-restructure?
Run npx skills add https://github.com/levnikolaevich/claude-code-skills --skill ln-721-frontend-restructure in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ln-721-frontend-restructure/ (personal) or .claude/skills/ln-721-frontend-restructure/ (project).
Which AI agents can use ln-721-frontend-restructure?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ln-721-frontend-restructure safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ln-721-frontend-restructure?
It is published by levnikolaevich in levnikolaevich/claude-code-skills. It has 378 recorded installs.
More from levnikolaevich/claude-code-skills
ln-100-documents-pipeline
levnikolaevich/claude-code-skills
Creates complete project documentation system (project docs, reference, tasks, tests). Use when bootstrapping docs from scratch or regenerating all.
ln-620-codebase-auditor
levnikolaevich/claude-code-skills
Use when auditing the codebase through the evaluation platform with mandatory research, coordinated domain audit workers, and structured summaries.
ln-775-api-docs-generator
levnikolaevich/claude-code-skills
Configures Swagger/OpenAPI documentation for backend APIs. Use when adding interactive API docs to a project.
ln-624-code-quality-auditor
levnikolaevich/claude-code-skills
Checks cyclomatic complexity, nesting, long methods, god classes, O(n2), N+1 queries, constants management. Use when auditing code quality.
ln-782-test-runner
levnikolaevich/claude-code-skills
Executes all test suites and reports results with coverage. Use when verifying that test infrastructure works after bootstrap.
ln-634-test-coverage-auditor
levnikolaevich/claude-code-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.