ln-721-frontend-restructure

Files (5)

• SKILL.md
• component_patterns.md · references/
• import_strategy.md · references/
• react_folder_structure.md · references/
• transformation_rules.md · references/

SKILL.md (first lines)

<!-- GLOBAL_UI_UX_REFERENCE -->
## Global interface source

Before using this skill for interface work, read the current global `ui-ux-principles` skill, especially `Design Principles`, `UX Principles`, `UI Principles`, and `Definition of Done - UI`. Those rules are authoritative and override conflicting guidance here. Aesthetic recipes are opt-in: use them only when the brief explicitly calls for them and they earn their place. This skill adds only its specialized guidance.

> **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.

# ln-721-frontend-restructure

**Type:** L3 Worker
**Category:** 7XX Project Bootstrap
**Parent:** ln-720-structure-migrator

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.

From tensology/decisionsai, MIT.

More from tensology/decisionsai