OpenSkillIndex ← back to search

claude-code development

Claude-skill-registry liftera-ui

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/liftera-ui" ~/.claude/skills/majiayu000-claude-skill-registry-liftera-ui && rm -rf "$T"

manifest: skills/data/liftera-ui/SKILL.md

tags

#ui-development #code-conventions #react #gluestack #tailwind #component-library

source content

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