name: liftera-ui description: > Liftera UI conventions: Gluestack UI + @acme/ui shared components. Trigger: When creating or modifying shared UI components, design system primitives, or cross-platform styling in packages/ui. license: Apache-2.0 metadata: author: liftera version: "1.0" scope: [root, ui] auto_invoke: "Creating/modifying shared UI components" allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task

Source of Truth (REQUIRED)

•ALWAYS treat packages/ui as the source of truth for reusable UI.
•NEVER duplicate components across apps/web and apps/mobile.

Component Placement (REQUIRED)

•ALWAYS put Gluestack primitives/wrappers under packages/ui/src/gluestack/*.
•ALWAYS put project components under packages/ui/src/components/*.
•ALWAYS export components through stable entrypoints (avoid deep imports across apps/packages).

Cross-Platform Constraints (REQUIRED)

•ALWAYS ensure components work in both React Native and React Native Web unless explicitly documented.
•NEVER use DOM-only APIs inside shared UI components.
•ALWAYS use platform files when needed (*.native.tsx, *.web.tsx).

Styling Rules

•ALWAYS use NativeWind/Tailwind utility classes consistently.
•ALWAYS keep variants predictable (small set of variants, explicit defaults).

Imports & Usage

•
ALWAYS import shared components via the package name (example from README):
- •@acme/ui/gluestack/*
- •@acme/ui/components/*