OpenClaw

analyze-frontend-structure

This skill is used to scan any frontend project directory, automatically analyze routing structure and module division, and generate a universal module-page mapping document for use by intelligent navigation systems. It is suitable for various frontend frameworks and project structures.

damutou950 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install damutou95/analyze-frontend-structure

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

Features

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

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:

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

来源信息

Source: github
Repository: openclaw/skills
Path: skills/damutou95/analyze-frontend-structure
Version: —
Commit: 71791b44cdc254bdba486600283df497cfb208bc
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

## Features

1. **Universal Routing Analysis**: Automatically identifies and parses routing configuration files of different frontend frameworks, extracting routing paths, component associations, and other information.
2. **Intelligent Module Recognition**: Analyzes directory structure and component dependencies to identify project module divisions, regardless of framework.
3. **Standardized Mapping Generation**: Generates clear mapping relationships between modules and pages, including parent-child relationships, hierarchical structures, etc.
4. **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.
2. **Route Parsing**: Parses common routing configurations such as Vue Router, React Router, Angular Router, etc.
3. **Module Recognition**: Intelligently identifies modules based on directory structure, naming conventions, and component reference relationships.
4. **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
2. Skill automatically scans and analyzes
3. 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...

搜索