skills.rest
bitovi
bitoviOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-reuse

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
One-click install
npx skills add https://github.com/bitovi/carton-case-management --skill component-reuse
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
devkenidevkeni
1

figma-implement-design

Translate Figma designs into frontend code using Figma MCP workflows and design tokens.

Community
Advanced
Mahaboob26Mahaboob26

ui-ux-pro-max

Generate UI/UX design system blueprints for web and mobile applications.

Community
Advanced
pathtoresiliencebvpathtoresiliencebv

figma-generate-library

Generate Figma design systems from code with multi-phase workflows.

Community
Advanced
tanujsutariatanujsutaria
1

design-system-auditor

Audit SwiftUI views for hardcoded colors, spacing, and typography.

Community
Basic