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/uias the source of truth for reusable UI. - NEVER duplicate components across
apps/webandapps/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/*