From dcode
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dcode:find-componentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Find where UI components live in a codebase—from screenshots, routes, or names.
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?"
The target can be:
/path/to/screenshot.png - Find code from a visualsettings/profile, dashboard/analytics - Find components for a URLUserAvatar, PricingCard - Find definition and usageCheck if input is:
.png, .jpg, .jpeg, .webp → ScreenshotMap 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"
Search for the component definition:
# Find component file
grep -r "function ComponentName\|const ComponentName\|class ComponentName" --include="*.tsx" --include="*.jsx" --include="*.vue"
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 |
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`
After listing files, add helpful guidance:
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
npx claudepluginhub madebynoam/dcode --plugin dcodeInvestigates codebase to verify design assumptions, find patterns, locate features, confirm file locations/structure, and ground planning in reality before implementation.
Generates React/Vue components with TypeScript, tests, CSS modules, barrel exports, and project-pattern validation. Detects Next.js App Router and adjusts output accordingly.
Searches 21st.dev registry for production-ready React UI components using natural language queries. Filters by framework and style system, returns ranked results with install instructions.