# Component Inventory Skill

Audit and inventory UI components in a codebase for design system planning.

## Overview

This skill scans codebases to create comprehensive inventories of UI components, helping identify consolidation opportunities and design system foundations.

## Key Features

- **Multi-Framework**: React, Vue, Angular, Svelte support
- **Duplicate Detection**: Find similar components
- **Usage Mapping**: Track where components are used
- **Props Analysis**: Document component interfaces
- **Recommendations**: Consolidation suggestions

## When to Use

- Starting a design system initiative
- Auditing component consistency
- Planning component library migration
- Identifying technical debt in UI code

## Analysis Outputs

| Output | Description |
|--------|-------------|
| Component List | All discovered components |
| Duplicates | Similar implementations |
| Variations | Different versions of same concept |
| Usage Map | Where each component is used |
| Statistics | Quantitative metrics |

## Related Components

- **Skills**: design-system-validator
- **Agents**: design-documentation-agent, storybook-integration-agent
- **Processes**: component-library.js, design-system.js
