Component Analysis

Analyze codebases to detect existing components and suggest variants or reusable subcomponents.

2|Updated Nov 21, 2025
One-click install
npx skills add https://github.com/Ankish8/storybook-npm --skill component-analysis-ankish8
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Component Analysis
Source: https://github.com/Ankish8/storybook-npm/tree/main/.claude/plugins/component-creator/skills/component-analysis
Command: npx skills add https://github.com/Ankish8/storybook-npm --skill component-analysis-ankish8

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill prevents the creation of duplicate components, suggests architectural improvements, and identifies reusable subcomponents, ensuring a clean and efficient component library.

Core Features & Use Cases

  • Component Existence Check: Scans the codebase to see if a similar component already exists.
  • Variant vs. New Component Suggestion: Recommends whether to create a new variant of an existing component or a completely new one based on functionality and structure.
  • Subcomponent Identification: Identifies existing components that can be reused within a new component.
  • Use Case: When a developer needs to create a new UserProfileCard component, this Skill analyzes the existing library, finds that a Card component with Avatar and Typography subcomponents can be composed, and recommends this approach over creating a new, monolithic component.

Quick Start

Analyze the codebase for a new 'user-profile-card' component.

Frequently Asked Questions about Component Analysis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if a UI component already exists before creating a new one?

To check if a UI component exists, scan the codebase to compare semantic similarity against existing component definitions. This analysis extracts props and variants to prevent duplicate components and maintain library consistency.

What's the best way to decide between creating a component variant versus a new component?

To decide between a component variant versus a new component, analyze functionality and structure differences. The evaluation compares semantic similarity to existing definitions to recommend the most architecturally consistent approach.

How do I identify reusable subcomponents within my React architecture?

To identify reusable subcomponents, analyze the codebase to find existing components that can be composed within new development. This prevents creating monolithic components by suggesting compositional architectural improvements.

Does component analysis work for maintaining architectural integrity in large UI codebases?

Component analysis works for maintaining architectural integrity in large UI codebases by scanning files and comparing semantic similarity. It ensures a clean component library by identifying duplicates and suggesting reusable structures.

When should I not use automated component suggestions for my codebase?

You should not use automated component suggestions when the codebase lacks existing component files to scan. The analysis requires scanning existing component definitions to extract props, compare variants, and identify reusable subcomponents accurately.