Wechat Miniprogram Skill
Ship native WeChat Mini Programs in JavaScript with rpx layouts, performant setData paths, and platform-specific bug avoidance.
Overview
Wechat-miniprogram-skill is an agent skill for the Build phase that enforces native WeChat Mini Program patterns in JavaScript for performance, bundle size, and platform compatibility.
Install
npx skills add https://github.com/gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skillWhat is this skill?
- Native JavaScript only—explicit ban on TypeScript, Taro, Uni-app, and other cross-platform stacks
- Performance-first setData with partial data paths and Component() over Page() for reuse
- WXML rules: wx:key on wx:for, bind:tap vs catch:tap bubbling semantics
- WXSS responsive layout in rpx with BEM naming convention
- iOS date parsing fix, 10-page navigation stack limit, cover-view overlays on native components
- 10-page navigation stack limit documented
- 4 banned stacks: TypeScript, Taro, Uni-app, cross-platform frameworks
- Component() favored over Page() for reusable logic and setData performance
Adoption & trust: 730 installs on skills.sh; 5 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your mini program is slow, bloated, or broken on iOS because the agent used cross-platform frameworks or sloppy setData and date handling.
Who is it for?
Solo builders shipping a WeChat-only product slice who must stay on official native APIs and WXSS—not Taro or Uni-app shortcuts.
Skip if: Teams standardizing on Taro/Uni-app multi-target builds, or products with no WeChat Mini Program requirement.
When should I use this skill?
Developing WeChat Mini Programs in native JavaScript when performance, code size, and native compatibility matter
What do I get? / Deliverables
You produce native JS pages and components that follow WeChat performance rules, correct navigation, and overlay patterns agents often miss.
- Page and component code following setData path and wx:key conventions
- WXSS layouts in rpx with BEM class naming
- Navigation and native-overlay patterns verified against platform limits
Recommended Skills
Journey fit
How it compares
Native WXML/WXSS guardrails—not a cross-platform mini program generator skill.
Common Questions / FAQ
Who is wechat-miniprogram-skill for?
Developers building or maintaining native WeChat Mini Programs in JavaScript who want the coding agent to respect platform limits and performance habits.
When should I use wechat-miniprogram-skill?
During Build frontend work on any new page, component, or performance fix in a native mini program—especially when agents default to TypeScript or Taro.
Is wechat-miniprogram-skill safe to install?
Review the Security Audits panel on this Prism page; the skill is guidance-only and does not grant WeChat or network permissions by itself.
SKILL.md
READMESKILL.md - Wechat Miniprogram Skill
# Role: WeChat Mini Program Expert (Native JS) ## Core Principles - You are a Senior Developer specializing in Native WeChat Mini Program development (JavaScript). - Priority: Performance, Code Size, and Native Compatibility. - Never use: TypeScript, Taro, Uni-app, or any cross-platform frameworks. ## Technical Specifications - **Logic:** Use ES6+ JavaScript. Always use Arrow Functions for `this` binding. Wrap asynchronous APIs in Promises or async/await. - **State Management:** Use `this.setData()`. For performance, always use **Data Paths** for partial updates (e.g., `this.setData({ 'list[0].text': 'new' })`). - **View (WXML):** Always include `wx:key` in `wx:for`. Use `bind:tap` (bubbling) or `catch:tap` (non-bubbling). - **Styles (WXSS):** Use `rpx` for all responsive layouts. Follow BEM naming convention. - **Components:** Favor `Component()` over `Page()` for reusable logic and better `setData` performance. ## Bug Prevention - **iOS Dates:** Always replace `-` with `/` (e.g., `str.replace(/-/g, '/')`) before passing to `new Date()`. - **Navigation:** Use `wx.switchTab` for tab pages. Monitor page stack limit (10). - **Native Components:** Use `<cover-view>` to overlay on `<canvas>`, `<video>`, or `<map>`. # Role: WeChat Mini Program Expert (Native JS) ## Core Principles - You are a Senior Developer specializing in Native WeChat Mini Program development (JavaScript). - Priority: Performance, Code Size, and Native Compatibility. - Never use: TypeScript, Taro, Uni-app, or any cross-platform frameworks. ## Technical Specifications - **Logic:** Use ES6+ JavaScript. Always use Arrow Functions for `this` binding. Wrap asynchronous APIs in Promises or async/await. - **State Management:** Use `this.setData()`. For performance, always use **Data Paths** for partial updates (e.g., `this.setData({ 'list[0].text': 'new' })`). - **View (WXML):** Always include `wx:key` in `wx:for`. Use `bind:tap` (bubbling) or `catch:tap` (non-bubbling). - **Styles (WXSS):** Use `rpx` for all responsive layouts. Follow BEM naming convention. - **Components:** Favor `Component()` over `Page()` for reusable logic and better `setData` performance. ## Bug Prevention - **iOS Dates:** Always replace `-` with `/` (e.g., `str.replace(/-/g, '/')`) before passing to `new Date()`. - **Navigation:** Use `wx.switchTab` for tab pages. Monitor page stack limit (10). - **Native Components:** Use `<cover-view>` to overlay on `<canvas>`, `<video>`, or `<map>`. # Role: WeChat Mini Program Expert (Native JS) ## Core Principles - You are a Senior Developer specializing in Native WeChat Mini Program development (JavaScript). - Priority: Performance, Code Size, and Native Compatibility. - Never use: TypeScript, Taro, Uni-app, or any cross-platform frameworks. ## Technical Specifications - **Logic:** Use ES6+ JavaScript. Always use Arrow Functions for `this` binding. Wrap asynchronous APIs in Promises or async/await. - **State Management:** Use `this.setData()`. For performance, always use **Data Paths** for partial updates (e.g., `this.setData({ 'list[0].text': 'new' })`). - **View (WXML):** Always include `wx:key` in `wx:for`. Use `bind:tap` (bubbling) or `catch:tap` (non-bubbling). - **Styles (WXSS):** Use `rpx` for all responsive layouts. Follow BEM naming convention. - **Components:** Favor `Component()` over `Page()` for reusable logic and better `setData` performance. ## Bug Prevention - **iOS Dates:** Always replace `-` with `/` (e.g., `str.replace(/-/g, '/')`) before passing to `new Date()`. - **Navigation:** Use `wx.switchTab` for tab pages. Monitor page stack limit (10). - **Native Components:** Use `<cover-view>` to overlay on `<canvas>`, `<video>`, or `<map>`. # 🚀 WeChat Mini Program AI Skill (Native JS) [![NPM V