skills.rest
xiaoweidotnet
xiaoweidotnetCOMMUNITY
Explore all skills by this author →
GitHub

html-to-miniprogram-page

Convert HTML and CSS designs into WeChat Mini Program WXML and WXSS files.

22|4|Updated Feb 18, 2026
Search Tags:#html#frontend#conversion#wechat#miniprogram#skyline
One-click install
npx skills add https://github.com/xiaoweidotnet/suifeng-skills --skill html-to-miniprogram-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-to-miniprogram-page
Source: https://github.com/xiaoweidotnet/suifeng-skills/tree/main/skills/html-to-miniprogram-page
Command: npx skills add https://github.com/xiaoweidotnet/suifeng-skills --skill html-to-miniprogram-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the friction of porting web-based UI layouts to the WeChat Mini Program ecosystem, ensuring 1:1 visual fidelity while adhering to the specific constraints of the Skyline rendering engine.

Core Features & Use Cases

  • Automated Conversion: Maps HTML/CSS structures to WXML/WXSS, including proper handling of Skyline-specific layout rules.
  • Intelligent Resource Mapping: Handles icon conversion (CSS-based or local assets) and ensures correct navigation and tabBar configuration.
  • Use Case: Quickly transform a high-fidelity mobile web prototype into a production-ready WeChat Mini Program page without manually rewriting every layout component.

Quick Start

Use the html-to-miniprogram-page skill to convert the provided HTML design file into a native WeChat Mini Program page structure.

Frequently Asked Questions about html-to-miniprogram-page

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

FAQPage Schema
How do I convert HTML to WeChat Mini Program WXML and WXSS files?▼

Converting HTML to WeChat Mini Program pages involves mapping HTML/CSS structures to native WXML/WXSS files. This ensures 1:1 visual fidelity while adapting web layouts for the Mini Program ecosystem.

Does HTML to Mini Program conversion support the Skyline rendering engine?▼

Yes, HTML to Mini Program conversion supports the Skyline rendering engine. The process specifically targets Skyline-specific layout rules to ensure proper rendering and visual consistency within that environment.

How do I handle responsive units when converting CSS to WXSS?▼

When converting CSS to WXSS, responsive units are handled through automatic rpx unit conversion. This ensures that your web layout scales correctly across different mobile screen sizes in the Mini Program.

Can I convert CSS-based icons and navigation bars for Mini Programs?▼

Yes, you can convert CSS-based icons and navigation bars for Mini Programs. The conversion intelligently maps local icon assets and ensures correct navigation bar and tabBar configuration.

What is the best way to port a web prototype to a WeChat Mini Program?▼

The best way to port a web prototype to a WeChat Mini Program is automated conversion. This maps HTML/CSS structures to WXML/WXSS, avoiding the need to manually rewrite every layout component.

Why does my converted web layout not display correctly in WeChat Mini Program?▼

Your converted web layout may not display correctly if Skyline-specific layout rules are not applied. Proper conversion requires adapting navigation configurations and applying responsive rpx units for accurate rendering.

Related Skills

Explore More Software Engineering Skills→
JacobKayembekazadiJacobKayembekazadi

shopify-theme-converter

Converts web projects into complete Shopify theme and asset packages.

Community
Advanced
mymx2mymx2
4

wechat-miniprogram

Provides WeChat Mini Program development guidance for WXML, WXSS, and cloud integration.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

vant-weapp

Provide Vant Weapp UI components for WeChat MiniProgram development.

Community
Intermediate
muzhicaomingwangmuzhicaomingwang
3

wechat-minware

Standardize WeChat Mini Program frontend architecture and review processes.

Community
Advanced