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.

2026-06-240

e2e-screenshot-verified-element

podverse/metaboost

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.

2026-06-220

git-worktree-sibling

podverse/metaboost

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.

2026-06-220

observability

podverse/metaboost

Distributed tracing and OTLP export patterns. Use when adding trace context, log correlation, or Observability env — after Metaboost adopts a shared observability package.

2026-06-220

plan-completion

podverse/metaboost

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/.

2026-06-220

abcmemory

podverse/metaboost

User vocabulary abcmemory and abcremember — where Cursor guidance lives and how to persist new instructions. Use when the user says abcmemory or abcremember.

2026-06-220

name	styles-source-of-truth
description	Design tokens, themes, mixins, and reset live in @metaboost/ui. Apps consume them via @metaboost/ui/styles/* — do not duplicate tokens in app SCSS.

styles-source-of-truth

Source of truth

packages/ui/src/styles/ is the canonical home for:

Design tokens (SCSS variables + CSS custom properties): _variables.scss
Themes on [data-theme] (light, dark, dracula): _themes.scss
Shared SCSS mixins: _mixins.scss
CSS reset: _reset.scss

Usage in apps

@use '@metaboost/ui/styles/variables' as *;
@use '@metaboost/ui/styles/mixins' as *;
@use '@metaboost/ui/styles/themes';
@use '@metaboost/ui/styles/reset';

Use CSS variables in module SCSS:

.card {
  padding: $space-4;
  color: var(--color-text);
  background-color: var(--color-bg);
}

Rules

No var() fallbacks: Do not use var(--token, fallback) in SCSS/CSS (see css-custom-properties-no-var-fallbacks rule). Missing tokens belong in _variables.scss / _themes.scss, not masked with a second var() argument.
Buttons and controls: Never rely on the browser default <button> background. Always set background-color and color using theme tokens so variants stay readable on every [data-theme] (light, dark, dracula).
Do not add new tokens to apps/web/src/styles/... or apps/management-web/src/styles/... except app layout glue that imports package styles. Add tokens in packages/ui/src/styles/_variables.scss (and _themes.scss if theme-dependent).
If page/module styles repeat across multiple pages (forms, table wrappers, badges, header action rows), prefer a reusable React component in @metaboost/ui rather than duplicated SCSS blocks.
Theme-dependent values (colors, surfaces, button states) must be defined in every built-in theme block in _themes.scss (light, dark, dracula).
Non-theme values (spacing, radii, dialog widths, etc.) live in _variables.scss.
Default theme: light on :root and [data-theme='light']; apps set data-theme on a root wrapper.
If you change a value used by both apps, change it in packages/ui/src/styles/ and verify web and management-web E2E smoke targets.

When to break this skill

Never. Token duplication is the bug class this skill exists to prevent.