微信小程序技巧

SKILL前端设计

原名 wechat-miniprogram-skill

前端设计 联网访问 许可证明确 CodexClaudeCursorGemini CLI
安装这个技能

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

累计安装 10,513 本周 447
GitHub 星标 4 仓库 wechat-miniprogram-skill
下载量 3,683 技能市场下载数
权限级别 联网访问 安装前请确认风险范围
许可证 许可证明确 MIT

安装

GitHub 仓库
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
npx skills add https://github.com/gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill
其它安装方式(1 条)
  • skills.sh
  • AgentSkills.to

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方gourdbaby仓库 wechat-miniprogram-skill · 版本 未标注
宿主客户端Codex、Claude、Cursor、Gemini CLI技能可被这些客户端加载
安装方式GitHub 仓库安装包 gourdbaby/wechat-miniprogram-skill
权限级别联网访问安装前请确认风险范围
许可证MIT许可证明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-05-01上游最后核验时间 · 数据更新 未标注
正文体量1.2 KBSKILL.md 原文大小,越大说明说明书写得越细

能做什么

5 项能力
上游给出的能力概览与适用场景
  • 按任务关键词查找相关 Skills
  • 展示可复制的安装命令
  • 保留来源站点、仓库和原始说明,方便继续核验
  • 补充不同宿主或平台的使用分布数据
  • 展示第三方安全扫描或审计结果
用户想查找某类 Agent Skill 时需要根据任务场景推荐可安装能力包时需要对比不同来源的安装命令和来源信息时需要参考平台分布和安装热度时

权限与风险

联网访问
装之前先读完这段

安装与使用指南

安装步骤

库内同一技能有多条安装命令,本站默认给出其中一条主命令,以作者仓库的说明为准。

怎么用

安装后应在对应宿主中按原始 README 的触发条件使用;当前草稿只做目录说明,具体调用方式由规则抽取,异常条目再复核。

SKILL.md 全文

1.2 KB
模型实际读到的说明书原文,来自技能仓库

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>.

安全信息

审计结论
未标注不代表已通过审计
安全审计Gen Agent Trust Hub、Socket、Snyk第三方安全审计平台给出的结论

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-05-01。