dcode:find-component
Scannednpx machina-cli add skill madebynoam/dcode/find-component --openclawFind 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
Source
git clone https://github.com/madebynoam/dcode/blob/main/plugins/dcode/skills/find-component/SKILL.mdView on GitHub Overview
Find where a UI component lives in a codebase by using a screenshot, a route path, or a component name. It supports React, Vue, Angular, and other component-based frameworks. The skill guides you from input to a structured map of the main component and related files, helping developers and designers collaborate.
How This Skill Works
Identify the input type (screenshot, route path, or component name). Then map to likely locations: screenshots are resolved by text, layout, and patterns; routes point to app/pages or similar structures; component names are searched in files that define and export the component. Present a clear dossier of the main component and related files with file paths and purposes.
When to Use It
- A designer asks where a UI element lives and you have a screenshot to investigate.
- You have a route path (e.g., settings/profile) and need the component(s) responsible for that page.
- You have a component name (e.g., UserAvatar) and want its definition and usage.
- You need to understand how a UI element is built, including sub-components and styling.
- You’re working in a React, Vue, or Angular project and want a cross-framework approach to locate components.
Quick Start
- Step 1: Identify input type (screenshot, route, or component name).
- Step 2: Locate the main component and related files (styles, types, tests).
- Step 3: Review results and share with designers (include file paths and roles).
Best Practices
- Confirm input type before starting the search to choose the right strategy.
- For screenshots, search exact text strings and layout patterns to narrow results.
- Cross-check findings against common patterns (cards, modals, forms) and CSS class names.
- Start with the main component file, then gather related files (styles, tests, hooks).
- Provide context for designers: which files control styling, structure, and data sources.
Example Use Cases
- PricingCard: located the component, its styles, and data source.
- settings/notifications: found files for the notifications page.
- DatePicker: component definition, styles, and usage examples.
- Dashboard/analytics: mapped route to AnalyticsCard components and related views.
- UserAvatar: identified main component, sub-components, and tests.
