skills.rest
nihalnihalani
nihalnihalaniCOMMUNITY
Explore all skills by this author →
GitHub

jac-mobui

Build cross-platform mobile and web apps in Jac using React Native primitives.

Updated Jul 26, 2026
Search Tags:#cross-platform#react native#mobile app#expo#stylesheet#jac#mobui
One-click install
npx skills add https://github.com/nihalnihalani/jachacks-sf-2026 --skill jac-mobui-nihalnihalani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jac-mobui
Source: https://github.com/nihalnihalani/jachacks-sf-2026/tree/main/plugins/jac-codex/skills/jac-mobui
Command: npx skills add https://github.com/nihalnihalani/jachacks-sf-2026 --skill jac-mobui-nihalnihalani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, react-native-web, lucide-react, lucide-react-native, react-native-svg.

What problem does it solve? Writing a Jac app that runs natively on iOS and Android while also rendering on the web requires avoiding HTML entirely and using React Native primitives, which is easy to get wrong without guidance on the compiler rules, props, and build commands. ## Core Features & Use Cases - MobUI primitive mapping: Replace forbidden HTML tags with @jac/mobui primitives (View, Text, Pressable, TextInput, ScrollView) to avoid the E1105 compile error. - React Native styling and events: Use StyleSheet.create with camelCase RN properties, onPress/onChangeText handlers, and token-based theming via a buildStyles factory. - Cross-platform build workflow: Configure client_kind = "mobui" in jac.toml, preview on web with react-native-web, and build native targets with jac start --client react-native or jac build --platform android/ios. - Use Case: A developer wants to ship the same Jac full-stack app to the App Store and the browser; this Skill guides them to author the UI in primitives, split icons into .jac/.native.jac pairs, and produce an APK or IPA. ## Quick Start Convert my Jac app to a MobUI mobile app by setting client_kind to mobui and rewriting the UI with View, Text, and Pressable primitives.

Frequently Asked Questions about jac-mobui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React Native mobile app in Jac?▼

Set client_kind to "mobui" in jac.toml, author the UI with @jac/mobui primitives like View, Text, and Pressable, then run jac setup react-native once and jac start main.jac --client react-native --dev to launch Metro with Expo.

What is the difference between MobUI and the Capacitor jac-mobile-app target?▼

MobUI compiles to real React Native components and forbids HTML entirely, while the Capacitor target wraps the web bundle in a webview and keeps HTML. Choose MobUI for native components and Capacitor when you want to reuse an existing web UI.

Why does my MobUI project fail with error E1105?▼

E1105 is raised when a lowercase HTML tag that does not resolve to an in-scope component appears in a mobui project. Replace HTML tags with primitives: View for div, Text for span or headings, Pressable for button, and TextInput for input.

Can I use CSS or Tailwind classes in a MobUI app?▼

No. MobUI uses React Native StyleSheet.create objects with camelCase properties passed via the style prop. There is no className, no CSS shorthand strings, and text styling like color and fontSize only works on Text components.

How do I handle icons on both web and native in MobUI?▼

Create two files with an identical Icon API: icon.jac importing from lucide-react for web, and icon.native.jac importing from lucide-react-native for native. The compiler picks the .native.jac variant for the react-native target automatically.

Why does HTML in a separate .jac component file compile but break on native?▼

The E1105 guard is enforced only on the main.jac entry module and .native.jac files, not on plain .jac component files. A div in Card.jac compiles for web but breaks on native, so always use @jac/mobui primitives everywhere.

Related Skills

Explore More Software Engineering Skills→
afonsoftafonsoft

testing-eaf-angular-runtime

Runs the EAF Angular admin UI against a mock Express backend for manual browser testing.

Community
Intermediate
linuxdevellinuxdevel
27

avalonia-deployment

Package and deploy Avalonia apps across multiple OS targets with dotnet publish.

Community
Intermediate
christophevgchristophevg

vue

Centralize shared Vue state in a store with computed properties and lifecycle-safe setup.

Community
Intermediate
Yemomo511Yemomo511
2

use-dom

Run existing web code in WebView within Expo native apps.

Community
Intermediate