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:
bash
# Find route definitions
grep -r "path.*['\"]/{route}" --include="*.tsx" --include="*.ts" --include="*.js"
2C. For Component Names
Search for the component definition:
bash
# 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:
code
## 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