
Wechat Miniprogram Skill
- 1.1k installs
- 9 repo stars
- Updated January 23, 2026
- gourdbaby/wechat-miniprogram-skill
wechat-miniprogram-skill is an agent skill that provides native JavaScript guidance for WeChat Mini Program development for developers who must meet strict performance and package-size constraints.
About
wechat-miniprogram-skill is a WeChat Mini Program agent skill from gourdbaby/wechat-miniprogram-skill that enforces native JavaScript development practices for China's WeChat mini-app platform. The skill prioritizes performance, code size, and native compatibility, explicitly rejecting TypeScript, Taro, Uni-app, and other cross-platform frameworks so agents generate platform-correct ES6+ JavaScript. Developers reach for wechat-miniprogram-skill when building or refactoring Mini Programs where bundle kilobytes, startup time, and WeChat API compatibility matter more than sharing code with a React web app. Core guidance covers arrow functions for correct this binding, Promise or async/await wrappers around asynchronous WeChat APIs, and senior-level patterns for pages, components, and lifecycle hooks. The skill acts as a persistent expert persona so coding agents do not default to web-framework idioms that break on the Mini Program runtime.
- Enforces native JavaScript only with zero cross-platform frameworks
- Mandates performance rules including Data Paths for partial setData updates
- Requires wx:key on all wx:for loops and BEM naming in WXSS
- Prevents common iOS date bugs by automatically replacing hyphens with slashes
- Recommends Component() over Page() for reusable logic and better performance
Wechat Miniprogram Skill by the numbers
- 1,065 all-time installs (skills.sh)
- +45 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #357 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skillAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 9 |
| Security audit | 3 / 3 scanners passed |
| Last updated | January 23, 2026 |
| Repository | gourdbaby/wechat-miniprogram-skill ↗ |
How do you build native WeChat Mini Programs in JavaScript?
Get expert native JavaScript guidance when creating WeChat Mini Programs with strict performance and size constraints.
Who is it for?
Developers shipping native WeChat Mini Programs who need performance-first JavaScript guidance without cross-platform framework overhead.
Skip if: Teams standardizing on TypeScript, Taro, or Uni-app cross-platform stacks instead of native WeChat Mini Program JavaScript.
When should I use this skill?
A developer builds or debugs a native WeChat Mini Program and needs performance, bundle-size, or WeChat API compatibility guidance.
What you get
Native Mini Program pages and components in ES6+ JavaScript with Promise-wrapped WeChat APIs and size-optimized patterns.
- Mini Program page JS
- Component modules with WeChat API wrappers
Files
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
thisbinding. 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:keyinwx:for. Usebind:tap(bubbling) orcatch:tap(non-bubbling). - Styles (WXSS): Use
rpxfor all responsive layouts. Follow BEM naming convention. - Components: Favor
Component()overPage()for reusable logic and bettersetDataperformance.
Bug Prevention
- iOS Dates: Always replace
-with/(e.g.,str.replace(/-/g, '/')) before passing tonew Date(). - Navigation: Use
wx.switchTabfor 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>`.# 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>`.{
"name": "wechat-miniprogram-skill",
"version": "1.0.1",
"description": "Google style guide for WeChat Mini Program AI coding",
"main": "index.js",
"files": [
"SKILL.md",
".cursorrules",
".antigravityrules",
".opencode-rules",
"README.md"
],
"keywords": [
"wechat",
"miniprogram",
"cursor-rules",
"add-skill"
],
"author": "Minxiang.sun",
"license": "MIT"
}🚀 WeChat Mini Program AI Skill (Native JS)
 
让 AI 像谷歌工程师一样为你编写微信小程序代码。
这是一个专门为 AI 编程助手(如 Cursor, Antigravity, OpenCode 等)设计的标准化 Skill(规则集)。它通过注入高质量的工程约束,确保 AI 生成符合微信小程序官方规范、高性能且无 Bug 的 原生 JavaScript 代码。
---
🌟 为什么需要这个 Skill?
微信小程序采用独特的双线程架构,通用的 Web 开发 Prompt 往往会导致 AI 生成以下有问题的代码:
- ❌ 性能瓶颈:频繁或全量调用
setData导致界面卡顿。 - ❌ 兼容性坑:例如 iOS 系统下
new Date()不支持横杠-格式。 - ❌ 布局失准:错误地使用
px而非rpx导致多端适配失败。 - ❌ 语法混淆:AI 可能会混入 Vue、React 或 TypeScript 的语法。
本 Skill 通过在 AI 的上下文里预设 Google 级别的工程标准,从源头解决这些问题。
---
📦 安装说明
你可以使用 add-skill 工具一键将这些规则安装到你的项目中:
npx add-skill https://github.com/Gourdbaby/wechat-miniprogram-skillRelated skills
How it compares
Use wechat-miniprogram-skill for native WeChat JavaScript when cross-platform abstractions are out of scope; pick a Taro or Uni-app skill when shared multi-platform code is the goal.
FAQ
Does wechat-miniprogram-skill allow TypeScript?
wechat-miniprogram-skill explicitly forbids TypeScript, Taro, Uni-app, and cross-platform frameworks. The skill directs agents to write native ES6+ JavaScript aligned with WeChat Mini Program runtime constraints and APIs.
What does wechat-miniprogram-skill optimize for?
wechat-miniprogram-skill optimizes for performance, code size, and native WeChat compatibility. Guidance covers arrow-function this binding, Promise-wrapped async APIs, and senior patterns for pages and components under platform limits.
Is Wechat Miniprogram Skill safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.