Find component

Skill madebynoam/dcode/plugins/dcode/skills/find-component

Claude Code skills for designers navigating codebases—component discovery, safe visual changes, design system exploration, and prototyping in real code.

Install

npx -y skills add madebynoam/dcode --skill find-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Find UI components from screenshots, route paths, or component names. Use when a designer asks "where does this live?", shares a screenshot and wants to find the code, needs to locate a component by its visual appearance, or wants to understand how a UI element is built. Works with React, Vue, Angular, and other component-based frameworks.

SKILL.md

3.9 KB, as published. Nobody here has run it

Find Component

Find where UI components live in a codebase—from screenshots, routes, or names.

For designers who ask: "I see this button in the app... where's the code?"

Input Types

The target can be:

Screenshot path: /path/to/screenshot.png - Find code from a visual
Route path: settings/profile, dashboard/analytics - Find components for a URL
Component name: UserAvatar, PricingCard - Find definition and usage

Instructions

1. Determine Input Type

Check if input is:

A file path ending in .png, .jpg, .jpeg, .webp → Screenshot
Contains capital letters or PascalCase → Component name
Otherwise → Route path

2A. For Screenshots

Read the screenshot using the Read tool
Identify visible UI elements:
- Text content (buttons, labels, headings)
- Distinctive patterns (cards, modals, forms)
- Icons or images
- Layout structure
Search the codebase for:
- Exact text strings (most reliable)
- Component patterns matching the layout
- CSS class names or data attributes if visible
Cross-reference findings to narrow down the exact file

2B. For Route Paths

Map routes to likely component locations. Common patterns:

Framework	Typical Structure
Next.js	`app/{route}/page.tsx` or `pages/{route}.tsx`
React Router	Check route config, often `src/pages/` or `src/views/`
Vue	`src/views/` or `src/pages/`
Angular	`src/app/{feature}/`

Search for route registration:

# Find route definitions
grep -r "path.*['\"]/{route}" --include="*.tsx" --include="*.ts" --include="*.js"

2C. For Component Names

Search for the component definition:

# Find component file
grep -r "function ComponentName\|const ComponentName\|class ComponentName" --include="*.tsx" --include="*.jsx" --include="*.vue"

3. Find Related Files

Once the main component is found, gather the full picture:

Type	Pattern	Purpose
Main component	`index.tsx`, `ComponentName.tsx`	Core logic and JSX
Styles	`.scss`, `.css`, `*.styled.ts`	Visual styling
Types	`types.ts`, `*.types.ts`	TypeScript definitions
Tests	`.test.tsx`, `.spec.ts`	Test coverage
Hooks	`use-*.ts`, `hooks/`	Custom React hooks
Sub-components	Child directories	Nested components
Stories	`*.stories.tsx`	Storybook examples

4. Output Format

Present findings clearly:

## Found: {target}

### Main Component
| File | Purpose |
|------|---------|
| `src/components/UserCard/index.tsx` | Main component |
| `src/components/UserCard/styles.scss` | Styling |

### Related Files
| File | Purpose |
|------|---------|
| `src/components/UserCard/Avatar.tsx` | Sub-component |
| `src/hooks/useUserData.ts` | Data fetching |

### Quick Start
- **To modify styling**: Edit `styles.scss`
- **To change behavior**: Edit `index.tsx`
- **To see examples**: Check `*.stories.tsx`

5. Provide Context for Designers

After listing files, add helpful guidance:

Which file to start with based on likely task
What design tokens/variables are used
Any gotchas (e.g., "styles are using CSS modules")
Related components that share patterns

Examples

Input: Screenshot of a pricing card Output: Located PricingCard component, styles, and data source

Input: settings/notifications Output: Files for the notifications settings page

Input: DatePicker Output: Component definition, styles, and usage examples