skills.rest
christianearle01
christianearle01COMMUNITY
Explore all skills by this author →
GitHub

component-finder

Locate frontend components and related files across React, Vue, and Angular projects.

Updated Dec 4, 2025
Search Tags:#React#frontend#component#grep#Vue#Angular
One-click install
npx skills add https://github.com/christianearle01/claude-config-template --skill component-finder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-finder
Source: https://github.com/christianearle01/claude-config-template/tree/main/.claude/skills/component-finder
Command: npx skills add https://github.com/christianearle01/claude-config-template --skill component-finder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps frontend developers quickly locate components, UI elements, and related files across React, Vue, and Angular projects, reducing time spent on manual searches.

Core Features & Use Cases

  • Find a component by name across React, Vue, and Angular projects
  • Locate related files such as styles, tests, and stories
  • Understand component usage and relationships by tracing imports and usage sites
  • Supports common naming conventions (PascalCase, kebab-case) and multiple project layouts

Quick Start

Ask questions like "Where is the LoginForm component?" or "Find the Button component" to trigger the skill. See cheatsheet.md in this skill directory for patterns and commands. Open a found file directly in your editor using the provided path.

Frequently Asked Questions about component-finder

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

FAQPage Schema
How do I find a frontend component by name across React, Vue, and Angular projects?▼

To find a frontend component, use grep and glob-based searches across React, Vue, and Angular projects. This traces component definitions and usage sites by matching common naming conventions like PascalCase and kebab-case.

What is the best way to locate UI code and trace component usage in a monorepo?▼

Locate UI code by leveraging codebase conventions with grep searches to trace imports and usage sites. This returns exact file locations alongside related styles, tests, and stories for quick navigation.

Can I locate related styles and test files when searching for a component?▼

Yes, you can locate related styles and test files when searching for a component. The search traces component usage and imports to return exact file locations alongside related stories and tests for quick navigation.

Does this component search approach support both PascalCase and kebab-case naming conventions?▼

Yes, this component search approach supports both PascalCase and kebab-case naming conventions. It leverages codebase conventions and multiple project layouts to accurately locate frontend components across React, Vue, and Angular.

Why does my frontend component search fail to find UI elements across different directory layouts?▼

A frontend component search may fail if it does not account for multiple directory layouts and naming conventions. Applying glob-based searches across varied codebase conventions ensures you locate UI elements and related files.

Related Skills

Explore More Software Engineering Skills→
InnoMikitaKutasInnoMikitaKutas

coder-frontend

Implement React/Vue/Angular frontend components with best practices.

Community
Intermediate
sitharaj88sitharaj88
1

generate-component

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

Community
Intermediate
nanorepublicananorepublica
61

Global Tech Stack

Validate code against centralized global tech stack standards.

Community
Basic
wgordon17wgordon17

lsp-navigation

Navigate codebases with LSP for semantic symbol resolution and go-to-definition.

Community
Advanced