Does it support multi-file component structures?

Yes, for complex elements, it suggests a multi-file architecture including separate files for types, sub-parts, and utility functions.

How does this skill prevent component duplication?

It scans your entire repository to build a Capability Map, matching your new requirements against existing props and variants to suggest reusing or extending current components.

What frameworks is this skill compatible with?

While optimized for React, Tailwind CSS, and CVA patterns, its logic can be applied to most component-based frontend architectures.

Can it identify subcomponents within a new requirement?

Absolutely. It analyzes your UI descriptions to see which existing primitives like buttons, inputs, or modals can be composed to build the new feature.

Component Architecture Analyst

Name: Component Architecture Analyst
Author: Ankish8

byAnkish8

•

设计工具

Optimizes frontend development by analyzing codebases to prevent component duplication and suggest efficient UI architectures.

The Component Analysis skill serves as an intelligent architect for your frontend projects, ensuring your design system remains lean and maintainable. By performing deep discovery across your repository, it builds a comprehensive Capability Map of existing UI elements, metadata, and variants. This allows Claude to make informed decisions on whether to create a new component, add a variant to an existing one, or utilize composition from existing subcomponents. It is particularly useful for teams scaling React or TypeScript applications who want to avoid technical debt and maintain high architectural standards.

主要功能

011 GitHub stars

02Detects appropriate component categories such as core, form, or layout

03Builds a Component Capability Map by scanning props, variants, and exports

04Uses a logic-based decision tree to choose between new components and variants

05Performs external and internal dependency analysis for new implementations

06Automatically identifies reusable subcomponents for complex UI requirements

使用场景

01Maintaining a clean design system by preventing redundant UI primitives

02Planning the implementation of complex Figma designs using existing components

03Standardizing component structures across large, multi-developer codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankish8/storybook-npm component-analysis

For use in Claude.ai and ChatGPT

Download Skill