skills.rest
madebynoam
madebynoamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dcode:find-component

Locate UI component code by screenshots, routes, or component names.

Updated Jan 19, 2026
Search Tags:#ui#developer tools#frontend#design system#component#code location
One-click install
npx skills add https://github.com/madebynoam/dcode --skill dcode-find-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dcode:find-component
Source: https://github.com/madebynoam/dcode/tree/main/skills/find-component
Command: npx skills add https://github.com/madebynoam/dcode --skill dcode-find-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps designers quickly find the specific code files for UI components they see in a design or application, bridging the gap between visual design and the underlying codebase.

Core Features & Use Cases

  • Find code from screenshots: Upload an image of a UI element and get its location.
  • Locate by route: Provide a URL path and find the associated components.
  • Identify by name: Give a component name (e.g., UserAvatar) to find its definition and related files.
  • Understand component structure: Discover main files, styles, tests, and sub-components.

Quick Start

Find the code for the 'UserProfile' component.

Frequently Asked Questions about dcode:find-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I locate UI component code from a screenshot?▼

You can locate UI component code from a screenshot by uploading the image of the UI element. The Skill analyzes the visual input and instantly identifies the corresponding component location, styles, and related files within your codebase.

Can I find frontend components by route path or component name?▼

Yes, you can find frontend components by providing a URL route path or a specific component name like 'UserAvatar'. The Skill then searches the codebase to return the component definition, styles, tests, and sub-components associated with that input.

Does this component locator work with React, Vue, and Angular?▼

Yes, the component locator supports various frontend frameworks including React, Vue, and Angular. It searches for component definitions, styles, and related files across these framework environments to bridge visual design and codebase integration.

What is the best way to bridge visual design and codebase files?▼

The best way to bridge visual design and codebase files is by using screenshots, route paths, or component names to instantly locate UI code. This helps designers quickly find specific code files for UI components they see in designs or applications.

How do I identify component structure and related files in a design system?▼

To identify component structure and related files in a design system, provide a component name or screenshot. The Skill discovers the main files, styles, tests, and sub-components, helping you understand the full component structure for development integration.

Related Skills

Explore More Design & Creative Skills→
sprillionsprillion

gameobject-component-list-all

List UnityEngine.Component-derived C# class names with pagination.

Community
Intermediate
sitharaj88sitharaj88
1

generate-component

Generate frontend UI components by detecting the project's framework and existing patterns.

Community
Intermediate
nidhalboumaiza-0nidhalboumaiza-0

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Community
Advanced
Karlito8888Karlito8888

serena-explore

Locate symbol definitions, references, and relationships in codebases using Serena tools.

Community
Basic