Skills
.Work. You
Rest

mpx-rn-style-guide

Official

Master Mpx RN cross-platform styling.

Software Engineering#css#styling#cross-platform#react native#mini-program#mpx#rn
Authordidi
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides comprehensive guidance on adapting Mpx component styles for React Native output, addressing the differences between RN and mini-program styling systems to ensure cross-platform compatibility.

Core Features & Use Cases

  • Style Compatibility: Understand and resolve differences in selector and CSS property support between RN and mini-programs.
  • Unit Conversion: Learn how units like rpx, px, vw, vh, and percentages are handled in RN.
  • Layout Best Practices: Adopt recommended approaches for Flexbox, and avoid unsupported layout methods like Grid and Float.
  • Cross-Platform Development: Write styles that work seamlessly across Mpx's supported platforms, with specific advice for RN.
  • Use Case: When developing a Mpx application that targets both WeChat mini-programs and React Native, and you encounter styling issues on the RN platform, this Skill will guide you on how to fix them by explaining the underlying platform differences and providing solutions.

Quick Start

Explain the differences in CSS selector support between Mpx's RN and mini-program targets.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mpx-rn-style-guide
Download link: https://github.com/didi/mpx/archive/main.zip#mpx-rn-style-guide

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.