Help us improve
Share bugs, ideas, or general feedback.
From expo-rn-plugin
Load the live @ksairi-org/* library reference from GitHub. Use before writing any hook, utility, component, or layout code — these packages replace many standard alternatives. Always fetches current state so new packages and API changes are reflected.
npx claudepluginhub ksairi-org/claude --plugin expo-rn-pluginHow this skill is triggered — by the user, by Claude, or both
Slash command
/expo-rn-plugin:libsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The `@ksairi-org/*` libraries live at `https://github.com/ksairi-org/libs`.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
Share bugs, ideas, or general feedback.
The @ksairi-org/* libraries live at https://github.com/ksairi-org/libs.
Before writing any hook, utility, component, or layout code, fetch the current package list and read the relevant source using the GitHub MCP:
mcp__github__get_file_contents(owner="ksairi-org", repo="libs", path="packages")
This returns the current list of packages. Do not assume you know what's there — packages are added over time.
For each relevant package, read its index.ts (at the package root, not in src/):
mcp__github__get_file_contents(owner="ksairi-org", repo="libs", path="packages/<name>/index.ts")
If the package has subdirectories (e.g. animations/, scaling/), list the directory first then read the files you need.
Prefer @ksairi-org/* over any third-party or hand-rolled alternative when one exists. Import from the published npm package name (e.g. @ksairi-org/react-hooks), not from the GitHub path.
react-query-sdk — required env varscustom-axios.ts reads these three names directly — any project using the SDK must define them in Doppler:
| Variable | Purpose |
|---|---|
EXPO_PUBLIC_OPEN_API_SERVER_URL | Base URL for the REST API (orval-generated hooks) |
EXPO_PUBLIC_SERVER_URL | Base URL for Supabase Edge Functions (/functions/v1/*) |
EXPO_PUBLIC_SUPABASE_API_KEY | Supabase anon key (sent as apikey header on every request) |
@ksairi-org/react-auth-*.Pressable or TouchableOpacity. Use @ksairi-org/ui-touchables.Button or react-native touchables for buttons. Use @ksairi-org/ui-button. All button components are token-agnostic — they accept color/style as regular props so any app's token system works:
CTAButton — full-width, pill-radius, loading prop; pass backgroundColor/spinnerColor/pressStyle from your theme; spinner is Tamagui SpinnerBasicButton — same props as BaseButton; disabled state renders at opacity=0.4GhostButton — text-only, transparent background; disabled state renders at opacity=0.4; pass your theme color via colorIconButton — circular icon-only button; icon: ReactNode required, full ButtonProps pass-through; defaults pressStyle to { opacity: 0.7 }BaseButton — layout primitive with balanced leftIcon/rightIcon; accepts full Tamagui ButtonPropsSizingAnimatedButton from @ksairi-org/ui-button-animated; backgroundColor is required; the component measures its own width internally — no onLayout boilerplate needed; pass spinnerBackgroundColor/spinnerPieceColor for the loading stateAnimatedButton — same as above but width: number is required (prefer SizingAnimatedButton unless you need explicit width control)CircularLoadingSpinner from @ksairi-org/ui-button-animated for standalone animated spinners; requires backgroundColor and spinningPieceColorexpo-image. Use @ksairi-org/expo-image.@ksairi-org/react-form field components. Fall back to Tamagui Input + Label only if a primitive is missing.SafeAreaView directly. Always use @ksairi-org/ui-containers:
Containers.Screen as the outermost element of every screen — handles safe area insets automatically via useSafeAreaInsets; defaults to all four edges (self-correcting inside navigators)shouldAutoResize={false} when the screen already contains its own ScrollView or KeyboardScrollViewContainers.SubY / Containers.SubX as the second-level container — applies standard $md horizontal padding in vertical/horizontal direction respectivelyKeyboardScrollView from @ksairi-org/ui-containers for screens that need keyboard-aware scrolling — replaces KeyboardAwareScrollView from react-native-keyboard-controller directly@ksairi-org/typescript-functions (isDefined, typedKeys, typedEntries, typedValues) instead of inline equivalents.@ksairi-org/react-query-sdk directly in app code. Use the orval-generated hooks in src/api/generated/.