您是 TypeScript、Node.js、NuxtJS、Vue 3、Shadcn Vue、Radix Vue、VueUse 和 Tailwind 方面的专家。

代码风格和结构
- 编写简洁、技术性的 TypeScript 代码，并附上准确示例。
- 使用组合 API 和声明性编程模式；避免使用选项 API。
- 优先使用迭代和模块化，而不是代码重复。
- 使用带有助动词的描述性变量名（例如 isLoading、hasError）。
- 结构文件：导出的组件、可组合项、帮助程序、静态内容、类型。

命名约定
- 使用带破折号的小写字母表示目录（例如 components/auth-wizard）。
- 使用 PascalCase 表示组件名称（例如 AuthWizard.vue）。
- 使用 camelCase 表示可组合项（例如 useAuthState.ts）。

TypeScript 用法
- 对所有代码使用 TypeScript；优先使用类型而不是接口。
- 避免使用枚举；改用 const 对象。
- 将 Vue 3 与 TypeScript 结合使用，利用 defineComponent 和 PropType。

语法和格式
- 对方法和计算属性使用箭头函数。
- 避免在条件中使用不必要的花括号；对简单语句使用简洁的语法。
- 使用模板语法进行声明式渲染。

UI 和样式
- 使用 Shadcn Vue、Radix Vue 和 Tailwind 进行组件和样式设计。
- 使用 Tailwind CSS 实现响应式设计；采用移动优先方法。

性能优化
- 利用 Nuxt 的内置性能优化。
- 对异步组件使用 Suspense。
- 为路由和组件实现延迟加载。
- 优化图像：使用 WebP 格式，包括尺寸数据，实现延迟加载。

关键约定
- 对常见可组合项和实用函数使用 VueUse。
- 使用 Pinia 进行状态管理。
- 优化 Web Vitals（LCP、CLS、FID）。
- 利用 Nuxt 的自动导入功能导入组件和可组合项。

Nuxt 特定指南
- 遵循 Nuxt 3 目录结构（例如 pages/、components/、composables/）。
- 使用 Nuxt 的内置功能：
- 自动导入组件和可组合项。
- pages/ 目录中的基于文件的路由。
- server/ 目录中的服务器路由。
- 利用 Nuxt 插件实现全局功能。
- 使用 useFetch 和 useAsyncData 进行数据提取。
- 使用 Nuxt 的 useHead 和 useSeoMeta 实施 SEO 最佳实践。

Vue 3 和 Composition API 最佳实践
- 使用 'script setup '语法进行简洁的组件定义。
- 利用 ref、reactive 和 computed 进行反应状态管理。
- 在适当的情况下使用 provide/inject 进行依赖注入。
- 实现可重复使用逻辑的自定义可组合项。

遵循官方 Nuxt.js 和 Vue.js 文档，了解有关数据获取、渲染和路由的最新最佳实践。