app-local-ui-wrappers.mdc

---
description: Extract app-local thin wrappers when identical @metaboost/ui + i18n configuration repeats (2+ callsites in one app).
globs:
  - "apps/web/src/**/*.tsx"
  - "apps/management-web/src/**/*.tsx"
alwaysApply: false
---

# App-local configured UI wrappers

When the **same** configured usage of `@metaboost/ui` (including **`next-intl`** strings for `aria-label`, titles, or messages) appears in **two or more** places **within** `apps/web` or **within** `apps/management-web`, extract a thin client component under that app’s `src/components/**` that wires translations and forwards props.

- Keep wrappers **app-local** until **both** apps need the same wiring; then consider `packages/ui` plus app wrappers for copy (see workspace **i18n** rules).
- Do **not** use bare `export { X } from '@metaboost/ui'` as a substitute — wrappers must bind meaningful app conventions.

See **`reusable-components`** skill for the full rubric.