Nuxt 3 + Vue 3 + Shadcn Development Expert

Expert system for building modern, responsive web applications using Nuxt 3, Vue 3 Composition API, Shadcn Vue, Radix Vue, VueUse, and Tailwind CSS with Chinese development conventions.

Overview

This skill guides AI agents to write clean, maintainable Vue 3 code following composition API patterns, with emphasis on modularization, declarative programming, and Chinese documentation standards. Designed for developers building applications that integrate with CSV databases, GitHub Actions automation, and repository search functionality.

Code Style and Structure

1. **Programming Paradigms**

- Write concise, technical JavaScript code with accurate examples

- Use Vue 3 Composition API exclusively; avoid Options API

- Prefer declarative programming patterns over imperative

- Emphasize iteration and modularization over code duplication

- Use descriptive variable names with auxiliary verbs (isLoading, hasError, canSubmit)

2. **File Organization**

- Structure files in this order:

1. Exported component

2. Composables

3. Helper functions

4. Static content

5. Type definitions

3. **Naming Conventions**

- Directories: lowercase with dashes (`components/auth-wizard`)

- Components: PascalCase (`AuthWizard.vue`)

- Composables: camelCase with "use" prefix (`useAuthState.ts`)

- Files: Match component names or use kebab-case for utilities

Syntax and Formatting Rules

1. **JavaScript Conventions**

- Use arrow functions for methods and computed properties

- Avoid unnecessary curly braces in conditionals; use concise syntax

- Use double quotes for strings

- Add trailing commas in arrays and objects

- Remove semicolons from line endings

- Use template syntax for declarative rendering

2. **Chinese Documentation Standards**

- Write all comments in Chinese (中文注释)

- Use UTF-8 encoding for all files

- If mojibake characters ("�") appear, convert encoding immediately to proper UTF-8

- Preserve existing comments when modifying code

- Do not delete comments unless functionality is being completely removed

3. **Comment Guidelines**

- Add Chinese comments for key logic and critical code sections

- Document complex algorithms and business logic

- Explain non-obvious design decisions

- Keep comments concise but informative

Vue 3 and Composition API

1. **Component Structure**

- Always use `<script setup>` syntax for concise definitions

- Leverage `ref`, `reactive`, and `computed` for reactive state

- Use `provide`/`inject` for dependency injection when crossing multiple component levels

- Implement custom composables for reusable logic patterns

2. **Template Best Practices**

- Use declarative template syntax

- Keep templates clean and readable

- Extract complex logic into computed properties or composables

- Use v-bind shorthand (`:`) and v-on shorthand (`@`)

3. **State Management**

- Prefer composables over external state management libraries when possible

- Use `reactive` for object state, `ref` for primitive values

- Implement computed properties for derived state

- Consider VueUse utilities before writing custom logic

UI and Styling

1. **Component Libraries**

- Use Shadcn Vue and Radix Vue for pre-built components

- Leverage Radix Vue primitives for accessible custom components

- Integrate VueUse composables for common UI patterns

2. **Tailwind CSS**

- Implement mobile-first responsive design

- Use Tailwind utility classes directly in templates

- Create custom Tailwind configurations when needed

- Prefer composition over @apply directives

3. **Responsive Design**

- Start with mobile layouts (`sm:`, `md:`, `lg:` breakpoints)

- Test across different viewport sizes

- Use Tailwind's responsive utilities systematically

Code Modification Guidelines

1. **Incremental Changes**

- When receiving multiple modification requests, implement one at a time

- Prompt to continue before proceeding to next change

- This allows for debugging and effect verification, especially for multi-file changes

2. **Preservation Rules**

- **CRITICAL**: Do not delete code unrelated to current modifications

- Preserve code that is exported or referenced elsewhere

- Maintain existing imports and dependencies

- Keep comments unless directly related to removed functionality

3. **File Organization**

- Split code by functionality into focused modules

- Avoid excessive fragmentation (one file = one responsibility)

- Balance modularity with maintainability

- Consider coupling and cohesion when separating concerns

Data Fetching, Rendering, and Routing

1. **Nuxt 3 Patterns**

- Use `useFetch` and `useAsyncData` for data fetching

- Leverage Nuxt's auto-imports for components and composables

- Follow file-based routing conventions

- Use middleware for route guards and authentication

2. **Performance**

- Implement lazy loading for heavy components

- Use `<ClientOnly>` when appropriate

- Optimize bundle size with code splitting

- Cache data appropriately with Nuxt's built-in mechanisms

Examples

Component Structure Example

```vue

<script setup>

// 导入依赖

import { ref, computed } from 'vue'

import { useAuthState } from '~/composables/useAuthState'

// 组合式函数

const { isAuthenticated, user } = useAuthState()

// 响应式状态

const isLoading = ref(false)

const errorMessage = ref('')

// 计算属性

const displayName = computed(() => {

return user.value?.name || '访客'

})

// 方法

const handleSubmit = async () => {

isLoading.value = true

// 处理逻辑

isLoading.value = false

}

</script>

<template>

<div class="container mx-auto px-4">

<!-- 模板内容 -->

</div>

</template>

```

Composable Example

```javascript

// composables/useAuthState.ts

export const useAuthState = () => {

const isAuthenticated = ref(false)

const user = ref(null)

// 认证逻辑

const login = async (credentials) => {

// 登录实现

}

const logout = () => {

// 登出实现

}

return {

isAuthenticated,

user,

login,

logout,

}

}

```

Important Reminders