Menu
资深前端工程师技能。当用户需要开发前端页面、构建用户界面、实现交互功能、优化前端性能、解决前端问题时使用此技能。适用于任何涉及前端开发、UI/UX实现、组件开发、状态管理、前端工程化的场景。即使用户没有明确说"前端开发"，只要涉及到页面开发、界面设计实现、用户交互等，都应该触发此技能。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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}`)
}