메뉴
专业的 Vue.js 开发技能，涵盖 Nuxt 3、Vue 3 Composition API、Tailwind CSS 和 Vue 生态系统。使用此技能构建 Vue 应用程序、实现 Nuxt 功能、使用 Pinia 进行状态管理，或使用 shadcn-vue 等组件库。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Expert Git skills covering interactive rebase, worktree management, reflog recovery, bisect debugging, advanced workflows, commit message best practices, and clean history management. Use this skill when needing advanced Git operations, cleaning commit history, managing multiple worktrees, recovering lost commits, debugging with bisect, or implementing sophisticated Git workflows.
Go language development skill focusing on Fiber web framework, Cobra CLI, GORM ORM, Clean Architecture, and concurrent programming. Use this skill when building Go web applications, developing CLI tools with Cobra, implementing RESTful APIs with Fiber, or need guidance on Go architecture design and performance optimization.
Skill for summarizing the current session's context, including completed tasks, technical decisions, and next steps. Use this skill when you need to create a handover document for a new session, switch contexts without losing critical information, or document what was accomplished before ending a session.
Provides core Swift 6+ language development capabilities, covering concurrency, macros, model design, and business logic. Use this skill when writing ViewModel, Service, or Repository layer code, defining data models, implementing algorithms, writing unit tests, or fixing concurrency warnings and data races.
Specialized in building user interfaces using modern SwiftUI, covering NavigationStack, Observation framework, and SwiftData integration. Use this skill when writing SwiftUI view files, designing app navigation, handling animations and transitions, or binding ViewModel data to the interface.
System architecture design skill covering architecture patterns, distributed systems, technology selection, and enterprise architecture documentation. Use this skill when designing system architectures, evaluating technology stacks, planning distributed systems, or creating architecture decision records and documentation.
| name | frontend-vue |
| description | 专业的 Vue.js 开发技能，涵盖 Nuxt 3、Vue 3 Composition API、Tailwind CSS 和 Vue 生态系统。使用此技能构建 Vue 应用程序、实现 Nuxt 功能、使用 Pinia 进行状态管理，或使用 shadcn-vue 等组件库。 |
现代 Vue.js 开发的综合技能，专注于 Nuxt 3、Vue 3 Composition API、Tailwind CSS 和 Vue 生态系统。
<script setup> 复用逻辑ref, reactive, computed, watchpages/ 目录中的文件创建路由useFetch, useAsyncDataserver/api/ 中的 API 端点useHead, useSeoMetatailwind.config.ts 配置project-root/
├── app.vue # 根组件
├── nuxt.config.ts # 配置
├── components/ # 自动导入组件
│ ├── ui/ # UI 库组件
│ │ ├── button/
│ │ └── ...
│ └── Header.vue
├── pages/ # 路由
│ ├── index.vue
│ └── about.vue
├── layouts/ # 布局包装器
│ └── default.vue
├── composables/ # 自动导入逻辑
│ └── useUser.ts
├── server/ # 服务器 API
│ └── api/
│ └── hello.ts
├── stores/ # Pinia stores
│ └── counter.ts
└── assets/ # CSS, 图片
└── main.css
<script setup> 的组合式 APIconst。composables/)。defineAsyncComponent 进行懒加载。useFetch 中使用 lazy: true 选项。middleware/auth.ts)。<script setup lang="ts">
const { data: user, error } = await useFetch('/api/user/1')
if (error.value) {
console.error(error.value)
}
</script>
<template>
<div v-if="user" class="p-4">
<h1 class="text-2xl font-bold">{{ user.name }}</h1>
<p>{{ user.email }}</p>
</div>
<div v-else>加载中...</div>
</template>
// stores/counter.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
// composables/useMouse.ts
export function useMouse() {
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
return { x, y }
}