component-reuse

Name: component-reuse
Availability: InStock
Author: Bitovi

Audit frontend codebases to identify reusable UI components before creating new ones.

1|6|Updated Dec 22, 2025

Search Tags:#react #codebase #audit #figma #design-system #ui-components #component-reuse

Ready to run

npx skills add https://github.com/bitovi/carton-case-management --skill component-reuse

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-reuse
Source: https://github.com/bitovi/carton-case-management/tree/main/.github/skills/component-reuse
Command: npx skills add https://github.com/bitovi/carton-case-management --skill component-reuse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reuse existing UI components before creating new ones to maintain design consistency and reduce duplication.

Core Features & Use Cases

Audit design references and search the codebase to identify reusable components
Decide to reuse or delegate to figma-implement-component based on audit results
Output an audit table before any component creation to guide development

Quick Start

Reuse existing UI components first.

Frequently Asked Questions about component-reuse

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

FAQPage Schema

How do I check for existing React UI components before creating new ones from Figma designs?▼

Perform a component audit to identify and reuse existing React UI components before creating new ones. This process searches the codebase, generates a searchable audit table, and guides reuse to prevent duplicates and maintain design consistency.

What is the best way to prevent duplicate UI components in a React codebase?▼

The best way to prevent duplicate UI components is to conduct a component audit and generate a searchable table of existing elements. This guides developers to reuse existing components first, ensuring design consistency across the codebase.

How do I audit my frontend codebase for reusable design system components?▼

Audit your frontend codebase by searching for existing UI components and mapping them against design references. The audit produces a searchable table that guides whether to reuse an existing component or create a new one.

Can I use a component audit to decide between reusing UI components or implementing new ones from mockups?▼

Yes, a component audit evaluates existing codebase elements against design mockups. It outputs a table that guides whether to reuse existing UI components or delegate to implementing new ones, ensuring design consistency.

When should I delegate to figma-implement-component instead of reusing an existing UI component?▼

You should delegate to figma-implement-component when the audit table confirms no existing UI component matches your design reference. If a match exists, the audit guides you to reuse it to prevent codebase duplication.