skills.rest
dafang
dafangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-to-wx-miniprogram-migrator

Migrate React and TailwindCSS web apps into native WeChat Mini Programs.

1|Updated Jan 23, 2026
Search Tags:#react#migration#tailwind#wxml#miniprogram#wxss
One-click install
npx skills add https://github.com/dafang/react-to-weapp-skills --skill react-to-wx-miniprogram-migrator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-to-wx-miniprogram-migrator
Source: https://github.com/dafang/react-to-weapp-skills/tree/main
Command: npx skills add https://github.com/dafang/react-to-weapp-skills --skill react-to-wx-miniprogram-migrator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers convert React + TailwindCSS web applications into native WeChat Mini Programs, preserving structure, styling, and functionality across platforms.

Core Features & Use Cases

  • Analysis & Setup: Inspect the React project and generate a corresponding WeChat Mini Program skeleton.
  • Component & JSX Conversion: Translate React components and JSX into WXML templates and WXSS styles.
  • TailwindCSS to WXSS: Map Tailwind utility classes to static WXSS styles, with unit conversion considerations.
  • Logic Migration: Adapt state management and lifecycle (useState/useEffect) to Mini Program data and lifecycles.
  • API & Asset Replacement: Swap browser APIs with WeChat equivalents and migrate assets.
  • Use Case: Example: Migrating a React + TailwindCSS dashboard to a WeChat Mini Program to preserve UI and interactions.

Quick Start

Provide your React + TailwindCSS project and run this skill to generate a WeChat Mini Program migration plan and project skeleton.

Frequently Asked Questions about react-to-wx-miniprogram-migrator

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

FAQPage Schema
How do I migrate a React application to a WeChat Mini Program?▼

To migrate a React application to a WeChat Mini Program, translate React components and JSX into WXML templates, convert Tailwind utility classes to static WXSS styles, and replace browser APIs with WeChat equivalents.

Can I convert TailwindCSS to WXSS when migrating to a WeChat Mini Program?▼

Yes, converting TailwindCSS to WXSS involves mapping Tailwind utility classes to static WXSS styles, including specific unit conversion considerations to preserve the original UI styling.

How do I migrate React state and lifecycle methods to a WeChat Mini Program?▼

Migrate React state and lifecycle to a Mini Program by adapting useState and useEffect hooks into the native Mini Program data object and corresponding page lifecycles.

Does this migration process handle routing replacement for React SPAs?▼

Yes, the end-to-end migration process includes routing replacement, swapping React SPA routing logic with native WeChat Mini Program routing mechanisms to preserve navigation functionality.

What are the limitations of migrating React components to WXML templates?▼

A key limitation is that translating React components to WXML requires mapping JSX structure to WXML templates and swapping browser APIs with WeChat equivalents, which may not support all complex web interactions natively.

What is the best way to set up a WeChat Mini Program skeleton from an existing React project?▼

The best way to set up a Mini Program skeleton is to inspect the existing React project structure and generate a corresponding native WeChat Mini Program project framework to begin the migration.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
AdawoduAdawodu

engineering-wechat-mini-program-developer

Guide WeChat Mini Program development with WXML/WXSS/WXS and API integration.

Community
Advanced
PatternsDevPatternsDev
235

hooks-pattern

Create reusable custom hooks with useState and useEffect for React components.

Official
Intermediate
partme-aipartme-ai
610

uniapp-mini-guide

Guide uni-app mini program development with configuration, components, and API usage.

Official
Basic