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

- Skill: `majiayu000/liftera-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/liftera-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/liftera-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: Apache-2.0
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/liftera-ui

---


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