Technical Debt

You might say

Five pages each have a copy of the button style, and one was missed during a color change. What does that show?

A usable implementation choice that leaves structural issues adding to later change workWhen five pages each keep a copy of the login-button style, changing its color means editing five places; missing one leaves the pages inconsistent. This duplication makes later edits easier to miss. After moving the style into one shared component, you still need to check every page. Technical debt describes a maintenance burden to weigh; it does not mean every duplicate must be rewritten now or will inevitably cost more over time.

Know first

Component

Technical Debt

From five repeated styles to one shared component

Login button · five pages, five copies

home.css .login { background: var(--text-3); } pricing.css .login { background: var(--text-3); } blog.css .login { background: var(--text-3); } docs.css .login { background: var(--text-3); } app.css .login { background: var(--text-3); }

Buttons shown on each page
Home	Log in
Pricing	Log in
Blog	Log in
Docs	Log in
App	Log in

Example: the same button style lives in five files. Updating its color means finding and changing each copy.

What repeated code can change

Before: five files keep separate copies: Changing the button color means finding five definitions; miss Docs and its button stays gray.

The change: a shared component: Following the project's existing structure, put the button style in one shared component and let all five pages use it.

Feedback and boundary: Reopen all five pages and confirm the buttons are blue without changing other page behavior. Whether to consolidate more depends on the actual maintenance burden; not every repeated line needs rewriting.

Quick checkChoose the best answer

Five button styles were changed to blue, but four pages are blue while Docs is still gray. What does this miss show?

There are five independent definitions; the same change must be applied at each source, so one can be missedThe button has one shared source, but Docs is still showing a cached pageThe gray Docs button is an intentional permission state, so ignore the change record

You can say this to an AI Agent

In this example, the same login-button style is repeated on five pages and Docs was missed. Follow the project's existing structure to move it into a shared component, then check each page for blue buttons and unexpected changes. Tell me where to edit the style next time.

Learn next

1Component→2Quality Gate→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website