---

name: component-inventory description: 审计和盘点代码库中现有的UI组件 allowed-tools:

• Read
• Write
• Edit
• Bash
• Glob
• Grep

---

组件库存技能

目的

扫描代码库以审计和盘点现有的UI组件，识别变体、使用模式以及整合机会。

能力

• 扫描代码库中的React/Vue/Angular组件
• 识别组件变体和重复项
• 映射组件在应用程序中的使用情况
• 生成全面的库存报告
• 检测组件实现中的不一致性
• 追踪组件依赖关系

目标流程

• component-library.js
• design-system.js

集成点

• 通过AST解析进行React组件分析
• Vue单文件组件分析
• TypeScript/JavaScript AST解析
• CSS-in-JS检测

输入模式

{
  "type": "object",
  "properties": {
    "scanPath": {
      "type": "string",
      "description": "扫描组件的根路径"
    },
    "framework": {
      "type": "string",
      "enum": ["react", "vue", "angular", "svelte", "auto"],
      "default": "auto"
    },
    "patterns": {
      "type": "array",
      "items": { "type": "string" },
      "default": ["**/*.tsx", "**/*.jsx", "**/*.vue"]
    },
    "excludePaths": {
      "type": "array",
      "items": { "type": "string" },
      "default": ["node_modules", "dist", "build"]
    },
    "analyzeProps": {
      "type": "boolean",
      "default": true
    },
    "detectDuplicates": {
      "type": "boolean",
      "default": true
    }
  },
  "required": ["scanPath"]
}

输出模式

{
  "type": "object",
  "properties": {
    "components": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "path": { "type": "string" },
          "props": { "type": "array" },
          "usageCount": { "type": "number" }
        }
      }
    },
    "duplicates": {
      "type": "array",
      "description": "相似或重复的组件"
    },
    "variations": {
      "type": "object",
      "description": "按类型分组的组件变体"
    },
    "usageMap": {
      "type": "object",
      "description": "组件使用位置"
    },
    "statistics": {
      "type": "object",
      "properties": {
        "totalComponents": { "type": "number" },
        "uniqueComponents": { "type": "number" },
        "averagePropsCount": { "type": "number" }
      }
    },
    "recommendations": {
      "type": "array",
      "description": "整合建议"
    }
  }
}

使用示例

const result = await skill.execute({
  scanPath: './src',
  framework: 'react',
  patterns: ['**/*.tsx', '**/*.jsx'],
  detectDuplicates: true
});