| name | component-inventory |
| description | Audit and inventory existing UI components in a codebase |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
| graph | {"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:design-systems","skill-area:ui-component-libraries"],"roles":["role:product-designer","role:frontend-engineer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]} |
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" }
}
}
Usage Example
const result = await skill.execute({
scanPath: './src',
framework: 'react',
patterns: ['**/*.tsx', '**/*.jsx'],
detectDuplicates: true
});