Skip to content

UI patterns

Toggle: enabledChecks.ui-patterns plus uiPatterns config · Fix: none · Command: ui-patterns

Searches configured extensions for forbidden UI pattern strings and reports matches. It does not rewrite components because selecting the right shared primitive is a design decision.

Configure uiPatterns.forbidden, extensions, and ignoredFiles. Keep patterns specific enough to catch duplication without flagging intentional exceptions.

For example, configure a repeated bespoke button class as a forbidden pattern:

{ "uiPatterns": { "forbidden": ["className=\\\"legacy-button\\\""] } }

Before — the flagged pattern appears in the source:

<button className="legacy-button">Save</button>

After — replace it with the repository’s approved shared primitive (illustrative API):

<PrimaryButton>Save</PrimaryButton>