component-usage-analysis

Component Usage Analysis

Analyse component dependencies and usage patterns to support safe refactoring and removal.

Trigger Phrases

• "Find all usages of <component>"
• "Which components use <component>?"
• "Check if <component> can be safely removed"
• "Find components using <component> with property X"
• "Audit dependencies for <component>"
• "What would break if I change <component>?"

Configuration

This skill assumes the component library structure:

apps/component-library/
├── src/components/
│   ├── elements/
│   ├── patterns/
│   ├── template-components/
│   └── templates/

Analysis Methodology

Step 1: Identify the Target

Clarify with the user:

1. Target component: Which component to analyse (e.g., elements/image)
2. Properties of interest: Specific properties to filter by (optional)
3. Analysis goal: Usage audit, removal check, or refactoring impact

Step 2: Twig Include Analysis

Find all components that include the target via Twig.

Search pattern:

grep -rn "{% include \"@<tier>/<component>" src/components/

Example for elements/image:

grep -rn '{% include "@elements/image' src/components/

For each match:

1. Note the file path (consuming component)
2. Extract the with {} block to identify which properties are passed
3. Record whether target properties are present

Extracting the with block:

Twig includes may span multiple lines:

{% include "@elements/image/image.twig" with {
    src: item.image.src,
    alt: item.image.alt,
    description: item.image.description
} %}

Use multi-line search or examine files directly when the with block is complex.

See references/search-patterns.md for detailed patterns.

Step 3: Mock Reference Analysis

Find all components whose mocks reference the target component.

Search pattern:

grep -rn '\$ref: <tier>/<component>#' src/components/

Example for elements/image: