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:

1. Screenshot path: /path/to/screenshot.png - Find code from a visual
2. Route path: settings/profile, dashboard/analytics - Find components for a URL
3. 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

1. Read the screenshot using the Read tool
2. Identify visible UI elements:
   • Text content (buttons, labels, headings)
   • Distinctive patterns (cards, modals, forms)
   • Icons or images
   • Layout structure
3. Search the codebase for:
   • Exact text strings (most reliable)
   • Component patterns matching the layout
   • CSS class names or data attributes if visible
4. 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