Adapt Mpx single-file components for cross-platform React Native output.
npx skills add https://github.com/didi/mpx --skill mpx2rn
Please help me install this Agent Skill. Skill: mpx2rn Source: https://github.com/didi/mpx/tree/main/.agents/skills/mpx2rn Command: npx skills add https://github.com/didi/mpx --skill mpx2rn
Mpx code written for mini-programs often breaks or behaves differently when compiled to React Native (iOS, Android, Harmony). This Skill provides the constraints, capability references, and compile validation needed to develop, migrate, and review Mpx components that run correctly on both original platforms and RN.
Ask the AI to adapt a specific .mpx component for React Native output and validate it with the compile-validate script targeting ios.
High-intent search queries and answers about installing and using this skill.
Audit the component across four dimensions: check template components and events against the RN template reference, replace wx.xxx calls with mpx.xxx via @mpxjs/api-proxy, convert nested selectors to single classes, and verify JSON config fields. Isolate incompatible parts with conditional compilation, then run the compile-validate script.
Run node scripts/compile-validate.js with the target .mpx file and --target=ios,android or other modes. The script uses the host project's @mpxjs/mpx-cli-service for real compilation and reports errors categorized by style, template, script, json, and dependency.
Yes, via @mpxjs/unocss-plugin and @mpxjs/unocss-base with presetMpx(). Only RN-supported utilities and variants work; hover/active pseudo variants are unsupported, and color opacity must use slash alpha syntax like bg-red-500/50 instead of separate opacity classes.
Common causes include nested or compound selectors, pseudo-classes, empty selectors left by conditional compilation, and unsupported CSS properties. RN only supports single-class selectors, so expand preprocessor nesting and wrap entire rules in conditional compilation when a platform branch would be empty.
Yes, register RN components in the components option and use REACTHOOKSEXEC or onReactHooksExec for Hooks. Isolate RN-specific code with file-level conditional compilation (e.g., component.ios.mpx) so mini-program and Web builds never parse react-native imports.
Do not use it for pure mini-program development, pure React Native projects without Mpx compilation, or Mpx-to-Web output questions. It only covers the Mpx-to-React-Native compilation path for iOS, Android, and Harmony targets.
didiGuide Mpx framework development covering project structure, syntax, and cross-platform deployment.
Benmore-StudioImplement Expo push notification flows with token registration and receipt polling.
partme-aiGuide uni-app mini program development with configuration, components, and API usage.
first-mover-twFetch on-chain SUI Move contract source code via Suivision, Suiscan, and sui client CLI.
