更新小程序头像选择逻辑，采用绝对定位覆盖原生按钮，避免样式干扰。新增相关最佳实践文档，确保开发一致性和用户体验。优化个人资料页面，提升用户交互流畅性。

.cursor/skills/miniprogram-dev/SKILL.md

@@ -104,7 +104,24 @@ description: Soul 创业派对小程序开发规范。在 miniprogram/ 下编辑
 
 ---
 
-## 11. 何时使用本 Skill
+## 11. 原生按钮覆盖定位（避免样式干扰）
+
+- **场景**：在头像、图片等区域需触发 `open-type="chooseAvatar"` 等原生能力时，**禁止用 button 包裹**目标元素，否则会受原生样式影响（灰色矩形、边框等）。
+- **正确做法**：用 **button 绝对定位覆盖** 在目标区域上方，与展示元素为同级关系。
+- **结构示例**：
+  ```html
+  <view class="avatar-wrap">
+    <view class="avatar-inner">...</view>
+    <view class="vip-badge">VIP</view>
+    <button class="avatar-overlay-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"></button>
+  </view>
+  ```
+- **样式**：`.avatar-wrap { position: relative; }`；`.avatar-overlay-btn { position: absolute; top: 0; left: 0; width/height 与目标一致; background: transparent; border: none; }`；`::after { border: none; }`。
+- **口诀**：同级覆盖，绝对定位，透明按钮。
+
+---
+
+## 12. 何时使用本 Skill
 
 - 在 **miniprogram/** 下新增或修改页面、组件、utils 时。
 - 在小程序内新增或修改任何网络请求路径时（必须保持 `/api/miniprogram/...`）。
@@ -114,5 +131,6 @@ description: Soul 创业派对小程序开发规范。在 miniprogram/ 下编辑
 - 做个人中心、设置页布局时（遵循 §7，卡片区边距 16rpx）。
 - 做阅读、文章等需长按复制的文本时（遵循 §9，text 加 user-select）。
 - 做编辑资料页分享名片时（遵循 §10）。
+- 做头像上传、chooseAvatar 等需 button 触发的原生能力时（遵循 §11，用绝对定位覆盖，禁止 button 包裹）。
 
 遵循本 Skill 可保证小程序只与 soul-api 的 miniprogram 路由组对接，避免与管理端或 next-project 接口混用。