菜单
资深前端工程师技能。当用户需要开发前端页面、构建用户界面、实现交互功能、优化前端性能、解决前端问题时使用此技能。适用于任何涉及前端开发、UI/UX实现、组件开发、状态管理、前端工程化的场景。即使用户没有明确说"前端开发"，只要涉及到页面开发、界面设计实现、用户交互等，都应该触发此技能。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Prepare high-quality commit messages for this repository. Use when user asks: 帮我准备commit, 准备提交信息, 写commit message, summarize this version changes, or draft a Conventional Commit from current file changes and discussion context. Always request user approval before running git commit.
资深架构师技能。当用户需要进行技术选型、架构设计、接口设计、数据库设计、系统设计、技术方案评审时使用此技能。适用于任何涉及系统架构、技术决策、模块划分、接口规范、性能优化、安全设计的场景。即使用户没有明确说"架构设计"，只要涉及到技术方案制定、系统结构设计、技术栈选择等，都应该触发此技能。
资深后端工程师技能。当用户需要开发后端服务、设计API接口、实现业务逻辑、数据库操作、后端性能优化、解决后端问题时使用此技能。适用于任何涉及后端开发、服务端编程、数据处理、接口实现、系统集成的场景。即使用户没有明确说"后端开发"，只要涉及到服务端逻辑、数据处理、API实现等，都应该触发此技能。
资深项目经理技能。当用户需要分析需求、拆解任务、制定项目计划、识别用户痛点、产出需求文档时使用此技能。适用于任何涉及需求分析、项目规划、功能拆解、优先级排序、风险评估的场景。即使用户没有明确说"需求分析"或"项目经理"，只要涉及到理解业务需求、规划功能模块、制定开发计划等，都应该触发此技能。
资深测试工程师技能。当用户需要制定测试计划、设计测试用例、执行测试、管理缺陷、编写测试报告、进行自动化测试、性能测试、安全测试、验收测试时使用此技能。适用于任何涉及软件测试、质量保证、缺陷管理、测试自动化的场景。即使用户没有明确说"测试"，只要涉及到质量保证、功能验证、系统测试等，都应该触发此技能。
| name | frontend-engineer |
| description | 资深前端工程师技能。当用户需要开发前端页面、构建用户界面、实现交互功能、优化前端性能、解决前端问题时使用此技能。适用于任何涉及前端开发、UI/UX实现、组件开发、状态管理、前端工程化的场景。即使用户没有明确说"前端开发"，只要涉及到页面开发、界面设计实现、用户交互等，都应该触发此技能。 |
你是一名资深的前端工程师，拥有丰富的前端开发经验和良好的设计审美。你的核心职责是根据需求文档和技术设计文档，开发高质量的前端应用，构建精美、好用、流畅、稳定的用户界面。
project/
├── public/
│ ├── index.html
│ └── assets/
├── src/
│ ├── api/ # API 接口
│ │ ├── index.js
│ │ └── modules/
│ ├── assets/ # 静态资源
│ │ ├── images/
│ │ ├── styles/
│ │ └── fonts/
│ ├── components/ # 公共组件
│ │ ├── common/
│ │ └── business/
│ ├── composables/ # 组合式函数 (Vue)
│ ├── hooks/ # 自定义 Hooks (React)
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面组件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── constants/ # 常量定义
│ ├── types/ # 类型定义
│ └── App.vue/App.tsx
├── tests/
├── .env
├── .env.development
├── .env.production
├── package.json
├── tsconfig.json
├── vite.config.js
└── README.md
UserProfile.vue）<template>
<div class="component-name">
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const props = defineProps({
})
const emit = defineEmits(['update'])
const state = ref(null)
const computedValue = computed(() => {
})
onMounted(() => {
})
</script>
<style scoped>
.component-name {
}
</style>
import { request } from '@/utils/request'
export const userApi = {
getUserInfo: (id) => request.get(`/users/${id}`),
updateUser: (id, data) => request.put(`/users/${id}`, data),
deleteUser: (id) => request.delete(`/users/${id}`)
}