ln-721-frontend-restructure by levnikolaevich/claude-code-skills
npx skills add https://github.com/levnikolaevich/claude-code-skills --skill ln-721-frontend-restructure路径说明: 文件路径(
shared/、references/、../ln-*)是相对于技能仓库根目录的。如果在当前工作目录未找到,请定位此 SKILL.md 文件所在目录并向上返回一级以找到仓库根目录。如果缺少shared/目录,请通过 WebFetch 从https://raw.githubusercontent.com/levnikolaevich/claude-code-skills/master/skills/{path}获取文件。
类型: L3 工作者 类别: 7XX 项目引导 父级: ln-720-structure-migrator
前端结构工作者,具有两种模式:SCAFFOLD(从模板生成最小化 React 项目)或 RESTRUCTURE(将单体应用迁移至基于组件的架构)。
| 模式 | 适用场景 | 输入 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 输出 |
|---|
| SCAFFOLD | CREATE 流水线 — 无现有前端 | 来自 ln-720 的目标技术栈配置 | 最小化 React + Vite 项目(约 7 个文件) |
| RESTRUCTURE | TRANSFORM 流水线 — 发现现有前端 | 单体式 React 源代码 | 基于组件的架构 |
| 方面 | 描述 |
|---|---|
| 输入 | 目标技术栈配置(SCAFFOLD)或单体式 React 源代码(RESTRUCTURE) |
| 输出 | 最小化项目(SCAFFOLD)或基于组件的架构(RESTRUCTURE) |
| 框架 | React + TypeScript + Vite |
范围边界:
| 阶段 | 名称 | 操作 | 输出 |
|---|---|---|---|
| S1 | 生成 | 创建最小化 React + Vite + TypeScript 项目文件 | 约 7 个启动文件 |
| S2 | 验证 | 检查文件结构,验证配置 | 有效的项目骨架 |
| 阶段 | 名称 | 操作 | 输出 |
|---|---|---|---|
| 1 | 分析 | 扫描源代码,检测组件类型,评估复杂度 | 文件清单,复杂度指标 |
| 2 | 规划 | 应用拆分阈值,计算文件移动路径,检测冲突 | 迁移计划 |
| 3 | 执行 | 创建文件夹,提取内容,更新导入 | 重构后的文件 |
| 4 | 验证 | 运行构建,检查导入,验证结构 | 构建成功报告 |
创建最小化 React + Vite + TypeScript 项目。
| 文件 | 用途 |
|---|---|
package.json | 依赖项:react, react-dom, typescript, vite, @vitejs/plugin-react |
vite.config.ts | Vite 配置,包含 React 插件、端口、代理设置 |
tsconfig.json | 严格的 TypeScript 配置,包含路径别名 |
index.html | 入口 HTML,包含根 div |
src/main.tsx | React 入口点,包含 StrictMode |
src/App.tsx | 根 App 组件,包含路由占位符 |
src/index.css | 基础样式(重置、变量、布局) |
| 检查项 | 方法 | 预期结果 |
|---|---|---|
| 所有文件已创建 | 文件存在性检查 | 7 个文件存在 |
| package.json 有效 | JSON 解析 | 无语法错误 |
| tsconfig.json 有效 | JSON 解析 | 无语法错误 |
| 无硬编码值 | 内容扫描 | 项目名称来自配置,而非硬编码 |
扫描当前前端结构并对组件进行分类。
| 步骤 | 操作 | 参考 |
|---|---|---|
| 1.1 | 扫描源代码中的所有 .tsx 和 .ts 文件 | — |
| 1.2 | 评估文件复杂度(行数、钩子、类型) | transformation_rules.md |
| 1.3 | 按类别对组件进行分类 | component_patterns.md |
| 1.4 | 构建导入依赖图 | import_strategy.md |
输出: 包含分类和指标的组件清单。
基于分析生成迁移计划。
| 步骤 | 操作 | 参考 |
|---|---|---|
| 2.1 | 应用拆分阈值以识别需要重构的文件 | transformation_rules.md |
| 2.2 | 计算每个文件的目标路径 | react_folder_structure.md |
| 2.3 | 识别所需的导入更新 | import_strategy.md |
| 2.4 | 检测潜在冲突(名称冲突、循环依赖) | — |
输出: 包含“重构前/后”映射的迁移计划。
按正确顺序应用转换。
| 步骤 | 操作 | 备注 |
|---|---|---|
| 3.1 | 创建目录结构 | 所有目标文件夹 |
| 3.2 | 提取类型到 types.ts | 类型无依赖 |
| 3.3 | 提取常量到 constants.ts | 常量仅依赖于类型 |
| 3.4 | 提取钩子到 hooks.ts | 钩子依赖于类型、常量 |
| 3.5 | 提取子组件 | 组件使用以上所有内容 |
| 3.6 | 创建桶导出(index.ts) | 用于简洁导入 |
| 3.7 | 更新所有导入路径 | 修复引用 |
顺序至关重要: 按顺序执行以避免导入中断。
验证重构后的项目。
| 检查项 | 命令 | 预期结果 |
|---|---|---|
| TypeScript 编译 | npx tsc --noEmit | 无错误 |
| 构建 | npm run build | 成功 |
| 无孤立文件 | 手动检查 | 源代码位置为空 |
| 导入解析 | 构建成功 | 无“模块未找到”错误 |
| 转换 | 重构前状态 | 重构后状态 |
|---|---|---|
| 组件拆分 | 单个文件 >300 行 | 功能文件夹,包含共置文件 |
| 类型提取 | 内联接口 | 独立的 types.ts |
| 常量提取 | 内联魔数 | 独立的 constants.ts |
| 钩子提取 | 内联 useState/useEffect | 独立的 hooks.ts 或共享钩子 |
| UI 组件移动 | 分散在各功能中 | 集中到 components/ui/ |
| 布局组件移动 | 与功能混合 | 集中到 components/layout/ |
npm run build)SCAFFOLD 模式:
RESTRUCTURE 模式:
npm run build 成功通过| 风险 | 检测方法 | 缓解措施 |
|---|---|---|
| 重构后构建失败 | npm run build 失败 | 回滚:从源文件恢复,调查具体错误 |
| 导入缺失 | 模块未找到错误 | 扫描所有导入(重构前/后),更新遗漏的路径 |
| 循环依赖 | 构建警告或运行时错误 | 分析依赖图,通过提取共享代码打破循环 |
| 功能丢失 | 测试失败或 UI 损坏 | 在转换前后运行现有测试 |
| 名称冲突 | 重复的导出名称 | 在移动前使用功能前缀重命名 |
| 文件 | 用途 |
|---|---|
references/transformation_rules.md | 拆分阈值、提取规则、转换顺序 |
references/component_patterns.md | 按类别进行组件分类 |
references/import_strategy.md | 导入更新规则、路径别名、桶导出 |
references/react_folder_structure.md | 目标目录结构模板 |
版本: 3.0.0 最后更新: 2026-02-07
每周安装数
153
仓库
GitHub 星标数
245
首次出现
2026 年 1 月 24 日
安全审计
安装于
claude-code140
opencode136
codex136
cursor136
gemini-cli135
github-copilot130
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. Ifshared/is missing, fetch files via WebFetch fromhttps://raw.githubusercontent.com/levnikolaevich/claude-code-skills/master/skills/{path}.
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 | 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 |
| 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:
| 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 |
| 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 |
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 |
| 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 |
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.
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.
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) |
Order is critical: Execute in sequence to avoid broken imports.
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 | 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 |
npm run build)SCAFFOLD mode:
RESTRUCTURE mode:
npm run build passes successfully| 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 |
| 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
Weekly Installs
153
Repository
GitHub Stars
245
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code140
opencode136
codex136
cursor136
gemini-cli135
github-copilot130
通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南
33,600 周安装
| Root App component with router placeholder |
src/index.css | Base styles (reset, variables, layout) |
| For clean imports |
| 3.7 | Update all import paths | Fix references |
| Mixed with features |
Centralized in components/layout/ |