القائمة
PromptWizard 前端开发 Skill。适用于 Vue 3 + Vite + Ant Design Vue + axios 场景下的组件开发、页面调整、API 接入和展示层修复。默认遵循当前仓库的 JavaScript 写法，而不是假设 TypeScript、Pinia 或 HeroUI 已经存在。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | front |
| description | PromptWizard 前端开发 Skill。适用于 Vue 3 + Vite + Ant Design Vue + axios 场景下的组件开发、页面调整、API 接入和展示层修复。默认遵循当前仓库的 JavaScript 写法，而不是假设 TypeScript、Pinia 或 HeroUI 已经存在。 |
当任务涉及以下内容时使用本 Skill：
front/src/components/front/src/api/front/src/App.vue/prompt/optimizeVue 3ViteJavaScript 为主，不是 TypeScriptAnt Design Vueaxiostailwindcssmarkdown-ithighlight.js来源见 front/package.json。
front/
├── src/
│ ├── App.vue
│ ├── main.js
│ ├── api/
│ │ └── prompt.js
│ ├── assets/
│ └── components/
│ └── PromptGenerator.vue
Ant Design Vuefront/src/api/prompt.jsVITE_API_URL<script setup>，但目前是 JavaScript 写法不要默认以下技术已经接入：
<script setup> + JavaScript。axios 客户端模式。<script setup>
import { computed, ref } from 'vue'
import { message } from 'ant-design-vue'
const loading = ref(false)
const hasResult = computed(() => false)
const handleSubmit = async () => {
loading.value = true
try {
message.success('提交成功')
} finally {
loading.value = false
}
}
</script>
a-form、a-form-item、a-input、a-textareamessagea-card、a-layout、a-space当前已有模式：
import axios from 'axios'
const apiClient = axios.create({
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000',
timeout: 60000,
})
新增 API 时：
src/api/*.js 风格一致request.tsPromise.reject 包装式样板，除非确有统一拦截器sm: 断点<style scoped>front/src/main.js 当前引用了 ./router，但仓库里未发现对应文件。处理涉及路由的任务时：
src/router/index.ts 已存在@heroui/react@/types/*、src/api/request.ts、src/stores/*VITE_API_URL