vue-component-analyzer

分析 Vue 前端项目的组件依赖关系，从入口文件开始递归分析所有组件，生成组件层级关系图。支持 Vue 2 和 Vue 3 项目，输出包含组件名称、文件路径和所需属性。使用当用户需要分析 Vue 组件结构、排查组件依赖关系或理解项目架构时。

Security Scan

The skill's requested actions and instructions match its stated purpose: it only describes reading and parsing a local Vue project to produce component dependency graphs and does not ask for unrelated credentials, installs, or network endpoints.

Purpose & Capability

The name/description (analyze Vue component dependency graph) align with the instructions and implementation notes (locate entry file, parse .vue files, extract imports/props, generate Markdown/JSON/Mermaid). No unrelated permissions, env vars, or binaries are requested.

Instruction Scope

SKILL.md and implementation.md instruct the agent to read project files, parse templates/scripts/imports, and recurse through component imports. These file and path operations are appropriate and necessary for the stated task. The instructions do not direct the agent to read unrelated system files, environment variables, or send data to external endpoints.

Install Mechanism

This is an instruction-only skill with no install spec and no external downloads; nothing is written to disk by an installer. That is proportionate for a static analysis helper.

Credentials

No environment variables, credentials, or config paths are required. The skill works by reading project source files only, which is consistent with its purpose.

Persistence & Privilege

The skill does not request permanent inclusion (always:false). The default of allowing autonomous invocation is present but not unusual; note that autonomous invocation would let the agent run the file-reading/parsing behavior without manual prompts. This is expected for a code-analysis skill but worth considering in policy decisions.

Assessment

This skill appears coherent and only needs access to your project files to work. Before installing or enabling it for autonomous runs: 1) be aware it will read source files in the project workspace — that can include any secrets embedded in code (API keys, tokens) so only run it in trusted repositories; 2) the implementation notes use regex-based parsing, which is brittle and may miss complex dynamic import patterns or TypeScript edge cases—expect some false negatives; 3) because it is instruction-only and has no install, there are no added binaries or network endpoints, but granting the agent filesystem access is the key permission here; if you are concerned, run it in an isolated/copy workspace or review outputs before sharing them externally.

Vue 组件依赖分析器

功能概述

分析 Vue 项目的组件依赖关系，从入口文件(main.js/main.ts/App.vue)开始递归分析，生成完整的组件层级关系图。

支持特性

• Vue 2 和 Vue 3 项目兼容
• 支持 Options API 和 Composition API
• 识别组件名称、文件路径、props 属性
• 多种输出格式：Markdown 树形、JSON、Mermaid 图表

分析流程

1. 定位入口文件

   • 查找 main.js / main.ts / app.js / app.ts
   • 定位根组件 App.vue

2. 递归分析组件

   • 解析 <template> 中的组件引用
   • 提取 import 语句中的组件依赖
   • 识别 components 选项中注册的组件
   • 递归分析子组件

3. 提取组件信息

   • 组件名称（name 属性或文件名）
   • 组件文件绝对/相对路径
   • Props 定义（名称、类型、是否必填、默认值）

4. 生成输出

   • Markdown 树形结构
   • JSON 结构化数据
   • Mermaid 流程图

输出格式

1. Markdown 树形结构

📦 App (src/App.vue)
├── 📁 components/
│   ├── 📄 Header (src/components/Header.vue)
│   │   ├── props: title(String), showLogo(Boolean)
│   │   └── 📄 UserAvatar (src/components/UserAvatar.vue)
│   │       └── props: src(String), size(Number)
│   └── 📄 Sidebar (src/components/Sidebar.vue)
│       └── props: menuItems(Array), collapsed(Boolean)
└── 📄 Footer (src/components/Footer.vue)
    └── props: copyright(String)

2. JSON 格式

{
  "name": "App",
  "path": "src/App.vue",
  "props": [],
  "children": [
    {
      "name": "Header",
      "path": "src/components/Header.vue",
      "props": [
        { "name": "title", "type": "String", "required": true },
        { "name": "showLogo", "type": "Boolean", "default": true }
      ],
      "children": [...]
    }
  ]
}

3. Mermaid 图表

graph TD
    A[App<br/>src/App.vue] --> B[Header<br/>src/components/Header.vue]
    A --> C[Sidebar<br/>src/components/Sidebar.vue]
    B --> D[UserAvatar<br/>src/components/UserAvatar.vue]
    A --> E[Footer<br/>src/components/Footer.vue]

使用方法

分析当前 Vue 项目的组件结构：

1. 确定项目根目录
2. 查找入口文件和根组件
3. 递归分析所有组件依赖
4. 生成三种格式的分析报告

组件识别规则

Vue 2

• 识别 components: { ComponentName } 选项
• 解析 import ComponentName from './path'
• 识别 <component-name> 和 <ComponentName> 标签

Vue 3

• 支持 <script setup> 语法
• 识别 import ComponentName from './path'
• 解析动态组件 <component :is="...">

Props 提取

• 识别 props: ['prop1', 'prop2'] 数组形式
• 解析 props: { prop1: String, prop2: { type: Object, required: true } } 对象形式
• 支持 TypeScript 类型定义

注意事项

• 忽略第三方库组件（如 Element UI、Ant Design Vue）
• 处理循环依赖（A 引用 B，B 引用 A）
• 支持别名路径解析（@/components/...）
• 异步组件标记为 (async)