uView Plus Vue3 ： （ VIP Plus 付费版 ）

# skill index 

你是一名资深前端工程师（10年经验），精通 Vue + UniApp开发。
请用“生产级代码”标准输出,不要简化,优先考虑真实项目可用性，而不是示例代码。


你是一名资深前端工程师（10年经验），精通 Vue3 + UniApp + uViewPlus + 小程序开发。
请用“生产级代码”标准输出,不要简化,优先考虑真实项目可用性，而不是示例代码。

- 使用 Vue3 <script setup>
- 结构清晰
- 逻辑完整
- 可直接运行
- 关键代码必须注释
- 兼容 H5 / App / 小程序
- 使用最佳实践（性能 + 可维护性）


你是一名资深前端架构师。

请帮我优化以下代码：

要求：
1. 提升性能
2. 提高可读性
3. 避免潜在 bug
4. 使用 Vue3 最佳实践
5. 给出优化前后对比



✅ Copy success!

# Skill 使用与创建说明

# 什么是 Skill

Skill 可以理解为给 Codex 补充一套“专用工作说明”。当任务命中某个 skill 的描述时，Codex 会优先读取这个 skill 的 SKILL.md，再按里面的流程、参考资料、脚本或模板执行任务。

它适合解决两类问题：

  • 某类工作反复出现，需要固定流程。
  • 某个领域有项目私有规则，模型默认并不知道。

例如：前端页面搭建、接口联调、公司内部发布流程、特定业务表结构说明。

# 一个 Skill 的基本结构

最小可用 skill 只需要一个 SKILL.md：

my-skill/
└─ SKILL.md

✅ Copy success!

如果内容复杂，可以继续增加：

my-skill/
├─ SKILL.md
├─ references/
│  └─ xxx.md
├─ scripts/
│  └─ xxx.py
└─ assets/
   └─ template/

✅ Copy success!
  • SKILL.md：核心说明，必须有。
  • references/：补充资料，按需读取。
  • scripts/：重复性强、希望稳定执行的脚本。
  • assets/：模板、图片、代码骨架等资源。

# 如何创建自己的 Skill

建议按这个顺序：

# 1. 先想清楚使用场景

先写出几个真实请求，例如：

  • “帮我用 Vue 3 + Vite 搭一个后台列表页”
  • “按现有设计风格补一个表单弹窗”
  • “检查这个前端页面有没有明显兼容性问题”

这些例子会直接决定 skill 的触发描述和内部流程。

# 2. 设计 skill 名称

命名建议使用小写加中划线，例如：

  • frontend-dev
  • uniapp-page-builder
  • api-debug-helper

# 3. 编写 SKILL.md

SKILL.md 分两部分：

  1. YAML 头部：告诉 Codex 这个 skill 是什么、什么时候使用。
  2. Markdown 正文：告诉 Codex 收到任务后该怎么做。

最小示例：

---
name: frontend-dev
description: Build and refine frontend pages with Vue 3, Vite, component reuse, responsive layout, and bug fixing. Use when tasks involve frontend page creation, UI adjustment, component refactoring, or browser-side debugging.
---

# Frontend Dev

## Workflow
- Read existing page and shared components first.
- Reuse current styles and patterns before creating new ones.
- Verify responsive behavior before finishing.

✅ Copy success!

# 4. 把 skill 放到可发现的位置

如果希望 Codex 自动发现，通常放到：

~/.codex/skills/

✅ Copy success!

例如：

~/.codex/skills/frontend-dev/SKILL.md

✅ Copy success!

如果只是当前仓库内做示例，也可以先像本文这样放在文档目录里学习和整理。

# 如何使用 Skill

常见有两种方式。

# 方式一：在提问时直接点名

可以直接在请求里写：

使用 frontend-dev skill，帮我把这个页面改成移动端优先布局

✅ Copy success!

或者：

Use $frontend-dev to build a Vue 3 form page

✅ Copy success!

# 方式二：让描述自动触发

如果你的问题和 description 高度匹配，Codex 也可能自动使用这个 skill。例如：

  • “帮我补一个 Vue3 列表页”
  • “修一下这个前端弹窗布局”
  • “按现有组件风格实现一个详情页”

是否能稳定触发，核心取决于 description 是否写得足够具体。

# 写好 Skill 的关键点

  • description 要写清“做什么”和“什么时候用”。
  • SKILL.md 不要写成长篇教程，要写成执行说明。
  • 能脚本化的内容尽量放进 scripts/，避免每次重复手写。
  • 大段参考资料放进 references/，不要把所有内容都塞进 SKILL.md。
  • 先复用现有项目结构、组件、命名方式，再新增实现。

# 本目录中的前端开发示例

下面这个示例 skill 已经放在当前目录下，可直接参考：

docs/components/deng/www/ai/skill/frontend-dev/

✅ Copy success!

建议你重点看这两个文件：

  • frontend-dev/SKILL.md：看触发描述和执行流程怎么写。
  • frontend-dev/references/frontend-checklist.md：看补充资料如何拆出去。

# 实际使用建议

如果你准备做自己的 skill，最实用的做法不是一开始写很多，而是：

  1. 先针对一个高频任务做最小版本。
  2. 实际用几次，记录 Codex 哪些地方做得不稳定。
  3. 再把这些经验补进 SKILL.md、references/ 或 scripts/。

这样做出来的 skill 更容易真正提高效率，而不是只停留在文档层面。







✅ 7. 小程序 SEO / 排名优化（你之前问过）
你是一名小程序增长专家（ASO优化）。

请帮我优化以下小程序：

要求：
1. 提供名称（3个备选）
2. 提供简介（100字内）
3. 提供关键词标签（10个）
4. 提供类目建议
5. 提供提升搜索排名策略

小程序功能：
{{你的产品}}



✅ Copy success!

← ⭐unaipp 常用总结 →