Component inventory

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/component-inventory

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill component-inventory

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Audit and inventory existing UI components in a codebase

SKILL.md

3.1 KB, as published. Nobody here has run it

Component Inventory Skill

Purpose

Scan codebases to audit and inventory existing UI components, identifying variations, usage patterns, and opportunities for consolidation.

Capabilities

Scan codebase for React/Vue/Angular components
Identify component variations and duplicates
Map component usage across the application
Generate comprehensive inventory reports
Detect inconsistencies in component implementations
Track component dependencies

Target Processes

component-library.js
design-system.js

Integration Points

React component analysis via AST parsing
Vue SFC analysis
TypeScript/JavaScript AST parsing
CSS-in-JS detection

Input Schema

{
  "type": "object",
  "properties": {
    "scanPath": {
      "type": "string",
      "description": "Root path to scan for components"
    },
    "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"]
}

Output Schema

{
  "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": "Similar or duplicate components"
    },
    "variations": {
      "type": "object",
      "description": "Component variations grouped by type"
    },
    "usageMap": {
      "type": "object",
      "description": "Component usage locations"
    },
    "statistics": {
      "type": "object",
      "properties": {
        "totalComponents": { "type": "number" },
        "uniqueComponents": { "type": "number" },
        "averagePropsCount": { "type": "number" }
      }
    },
    "recommendations": {
      "type": "array",
      "description": "Consolidation recommendations"
    }
  }
}

Usage Example

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