Analyze JSX/React component prop usage across files and directories.

Use this tool when you need to:

• Understand what props a component accepts

• Find all components in a codebase and their props

• Analyze prop usage patterns in a project

• Get TypeScript interface information for components

EXAMPLES:

1. Analyze all components in current directory: { "includeTypes": true }

2. Analyze all components in src/components: { "path": "src/components", "includeTypes": true }

3. Find all props for Button component in current directory: { "componentName": "Button", "includeTypes": true }

4. Find all usages of onClick prop in current directory: { "propName": "onClick", "includeTypes": false }

5. Analyze specific file with type info: { "path": "src/App.tsx", "includeTypes": true }

Returns:

• Component names and their props

• Prop types (when includeTypes is true)

• File locations where components are defined

Find all usages of a specific prop across JSX/React files.

Use this tool when you need to:

• Locate where a prop is used throughout the codebase

• Find all components that use a specific prop like "onClick", "className", etc.

• Audit prop usage for refactoring or deprecation

• Understand prop propagation patterns

EXAMPLES:

1. Find all onClick handlers in current directory: { "propName": "onClick" }

2. Find className usage in components directory: { "propName": "className", "directory": "src/components" }

3. Find variant prop only on Button components in current directory: { "propName": "variant", "componentName": "Button" }

4. Find all disabled props in specific directory: { "propName": "disabled", "directory": "src/forms" }

Returns:

• List of component instances using the prop

• File paths and line numbers

• Values passed to the prop

Get detailed information about all props used by a specific component.

Use this tool when you need to:

• Understand what props a component accepts and uses

• Document component APIs

• Check if a component has certain props before using it

• Analyze component interfaces

EXAMPLES:

1. Get all props for Button component in current directory: { "componentName": "Button" }

2. Check Modal component props in specific directory: { "componentName": "Modal", "directory": "src/components" }

3. Document Card component API in UI directory: { "componentName": "Card", "directory": "src/ui" }

4. Analyze Input component interface in current directory: { "componentName": "Input" }

Returns:

• All props used by the component

• Prop types and default values

• Usage statistics across the codebase

Find component instances that are missing a required prop (e.g., Select components without width prop).

Use this tool when you need to:

• Audit components for missing required props

• Ensure accessibility props are present (e.g., missing aria-label)

• Check for missing styling props (e.g., missing width or height)

• Enforce prop requirements across the codebase

• Refactor components and ensure all usages are updated

EXAMPLES:

1. Find Select components missing width prop in current directory: { "componentName": "Select", "requiredProp": "width" }

2. Audit Image components for missing alt text in current directory: { "componentName": "Image", "requiredProp": "alt" }

3. Find Button components missing type prop in src directory: { "componentName": "Button", "requiredProp": "type", "directory": "src" }

4. Check Input components for missing label in forms directory: { "componentName": "Input", "requiredProp": "aria-label", "directory": "src/forms" }

Returns:

• List of component instances missing the required prop

• File paths and line numbers

• Existing props on those instances

• Summary statistics (total instances vs missing count)