shield_lock
JinDaGe
← Back to skills
extension
Category: Development & EngineeringNo API key required

liftera-ui

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.

personAuthor: jakexiaohubgithub
open_in_newRepositorydownloadDownload package

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