# wechat-miniprogram-skill

Turns your coding agent into a native WeChat Mini Program developer: performance, code size and platform compatibility rules baked in.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 9
- Author: Gourdbaby
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Gourdbaby/wechat-miniprogram-skill/tree/HEAD/SKILL.md
- Updated: 2026-01-23
- HTML: https://affpapa.org/en/nevibecode/skills/wechat-miniprogram-skill

## What it does

This skill sets the agent up as a senior developer working on native WeChat Mini Programs in JavaScript. The stated priorities are performance, code size and native compatibility. TypeScript and cross-platform frameworks are ruled out, so if your project runs on Taro or Uni-app the guidance will pull against your stack.

The rules cover the everyday mechanics. Logic uses ES6+ with arrow functions for `this` binding, and async APIs get wrapped in Promises or async/await. State changes go through `this.setData()`, with data paths recommended for partial updates such as `this.setData({ 'list[0].text': 'new' })`. In WXML every `wx:for` needs `wx:key`, and taps are bound with `bind:tap` or `catch:tap`. Layouts use `rpx` with BEM naming, and reusable logic should live in `Component()` rather than `Page()`.

A separate section lists the traps. Dates break in iOS when the string contains hyphens, so they get replaced with slashes before `new Date()`. Tab navigation requires `wx.switchTab`, and the page stack caps at 10 — worth checking if your flows chain a lot of screens. Overlaying `<canvas>`, `<video>` or `<map>` only works with `<cover-view>`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/wechat-miniprogram-skill/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/wechat-miniprogram-skill/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/wechat-miniprogram-skill/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/wechat-miniprogram-skill/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Gourdbaby/wechat-miniprogram-skill wechat-miniprogram-skill
```

2. **Manually: put the files in place**
- File: `.github/skills/wechat-miniprogram-skill/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Gourdbaby/wechat-miniprogram-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/wechat-miniprogram-skill/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Gourdbaby/wechat-miniprogram-skill/tree/HEAD/SKILL.md

## When to use it
- write Mini Program logic in plain JavaScript without frameworks
- update state partially with data paths instead of a full setData
- fix new Date() failing on iOS because of hyphens
- stay under the page stack limit during navigation
- overlay UI elements on top of canvas and video

## Example prompts
- help me build a product list page in WXML with wx:key
- rewrite this setData to update a single field via a data path
- why does this date string fail to parse on iOS

## Similar
- [wechat-miniprogram](https://affpapa.org/en/nevibecode/skills/wechat-miniprogram.md) — skill · 593 installs
- [auth-wechat-miniprogram](https://affpapa.org/en/nevibecode/skills/auth-wechat-miniprogram.md) — skill · 2200 installs
- [cloudbase-document-database-in-wechat-miniprogram](https://affpapa.org/en/nevibecode/skills/cloudbase-document-database-in-wechat-miniprogram.md) — skill · 1500 installs
- [tdesign-miniprogram](https://affpapa.org/en/nevibecode/skills/tdesign-miniprogram.md) — skill · 396 installs
- [baoyu-post-to-wechat](https://affpapa.org/en/nevibecode/skills/baoyu-post-to-wechat.md) — skill · 34400 installs
- [baoyu-wechat-summary](https://affpapa.org/en/nevibecode/skills/baoyu-wechat-summary.md) — skill · 9800 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md