How does the screenshot search work?

The skill reads the screenshot to identify text strings, layout patterns, and CSS classes, then searches your codebase for matching strings and code blocks to pinpoint the file.

Which frameworks are supported?

It is designed to work with all major component-based frameworks including React (and Next.js), Vue, Angular, and Svelte by recognizing common file structures and routing patterns.

Can it find styles and custom hooks too?

Yes, once the main component is identified, the skill automatically crawls the directory to find related CSS, SCSS, styled-components, and custom hooks to give you a full picture.

Does it work with complex routing systems?

It supports standard routing patterns for frameworks like Next.js App/Pages router and can grep for route definitions in React Router or Vue Router configurations.

Component Finder

Name: Component Finder
Author: madebynoam

bymadebynoam

0•

デザインツール

Locates UI components within a codebase using screenshots, route paths, or component names to bridge the gap between design and implementation.

Component Finder is a specialized Claude Code skill designed for developers and designers who need to quickly identify the source code for specific UI elements. By processing visual screenshots, application routes, or PascalCase names, the skill automatically traverses the codebase to pinpoint main components, associated styles, hooks, and storybook files. This is particularly useful during visual audits, debugging UI bugs, or when onboarding onto a new, complex repository where the relationship between the visual UI and the file structure isn't immediately obvious.

主な機能

01Visual Discovery: Identify components by analyzing screenshots for text content and layout patterns.

020 GitHub stars

03Route Mapping: Automatically trace application URL paths to their corresponding page and layout files.

04Intelligent Search: Locates component definitions, usages, and related styling or test files across the repository.

05Multi-Framework Support: Compatible with React, Next.js, Vue, Angular, and other modern component architectures.

06Contextual Guidance: Provides a clear map of where to edit logic, modify styles, or view implementation examples.

ユースケース

01Visual Audits: Locate the code for a specific button or card seen in a screenshot to verify its implementation.

02Navigation Tracing: Find the entry-point component and sub-components for a specific URL route like /dashboard/settings.

03Codebase Onboarding: Quickly understand the structure and dependencies of a component by searching for its name or visual appearance.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madebynoam/dcode find-component

For use in Claude.ai and ChatGPT

Download Skill