Features
- 1. Universal Routing Analysis: Automatically identifies and parses routing configuration files of different frontend frameworks, extracting routing paths, component associations, and other information.
- Intelligent Module Recognition: Analyzes directory structure and component dependencies to identify project module divisions, regardless of framework.
- Standardized Mapping Generation: Generates clear mapping relationships between modules and pages, including parent-child relationships, hierarchical structures, etc.
- Intelligent Navigation Support: The generated mapping document can be directly used in intelligent navigation systems, supporting quick positioning and navigation.
Technical Implementation
Core Functions
- 1. Directory Scanning: Traverses the specified directory, identifies key files and directory structures, and adapts to different project organization methods.
- Route Parsing: Parses common routing configurations such as Vue Router, React Router, Angular Router, etc.
- Module Recognition: Intelligently identifies modules based on directory structure, naming conventions, and component reference relationships.
- Mapping Generation: Generates standardized module-page mapping documents, supporting multiple output formats.
Supported Frameworks
- - Vue 2/3
- React
- Angular
- Svelte
- Solid
Usage
When user needs to analyze a frontend project structure, invoke this skill directly:
- 1. User provides the frontend project directory path
- Skill automatically scans and analyzes
- Generates module-page mapping document
Input Requirements
- - User needs to provide the directory path of the frontend project to be analyzed
- Optional: specify framework type (vue, react, angular, svelte, solid), default is auto-detection
- Optional: specify output format (json, markdown, html)
- Optional: specify output file path
Output
Generates a mapping document containing:
- - Project Info: project name, framework type, analysis date
- Module List: module name, route path, component file, nested sub-modules
- Component List: component name, file path, which modules use it
特性
- 1. 通用路由分析：自动识别并解析不同前端框架的路由配置文件，提取路由路径、组件关联等信息。
- 智能模块识别：分析目录结构和组件依赖关系，识别项目模块划分，不受框架限制。
- 标准化映射生成：生成清晰的模块与页面映射关系，包括父子关系、层级结构等。
- 智能导航支持：生成的映射文档可直接用于智能导航系统，支持快速定位与跳转。
技术实现
核心功能
- 1. 目录扫描：遍历指定目录，识别关键文件和目录结构，适配不同项目组织方式。
- 路由解析：解析常见路由配置，如 Vue Router、React Router、Angular Router 等。
- 模块识别：基于目录结构、命名规范和组件引用关系，智能识别模块。
- 映射生成：生成标准化的模块-页面映射文档，支持多种输出格式。
支持的框架
- - Vue 2/3
- React
- Angular
- Svelte
- Solid
使用方法
当用户需要分析前端项目结构时，直接调用本技能：
- 1. 用户提供前端项目目录路径
- 技能自动扫描并分析
- 生成模块-页面映射文档
输入要求
- - 用户需提供待分析前端项目的目录路径
- 可选：指定框架类型（vue、react、angular、svelte、solid），默认为自动检测
- 可选：指定输出格式（json、markdown、html）
- 可选：指定输出文件路径
输出
生成包含以下内容的映射文档：
- - 项目信息：项目名称、框架类型、分析日期
- 模块列表：模块名称、路由路径、组件文件、嵌套子模块
- 组件列表：组件名称、文件路径、被哪些模块使用
