How to Turn AI into a Structured Component‑Reuse Assistant: A Three‑Layer Skill Architecture

Background

When developers add new features they often create fresh components instead of reusing existing ones, leading to component bloat, higher maintenance cost, inconsistent UI, and noisy AI‑generated code. The goal of the skill is not merely to let AI search, but to embed a "reuse‑first" thinking process before any new component is created.

Problem Definition

The real challenge is not the availability of a search tool but the "decision order" for the AI: will it use the skill, when will it use it, can it return to the project context afterwards, and can it follow a stable workflow?

Core Design: AGENTS.md + Hook + Skill (Three‑Layer Structure)

AGENTS.md : stores permanent context such as reuse policies and shared component information.

Hook : enhances routing by injecting intent hints (e.g., "component reuse", "find component") before the user prompt is processed, increasing the probability that the AI selects the correct flow.

Skill : provides executable functions, stable output formats, and fallback logic, turning the skill from a mere description into a real action.

Implementation Details

The entry point is consolidated into find-component.js, which receives query, repoRoot, and startDir. It performs the following steps:

If components.csv is missing, it automatically triggers run-scan.js to build the index.

It calls resolve-scope.js to compute the searchable scope (current app + root‑level shared packages) by parsing pnpm-workspace.yaml and applying root_scope_patterns.

It runs match-component.js (with fuzzy-match.js) to rank candidates using a multi‑factor weighted score that includes exact/partial name match, edit‑distance fuzzy match, token overlap, acronym match, current‑app priority, usage frequency, source quality, existence check, and type weighting.

Low‑score results below NO_MATCH_SCORE_THRESHOLD are treated as noise; a scan may be re‑triggered, otherwise the skill returns a "no match" response.

The final JSON response follows a fixed schema: { ok, matches, noMatch, scanTriggered, hint, error }, ensuring the AI receives a predictable structure.

The index construction is a reusable pipeline ( run-scan.js → index-manager → enrich) that maintains history, skips unchanged components via source_hash, records changes in last-scan-changed-ids.json, supports parallel scanning, and marks missing files with exists=0.

Principles for Making AI Process‑Oriented

Principle 1 : Put essential context into AGENTS.md or inject it via Hook to lower the AI's decision cost.

Principle 2 : The skill must expose concrete tool functions with clear parameters and stable output.

Principle 3 : Explicitly tell the AI which function to call and aggregate scattered logic into a single entry point.

Insights and Value

By recording usage through usage-tracker, the system gradually learns which components are frequently reused, adjusting weights accordingly. The overall workflow provides:

Automatic reuse checks before new component creation.

Scope‑aware searching in monorepos (current app + shared packages).

Auto‑triggered index scans when needed.

Enriched component summaries fed back into the main AI loop.

Weighted matching with a feedback loop for higher relevance.

Clear entry points and output contracts for stable AI execution.

Conclusion

Embedding AI into a disciplined, engineered process—through permanent context, intent hooks, and well‑defined skill functions—turns it from a generic code completer into a reliable engineering collaborator that respects team conventions and improves component reuse.