前言¶
把 Web 原型塞进微信小程序，多数团队的做法是让模型”看着写”：页面结构随手搭，顶部导航自己画一个，跳转用 DOM 的 href。结果是页面能跑，但过不了验收：tabBar 没配、跳转用的不是 navigateTo、导航挡住了自定义组件、图片还在引用线上地址。这个 Skill 要解决的问题很具体：输入是 HTML、React、Vue 或其他 Web 原型，输出必须符合微信平台规范的小程序代码，或者对已经生成的转换结果做检查和修复。
这是什么¶
Skill 名称：HTML、React、Vue 或其他 Web 原型转换成微信小程序代码。
坐标 @user_7ffc2311/html-to-wechat-miniprogram，版本 1.0.0，来源为 community，分类 dev-programming，发布者 user_7ffc2311。按 SKILL.md 通用格式组织，标签显示 requires_api_key=false，即调用不需要额外 API key。
它做的不是通用代码翻译，而是把 Web 侧的概念映射到小程序侧：DOM 结构对应 wxml、样式对应 wxss、组件换成原生组件、交互换成小程序的事件与 API，同时强制遵守小程序特有的约束。
核心功能¶
按官方简介，这个 Skill 的能力覆盖转换和验收两条线。
1、转换。把 HTML、React、Vue 或其他 Web 原型转成微信小程序代码，转换结果强制遵守小程序特有的几项规范。
2、页面结构。输出符合小程序的页面组织方式，而不是把 Web 页面的文件原样搬过去。
3、原生顶部导航。使用小程序原生导航能力，不自行用 view 拼一个假导航。
4、app.json tabBar。需要底部标签栏时配置 tabBar，而不是在页面里手写 tab 组件。
5、跳转 API。页面跳转使用小程序提供的跳转 API，不使用 Web 的链接或路由方式。
6、安全区布局。处理 iPhone 等机型的安全区（顶部状态栏、底部小黑条），避免内容被遮挡或按钮点不到。
7、本地资源。资源落到小程序本地目录，按小程序的资源引用方式引用。
8、验收与修复。除了转换，还能检查、修复已生成的小程序转换结果，判断是否符合微信平台规范。
安装与启用¶
官方地址：
https://api.skillhub.cn/user_7ffc2311/html-to-wechat-miniprogram
SkillHub 页面：
https://www.skillhub.cn/skills/user_7ffc2311/html-to-wechat-miniprogram
调用侧的安装命令、目录约定和配置字段，在已抓取资料中没有给出，本文不推测。可以确认的是标签 requires_api_key=false，不需要为调用额外准备密钥。以官方地址页面的信息为准。
典型用法¶
已抓取资料只提供了简介级别的描述，没有可复现的输入输出示例，下面按官方简介还原用法边界，具体参数以官方页面为准。
第一种，从原型开始转：把 HTML、React、Vue 原型交给 Skill，产出小程序代码，要求页面结构、原生顶部导航、app.json tabBar、跳转 API、安全区布局和本地资源逐项符合规范。
第二种，已生成结果的检查与修复：对已经产出的小程序代码做检查，指出不符合平台规范的位置并修复，而不是整体重写。
适用场景与注意¶
适合的场景：
1、有现成 Web 原型或 HTML 静态页，需要在较短时间内得到可跑的小程序页面骨架。
2、React、Vue 写的原型需要落地为小程序代码，而不是重写一遍。
3、已经生成过一版小程序代码，但验收时发现导航、tabBar、跳转、安全区或资源引用不合规，需要逐项修。
需要留意的地方：
1、资料中显示下载 1381、安装 0，评分字段为 100000，这个评分不是常规量级，参考时要留意。
2、转换是”Web 概念到小程序概念”的映射，不是把 React 组件库或 Vue 组件原样搬进小程序，依赖 Web 专属库的原型需要先拆解。
3、安全区、tabBar、原生导航属于平台约束，转换时应按规范处理，不要在页面里自己实现。
4、本 Skill 面向的是代码转换与合规检查，不涉及小程序的后端、审核与发布流程。
结尾¶
这个 Skill 的价值在于把”Web 转小程序”从自由发挥变成有约束的转换：页面结构、原生导航、tabBar、跳转 API、安全区、本地资源都有明确规范，并且支持对已有转换结果做检查和修复。社区出品，版本 1.0.0，分类 dev-programming。
官方地址：
https://api.skillhub.cn/user_7ffc2311/html-to-wechat-miniprogram
