Can it help with major version migrations?

Yes, it can compare usage between different versions and categorize files by migration effort (low, medium, high) based on prop complexity and custom styling.

Does it track specific component variants?

Yes, the scanner can identify which props and variants (e.g., primary vs secondary) are most popular, helping design teams prioritize component development.

Can I integrate these analytics into my CI/CD pipeline?

Absolutely. The skill provides implementation patterns for GitHub Actions to run weekly usage reports and automatically flag unused components via issues.

Does it detect components that are only used in tests?

Yes, it distinguishes between production usage and usage in stories or test files, helping you identify 'potentially unused' components that are safe to remove.

How does this skill find component usages?

It uses AST (Abstract Syntax Tree) parsing to scan your files for specific component imports and JSX tags, providing higher accuracy than simple text-based searches.

Component Usage Analytics

Name: Component Usage Analytics
Author: flight505

byflight505

0•

分析と監視

Tracks and analyzes UI component usage across codebases to simplify deprecations, migrations, and library maintenance.

Component Usage Analytics provides deep visibility into how UI components are utilized throughout your project using AST-based scanning. It empowers developers to make data-driven decisions by identifying unused components that bloat bundle sizes, analyzing the impact of breaking changes before they occur, and tracking the adoption rate of new component versions. Whether you are deprecating a legacy design system or planning a major refactor, this skill generates detailed usage reports, migration guides, and impact assessments to ensure a smooth and predictable transition.

主な機能

01Automated deprecation impact analysis with effort estimation

020 GitHub stars

03Automated generation of markdown migration guides

04Advanced AST-based component usage scanning across JSX/TSX files

05Unused component detection to reduce technical debt and bundle size

06Real-time adoption tracking for library version migrations

ユースケース

01Planning a migration from one design system version to another with effort scoring

02Cleaning up dead code by identifying components only used in tests or stories

03Performing impact analysis before making breaking changes to shared UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant component-usage-analytics

For use in Claude.ai and ChatGPT

主な機能

01Automated deprecation impact analysis with effort estimation

020 GitHub stars

03Automated generation of markdown migration guides

04Advanced AST-based component usage scanning across JSX/TSX files

05Unused component detection to reduce technical debt and bundle size

06Real-time adoption tracking for library version migrations

ユースケース

01Planning a migration from one design system version to another with effort scoring

02Cleaning up dead code by identifying components only used in tests or stories

03Performing impact analysis before making breaking changes to shared UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant component-usage-analytics

For use in Claude.ai and ChatGPT