A Claude Code skill for designing, implementing, and reviewing WeChat Mini Program (微信小程序) UI.
Guides AI agents to build Mini Program interfaces that feel native inside WeChat — following official design rules, using native components/APIs first, and respecting platform constraints like safe areas, capsule menus, and navigation stacks.
Invoke in Claude Code:
/wechat-miniprogram-ui
Or the skill activates automatically when the task involves WeChat Mini Program UI design, implementation, or review.
- Classify the page type (home, list, detail, form, profile, search, settings, payment, status)
- Pick native flow first — navigation API,
tabBar, auth, picker, share, media - Apply visual standards — system fonts, WeChat color semantics, 4px grid, 44px touch targets
- Cover states — loading, empty, error, permission denied, offline, success
- Review against the checklist before marking complete
| File | Content |
|---|---|
references/visual-specs.md |
Typography, colors, spacing, component specs, safe areas, WXSS tokens |
references/native-components.md |
WXML components, WeChat JS APIs, auth, tabBar/window config |
references/design-patterns.md |
Page patterns, state layouts, navigation bars, review heuristics |
references/wechat-design-guidelines.md |
Official guideline summary and principle-level decisions |
scripts/review_checklist.py— prints a review checklist for a page or diff
- Native first: use
tabBar,<picker>,wx.login,open-type,wx.showToastbefore custom UI - No fake auth: never build custom login when WeChat auth or phone authorization fits
- Respect capsule area: keep top-right
...menu clear - Every page needs back: honor iOS swipe-back and Android back
- Feedback on every interaction: loading, toast, modal, inline validation, or disabled state
- 375px/390px base: use
rpx, safe-area insets, 44px minimum touch targets
- Standalone web app design outside WeChat
- Replacing native WeChat navigation with custom implementations
- Brand campaign-style visuals (glassmorphism, heavy gradients, decorative chrome)