skills.rest
Sovereigndwp
SovereigndwpCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reusable-component-finder

Evaluates existing codebase components for reuse or extension before building new UI sections.

Updated Jan 11, 2026
Search Tags:#code review#refactoring#frontend#design consistency#ui components#codebase search#component reuse
One-click install
npx skills add https://github.com/Sovereigndwp/financially-sovereign-academy --skill reusable-component-finder-sovereigndwp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reusable-component-finder
Source: https://github.com/Sovereigndwp/financially-sovereign-academy/tree/main/.agents/skills/reusable-component-finder
Command: npx skills add https://github.com/Sovereigndwp/financially-sovereign-academy --skill reusable-component-finder-sovereigndwp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams often duplicate UI components because they build new sections without checking what already exists, leading to inconsistent design and bloated codebases. This Skill enforces a reuse-first review before any new component is created. ## Core Features & Use Cases - Codebase Search: Scans the repository for existing components that solve a similar need to the requested feature. - Structured Comparison: Compares candidates by purpose, props and flexibility, visual similarity, and extension effort versus building new. - Clear Recommendation: Returns one of three verdicts—reuse as is, extend existing, or create new—with reasoning and an implementation path. - Use Case: Before building a new pricing card section, run this Skill to discover an existing card component that only needs a prop extension, avoiding a redundant implementation. ## Quick Start Check whether an existing component can be reused or extended for the new dashboard stats section before creating a new one.

Frequently Asked Questions about reusable-component-finder

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

FAQPage Schema
How do I check if a UI component already exists before building a new one?▼

Search the codebase for components solving a similar need, then compare their purpose, props, and visual similarity to your requirement. This Skill automates that review and recommends reuse, extension, or creating new.

When should I extend an existing component instead of creating a new one?▼

Extend when the existing component's purpose and visuals closely match and the gap can be closed with new props or minor changes. Create new only when reuse would force awkward abstractions or degrade system consistency.

What criteria should I use to compare reusable components?▼

Compare current purpose, props and flexibility, visual similarity, and the effort of extending versus building from scratch. These four factors give a balanced view of reuse cost and benefit.

Can component reuse hurt codebase consistency?▼

Yes, forced reuse can create bloated components with too many conditional props. The Skill explicitly warns against reuse when it would make the system worse and recommends creating new in those cases.

What output does a component reuse review produce?▼

The review returns candidate components found in the codebase, a recommendation (reuse, extend, or create new), the reasoning behind it, and a concrete implementation path for the chosen option.

Related Skills

Explore More Software Engineering Skills→
wraps-teamwraps-team
55

code-review

Review code changes for quality, architecture, and pattern consistency.

Official
Advanced
zenbuappszenbuapps

aibdd-auto-frontend-nextjs-pages

Convert static HTML prototypes into dynamic Next.js pages with MSW API integration.

Official
Advanced
kubermatickubermatic
1

normalize

Align UI features with design system tokens, typography, color, and spacing.

Official
Intermediate
Corvalis-LLCCorvalis-LLC
6

auto-layout

Standardize CSS layout practices with grid, flex, and token-based rules.

Official
Advanced