Does it work with specific frontend frameworks?

Yes, it includes built-in logic for mapping routes and structures in React (Next.js), Vue, Angular, and other component-based frameworks.

Can I find more than just the JSX/HTML file?

Absolutely. Once the main component is located, the skill identifies related files including SCSS/CSS styles, TypeScript definitions, unit tests, and custom hooks.

How does Component Finder identify code from a screenshot?

The skill uses the Read tool to analyze text content, layout patterns, and distinctive UI elements in the image, then performs a targeted search across the codebase for matching strings and patterns.

What if I only have a URL path?

You can provide a route path like 'settings/profile' and the skill will search your project's route configurations and directory structures to find the corresponding page component.

Component Finder

Name: Component Finder
Author: madebynoam

bymadebynoam

0•

デザインツール

Locates UI components in codebases using screenshots, URL routes, or component names to bridge the gap between design and implementation.

Component Finder is a specialized Claude Code skill designed to help developers and designers quickly navigate large codebases. By analyzing visual screenshots, URL route paths, or PascalCase component names, it accurately identifies the file paths for UI elements, styles, types, and tests. Whether you are troubleshooting a specific page or trying to find where a visual element is defined, this tool automates the search process across React, Vue, Angular, and other component-based frameworks, providing a clear map of related files and implementation context.

主な機能

01Relationship mapping for styles, types, and hooks

020 GitHub stars

03PascalCase detection for instant component definition lookup

04Visual code discovery via screenshot analysis

05Multi-framework support including React, Vue, and Angular

06Automatic mapping of URL routes to page components

ユースケース

01Onboarding new developers by mapping visual features to their respective code locations

02Finding all files associated with a specific URL route in a complex application

03Identifying the source code for a specific UI element from a designer's screenshot

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madebynoam/codekit find-component

For use in Claude.ai and ChatGPT

Download Skill