Agent skill
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.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/liftera-ui
Metadata
Additional technical details for this skill
- scope
-
[ "root", "ui" ] - author
- liftera
- version
- 1.0
- auto invoke
- Creating/modifying shared UI components
SKILL.md
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/*
Didn't find tool you were looking for?