Reuse
This skill sets the order for building anything new. The project's own parts come first, then a maintained library or a platform feature. Custom code comes last.
A duplicate is a finding
A new component, style or icon that duplicates one the project already has is a finding. Adding a primitive to the shared package and then using it is not. A project with no shared package is judged on the libraries it already depends on.
Cutting what nobody asked for belongs to restraint. Copying an outside app belongs to match.
The project's parts come first
Search the shared component package, the icon set and the tokens before writing UI. Name what you found. A raw <input> beside the project's Input is reuse-house-component-first.
Shipped components stay as shipped
Use a component's variants and data-* attributes. Restyling it with a local className is reuse-no-local-restyle.
One style per kind of thing
Keep one menu, one table and one dialog shell. A second dropdown style is reuse-one-standard.
Fix it once, in the primitive
When a fix applies to every instance, make it inside the shared component. Patching five call sites is reuse-fix-in-the-primitive. Then search for every sibling, remove its local fix and list the files. Fixing only the cited line is reuse-sweep-siblings.
Then a library or the platform
When the project has nothing, use a maintained library or a platform feature before custom code. Intl formats dates and numbers. The native context menu handles right-click. A hand-written formatter is reuse-library-before-custom.
Check that a library is maintained. When it is not, port the pattern instead of installing it. That is reuse-no-stale-dependency.
Read the docs before the props
Read a primitive's documentation before using it, and use its current APIs. A guessed prop is reuse-read-the-docs.
Icons from the set, at native size
Use the project's icon set at the size it was drawn for. A generated SVG, or an 18px icon scaled to 12px, is reuse-icon-set-native-size. A glyph the set lacks, drawn by icons and added to the shared icon package or folder, is not a finding.
The pair
Every check is a pair. The broken line sits beside the line that replaces it.
| Rule | Broken | Replacement |
|---|---|---|
reuse-house-component-first |
<input className={styles.search} /> |
The project's <Input /> |
reuse-no-local-restyle |
.menu { border-radius: 6px } beside the shared Menu |
Menu as shipped |
reuse-one-standard |
Three dropdown styles on three screens | One Menu |
reuse-fix-in-the-primitive |
A scroll fade added at five call sites | The fade inside ScrollArea |
reuse-sweep-siblings |
The cited line fixed, its siblings left | Every sibling fixed, files listed |
reuse-library-before-custom |
A hand-written relative date formatter | Intl.RelativeTimeFormat |
reuse-no-stale-dependency |
An unmaintained package installed | Its pattern ported into the project |
reuse-read-the-docs |
render={<button />} on a trigger that is already a button |
The prop the docs describe, or none |
reuse-icon-set-native-size |
An 18px icon at width: 12px |
The 12px icon from the set |
Reporting
Severity. HIGH is a duplicate of an existing shared component, or a hand-built control a primitive covers. MEDIUM is a local restyle, an icon from outside the set or a shared fix applied at one call site. LOW is a library chosen without checking that it is maintained.
Format. One finding per root cause:
file:line - [rule-id] what is wrong
Then a Rule | Count | Severity summary. Block when any HIGH remains, Approve otherwise. Never Approve a file you did not read. Mark every check you could not run as Not verified.