Agent skill

Mpx2rn Simple

by didi in didi/mpx

Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN…

Apache-2.0Auto-check passedDevelopment

Install Mpx2rn Simple

skills CLI
$ npx skills add didi/mpx --skill mpx2rn-simple -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install didi/mpx mpx2rn-simple --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/didi/mpx.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/mpx2rn-simple .claude/skills/mpx2rn-simple && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mpx2rn-simple
GitHub stars
3.9k
Token cost
~1k tokens
SKILL.md length
220 words
Files
15 (incl. scripts, references)
Skills in repo
7
Repo updated
First seen
Licence
Apache-2.0

At a glance

Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN…

  • Works in 5 steps: 明确任务与输出 → 读取开发约束与检查清单 → 按区块逐项实施 → …
  • Development work in your project
  • SKILL.md covers 背景介绍, 使用方式与知识库索引 and 工作流程
  • Runs JavaScript scripts from its folder

What it does

Mpx2rn Simple is an agent skill from didi/mpx. Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN 原生开发问题、Mpx2Web 相关问题等。

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including scripts and reference files (for example `references/compile-validation.md`, `references/conditional-compile.md` and `references/project-structure-and-single-file-component.md`).

It sits in Development. It works with WeChat, Vue.js and React Native. The repository describes itself as: Mpx,一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架. The licence is Apache-2.0.

When your agent uses it

  • Development work in your project

Example prompts

  • “/mpx2rn-simple”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. 明确任务与输出
  2. 读取开发约束与检查清单
  3. 按区块逐项实施
  4. 新建组件的额外决策
  5. 收尾检查

What it can do on your machine

Read from SKILL.md and the folder at commit e2a7612. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (JavaScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mpx2rn Simple loads about 1k tokens when it runs, and up to ~79k if it reads all its reference files. Until then it costs about 56 tokens; SKILL.md has 220 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~56
When it runs · the whole SKILL.md, loaded when a task matches
~1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~79k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from didi/mpx at commit e2a7612, republished under its Apache-2.0 licence (© didi). 220 words, ~1,005 tokens.

Download SKILL.mdSave it as .claude/skills/mpx2rn-simple/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.
name
mpx2rn-simple
description
Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN 原生开发问题、Mpx2Web 相关问题等。
metadata.version
2.12.3
metadata.author
donghongping

Mpx 跨端输出 RN 开发与适配指南(精简版)

背景介绍

Mpx 是一个以微信小程序语法为基础、进行了类 Vue 语法拓展支持的跨端开发框架,支持将同一套代码输出到小程序(微信、支付宝、百度等)、Web 和 React Native 平台。Mpx2RN 在编译时和运行时对模板、脚本、样式与 JSON 配置四大维度的开发能力进行了全面抹平,但与小程序、Web 平台仍存在一定能力差异。

使用方式与知识库索引

完整阅读本文件后,先识别任务涉及的模板、脚本、样式或 JSON 维度,再按下表的读取条件选择相关参考,并只读取与任务相关的章节;不要预读全部 references。

知识库说明
开发约束与检查清单所有 Mpx2RN 适配改造、新建组件、报错排查与 Code Review 任务开始前必须完整读取,并在完成后按同一份清单复查;覆盖模板、脚本、样式、JSON 与条件编译的共用约束
项目结构与单文件组件不熟悉项目目录、页面与组件注册关系、入口配置或 .mpx 单文件组件结构时读取;已明确文件位置与 SFC 结构时无需读取
条件编译需要按平台隔离文件、区块、模板节点或属性,或修改、排查现有条件编译时读取;覆盖文件、模板、脚本、样式和 JSON 配置的条件编译语法
跨端输出 RN 模板能力参考任务涉及 <template> 修改、模板编译或运行问题、基础组件选型及其属性或事件时读取相关章节;覆盖数据绑定、指令、事件、Slot、动态组件、WXML 模板、i18n、无障碍与基础组件
跨端输出 RN 脚本能力参考任务涉及 <script> 修改、脚本编译或运行问题、生命周期、实例能力、响应式、组合式 API、运行时配置、网络请求或状态管理时读取相关章节
跨端输出 RN 样式能力参考任务涉及 <style> 修改、样式编译或渲染问题,或需要判断某项选择器、单位、样式特性及属性是否受支持时读取相关章节
跨端输出 RN 样式开发最佳实践需要改造 RN 不支持或跨端表现不一致的选择器、单位、布局、文本、定位、溢出等样式写法时优先读取对应方案;仅查询支持范围时读取样式能力参考即可
Mpx2RN 原子 CSS 能力参考项目启用 UnoCSS、模板使用原子类,或任务涉及工具类、variants、directives、variant groups、颜色透明度及原子类编译问题时读取
跨端输出 RN 环境 API 参考任务调用、替换或排查宿主环境 API,或需要确认 @mpxjs/api-proxy 某项 API 的 RN 支持情况、参数、返回值与平台差异时读取对应 API 章节
跨端输出 RN JSON 配置参考任务涉及应用、页面或组件 JSON 配置,以及分包、异步分包、抽象节点或相关配置编译问题时读取对应章节
Mpx 与 RN 混合开发需要在 .mpx 中注册或使用 React Native 组件、调用 React Hooks、处理 Hooks 返回值更新,或隔离 react-native 依赖时读取
编译校验修改或新建 .mpx 文件后、交付前必须读取并执行;包含真实编译要求、compile-validate.js 的调用方式、参数、退出码、使用示例与失败处理流程

工作流程

1. 明确任务与输出
  • 已有组件适配:默认直接修改原文件;先确认原平台行为、目标平台和涉及区块。若需要输出代码,给出可直接使用的完整组件,不只给局部片段。
  • 新建组件:明确视图结构、props、事件、数据流、目标平台及是否需要 RN 原生能力,最终交付结构完整的 .mpx 单文件组件。
  • 报错排查 / Code Review:先按报错位置或变更内容定位模板、脚本、样式或 JSON 维度,再读取对应参考;检查修改在原平台与 RN 的影响。
2. 读取开发约束与检查清单

适配改造、新建组件、报错排查与 Code Review 均完整读取开发约束与检查清单,并作为后续实现与审查的约束;完成后在收尾检查中按同一份清单逐项确认。

3. 按区块逐项实施
  1. 模板:读取 模板能力参考 的相关组件章节,核对基础组件、属性、事件与滚动能力;检查 Mustache 调用、事件传参、文字节点、动态 wx:class / wx:style,并给 selector API 对应节点补空 wx:ref。
  2. 脚本:读取 脚本能力参考 和任务涉及的 环境 API 参考,核对生命周期、构造选项、实例能力、保留关键字与 selector;将直接宿主 API 调用改为受支持的 mpx.xxx。
  3. 样式:先展开预处理器嵌套确认最终选择器,再读取 样式能力参考 和 样式开发最佳实践 的相关章节,逐项核对选择器、样式属性、垂直 margin 与平台差异;启用 UnoCSS 时额外读取 原子 CSS 能力参考。
  4. JSON:读取 JSON 配置参考,核对应用、页面、组件配置;需要按平台生成时使用 <script name="json">。

优先选择跨端等价实现。确实无法等效时,按区块使用正确的条件编译语法最小隔离,并添加 todo 说明原因;修改选择器时同步更新模板、脚本和样式中的全部引用。

4. 新建组件的额外决策
  • 优先使用 <script setup> 组合式 API,在顶层同步注册生命周期,并通过 defineExpose() 仅暴露模板使用的数据与方法;详见 组合式 API。
  • 新项目或新状态域优先使用 @mpxjs/pinia;工程已深度使用 @mpxjs/store 时沿用现有方案,避免同一业务域混用;详见 状态管理。
  • 复用 RN 原生组件或 Hooks 时读取 混合开发参考:平台差异较大时使用文件维度条件编译并隔离 react-native 依赖,局部差异使用模板或属性维度条件编译。
5. 收尾检查

© didi, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (scripts, references) in .agents/skills/mpx2rn-simple of didi/mpx.

  • SKILL.md
  • references/compile-validation.md
  • references/conditional-compile.md
  • references/project-structure-and-single-file-component.md
  • references/rn-api-reference.md
  • references/rn-atomic-css.md
  • references/rn-development-checklist.md
  • references/rn-hybrid-dev.md
  • references/rn-json-reference.md
  • references/rn-script-reference.md
  • references/rn-style-practice.md
  • references/rn-style-reference.md
  • references/rn-template-reference.md
  • scripts/compile-validate.js
  • scripts/strip-using-components-loader.js

Open the folder on GitHubat commit e2a7612

Compare with similar skills

Mpx2rn Simple next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mpx2rn Simple compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mpx2rn Simple this skilldidi/mpx3.9k—~1kAutomated safety check: PassApache-2.0
Uniapp App Generate Skilljiushiwon/wg-skills110—~5kAutomated safety check: NotesApache-2.0
AI Model WebTencentCloudBase/CloudBase-AI-Toolkit1.1k2 repos~6.1kAutomated safety check: NotesMIT
Lunora Realtimeanolilab/lunora283—~2.4kAutomated safety check: PassCustom licence
Data Client Setupreactive/data-client2k—~2.2kAutomated safety check: PassApache-2.0
AI Model Webmajiayu000/claude-skill-registry6662 repos~1.2kAutomated safety check: PassMIT

Similar skills

  • Uniapp App Generate Skill

    jiushiwon/wg-skills

    This skill should be used when the user wants to create a standardized uni-app project for WeChat mini-program, H5, and App from scratch.

    110 GitHub stars~5k tokensUpdated 3 days ago
    Agent WorkflowsAuto-check: notes
  • AI Model Web

    TencentCloudBase/CloudBase-AI-Toolkit

    A skill your agent uses when a browser/Web app (React, Vue, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI, 页面, 前端, 网页) needs AI models via @cloudbase/js-sdk.

    1.1k GitHub starsUsed in 2 repos~6.1k tokens
    Media & CreativeAuto-check: notes
  • Lunora Realtime

    anolilab/lunora

    Wires Lunora's live data into a client. An agent skill from anolilab/lunora.

    283 GitHub stars~2.4k tokensUpdated today
    MobileAuto-check passed
  • Data Client Setup

    reactive/data-client

    Install and set up @data-client/react or @data-client/vue in a project.

    2k GitHub stars~2.2k tokensUpdated today
    MobileAuto-check passed
  • AI Model Web

    majiayu000/claude-skill-registry

    A skill your agent uses when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities.

    666 GitHub starsUsed in 2 repos~1.2k tokens
    Media & CreativeAuto-check passed
  • React Native Generate Skill

    jiushiwon/wg-skills

    React Native 项目一键初始化技能。面向零基础小白,提供环境探测、自动安装、完整 React Native 移动端骨架生成、一键启动/打包脚本、所需依赖包规范文档。触发词:"React Native 脚手架"、"React Native 一键生成"、"初始化 React Native 项目"、"React Native 快速开始"、"reactnative init"、"搭建…

    110 GitHub stars~1.7k tokensUpdated 3 days ago
    MobileAuto-check passed

More from didi/mpx

  • 审计存量 Mpx 项目迁移到“mode 只负责目标筛选、srcMode 只负责源码方言”的新版编译语义。只要用户提到升级 Mpx 后检查条件编译、排查 .ali/.swan 等条件文件、mode/src-mode 区块、@mode/@mode、modeRules/srcModeRules 或外部模板迁移,就应使用本 Skill;不用于与该语义变更无关的普通 Mpx 升级。

    3.9k GitHub stars~731 tokensUpdated 8 days ago
    Auto-check passed
  • Mpx2rn

    didi/mpx

    Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN…

    3.9k GitHub stars~3.7k tokensUpdated 8 days ago
    Auto-check passed
  • Review Loop

    didi/mpx

    当用户要求评审循环、自评审工作流、planner/reviewer/coder/code-reviewer 协作、先方案后编码、多轮 Agent 评审,或要求稳定的子 Agent 工作流依次产出方案、等待用户确认、实现代码、评审差异并保留修订记录时,使用此 Skill。此 Skill 必须使用真实子 Agent,不得退化为单 Agent 角色扮演。

    3.9k GitHub stars~828 tokensUpdated 8 days ago
    Auto-check passed
  • 通过查看当前最新版本与上一版本间的git提交记录与代码变更,生成版本变更日志,当用户询问“创建/生成变更日志”、“创建/生成changelog”时使用。

    3.9k GitHub stars~640 tokensUpdated 8 days ago
    Auto-check passed
  • Helps when network-related commands (like curl, git, npm, pip, brew) are failing, timing out, or running slowly due to network issues.

    3.9k GitHub stars~464 tokensUpdated 8 days ago
    Auto-check passed
  • Skill2gene

    didi/mpx

    将传统文档导向的 Procedural Skill 转换为紧凑的 Strategy Gene 格式。基于论文 "From Procedural Skills to Strategy Genes" 的 Gene Evolution Protocol (GEP),将 ~2500 token 的文档型 Skill 蒸馏为 ~200-300 token 的控制型 Gene 集合。当用户要求将…

    3.9k GitHub stars~558 tokensUpdated 8 days ago
    Auto-check passed

Categories

Questions about Mpx2rn Simple

What does Mpx2rn Simple do?

Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN…. Mpx2rn Simple is an agent skill from didi/mpx.

When should I use Mpx2rn Simple?

Mpx2rn Simple fits situations like: development work in your project.

How do I install Mpx2rn Simple in Claude Code?

Run `npx skills add didi/mpx --skill mpx2rn-simple -a claude-code`. Or copy the skill folder (.agents/skills/mpx2rn-simple in didi/mpx) into .claude/skills/mpx2rn-simple in your project. Claude Code loads it when a task matches its description.

How do I install Mpx2rn Simple in Codex?

Run `npx skills add didi/mpx --skill mpx2rn-simple -a codex`. Or copy the skill folder (.agents/skills/mpx2rn-simple in didi/mpx) into .agents/skills/mpx2rn-simple in your project. Codex loads it when a task matches its description.

Can I use Mpx2rn Simple in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add didi/mpx --skill mpx2rn-simple -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mpx2rn-simple, .gemini/skills/mpx2rn-simple, .github/skills/mpx2rn-simple and .opencode/skills/mpx2rn-simple in your project.

What does Mpx2rn Simple need to run?

Going by SKILL.md and its folder, Mpx2rn Simple needs JavaScript for the scripts in its folder. Our summary lists: Node.js.

Does Mpx2rn Simple access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mpx2rn Simple safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Mpx2rn Simple use?

Mpx2rn Simple is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mpx2rn Simple use?

About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 78k tokens, read only when the agent opens those files.

What are the alternatives to Mpx2rn Simple?

Skills that share tags, products or a category with Mpx2rn Simple: Uniapp App Generate Skill (jiushiwon/wg-skills, 110 stars), AI Model Web (TencentCloudBase/CloudBase-AI-Toolkit, 1.1k stars), Lunora Realtime (anolilab/lunora, 283 stars) and Data Client Setup (reactive/data-client, 2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mpx2rn Simple?

didi (a GitHub organization) maintains it in didi/mpx, which has 3,941 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 29, 2026.

Source: didi/mpx on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.