Menu
Prefer shared UI components from @metaboost/ui over app-local one-off components or page-specific SCSS wrappers when behavior is generic.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Canonical linear DB migrations under infra/k8s/base/ops/source/database/linear-migrations, ops bundles, env keys, and runners. Use when adding or changing SQL migrations, K8s DB bootstrap, or scripts/database in this repo.
When an E2E test verifies a specific element, pass it to the capture helper so the step screenshot is taken with that element vertically centered.
Create and use Metaboost git worktrees in sibling directories named metaboost_<branch_slug> (underscores). Use when starting feature work, moving WIP off the main checkout, or opening the correct worktree path for a branch.
Distributed tracing and OTLP export patterns. Use when adding trace context, log correlation, or Observability env — after Metaboost adopts a shared observability package.
When you finish a plan file in active/, automatically move it to completed/. If it's the last plan in its set, move the whole set. Use when completing any plan under .llm/plans/active/.
User vocabulary abcmemory and abcremember — where Cursor guidance lives and how to persist new instructions. Use when the user says abcmemory or abcremember.
| name | reusable-components |
| description | Prefer shared UI components from @metaboost/ui over app-local one-off components or page-specific SCSS wrappers when behavior is generic. |
| version | 1.0.0 |
apps/web or apps/management-web.page.module.scss patterns for headers, forms, table shells, badges, loading/error text, or action rows.Use @metaboost/ui first for generic UI behavior. Add app-local components only when the behavior is truly product-specific.
When web (apps/web) and management-web both have a similar generic control (icon button, menu, table chrome, etc.):
@metaboost/ui instead of maintaining parallel app-local copies.appearance, variant) on the shared component.aria-label, title, empty/loading copy) into packages/ui. Apps own localization (next-intl) and pass strings in via props or children.apps/web / apps/management-web i18n/originals/en-US.json (and keep locales aligned per i18n skill and i18n-locale-language rule).@metaboost/ui (Button, ActionLink, CopyToClipboardButton, Table, Pagination, form field primitives, Alert, LoadingSpinner, StatusBadge, IconButton, DropdownMenu, Modal / Modal.Actions / Modal.Body when present, etc.).packages/ui/src/components/** (or a shared hook in packages/ui/src/hooks/**) and export it from packages/ui/src/index.ts.| Question | If yes → |
|---|---|
| Used in two apps or a foreseeable second consumer? | packages/ui |
| Only strings or router differ? | App wrapper around a ui primitive |
Imports next/* or app-only config? | App wrapper |
| Duplicates a ui component with a small style tweak? | Extend ui variant / appearance |
For cross-app extraction steps, use ui-component-promotion.
When the same @metaboost/ui usage appears in two or more places within one app (same props, same next-intl keys for aria-label / visible copy), extract a thin client component under apps/<app>/src/components/** that:
useTranslations (or other app-only wiring) and fixed conventions.packages/ui; the wrapper stays in the app.Avoid bare export { X } from '@metaboost/ui' re-exports with no behavior.
Use only canonical CSS variables from packages/ui/src/styles/; do not add var(--name, fallback) — see css-custom-properties-no-var-fallbacks rule.
FormActions from @metaboost/ui should keep Cancel then Submit in the DOM with a right-aligned footer (see use-form-component).Select from @metaboost/ui over raw <select> + loose <label> for tier/status fields.Table + Pagination for list pages.@metaboost/ui behavior.@metaboost/ui primitive can compose the same UI without repeated identical configuration.Modal / ModalDialogContent footer rulespackages/ui/src/styles/