应用Vue、Vite和Nuxt最佳实践

为你的开发代理提供 Vue 生态系统、现代构建工具及 UI 设计的最佳实践支持。

详细介绍

Anthony Fu 的技能集合

这是一个精选的 Agent Skills 集合，反映了 Anthony Fu 的偏好、经验和最佳实践，以及工具的使用文档。该集合主要面向使用 Vite/Nuxt 的开发者，提供一站式的技能覆盖。

重要提示 ：这是一个概念验证项目，用于从源文档生成 Agent Skills 并保持同步。作者尚未完全测试这些技能在实际中的表现，欢迎反馈和贡献。

技能列表

该集合包含三种类型的技能：

手工维护的技能

个人偏好

由 Anthony Fu 根据其偏好的工具、设置约定和最佳实践手动维护。

技能
描述

antfu
Anthony Fu 在应用/库项目中的偏好和最佳实践（eslint, pnpm, vitest, vue 等）

antfu-design
基于 UnoCSS 的设计原则、语义化令牌和来自 Anthony Fu 工具界面的 UI 呈现模式

从官方文档生成的技能

无个人偏好，但侧重于现代技术栈（如 TypeScript, ESM, Composition API 等）

从官方文档生成并由 Anthony Fu 微调。

技能
描述
来源

vue
Vue.js 核心——响应式、组件、组合式 API
vuejs/docs

nuxt
Nuxt 框架——基于文件的路由、服务端路由、模块
nuxt/nuxt

pinia
Pinia——直观、类型安全的 Vue 状态管理
vuejs/pinia

vite
Vite 构建工具——配置、插件、SSR、库模式
vitejs/vite

vitepress
VitePress——由 Vite 驱动的静态站点生成器
vuejs/vitepress

vitest
Vitest——由 Vite 驱动的单元测试框架
vitest-dev/vitest

unocss
UnoCSS——原子化 CSS 引擎、预设、转换器
unocss/unocss

pnpm
pnpm——快速、节省磁盘空间的包管理器
pnpm/pnpm.io

从外部仓库同步的技能

从维护自有技能的外部仓库同步。

技能
描述
来源

slidev （官方）
Slidev——面向开发者的演示幻灯片
slidevjs/slidev

tsdown （官方）
tsdown——由 Rolldown 驱动的 TypeScript 库打包工具
rolldown/tsdown

turborepo （官方）
Turborepo——高性能 monorepo 构建系统
vercel/turborepo

vueuse-functions （官方）
VueUse——200+ Vue 组合式工具函数
vueuse/skills

vue-best-practices
Vue 3 + TypeScript 最佳实践
vuejs-ai/skills

vue-router-best-practices
Vue Router 最佳实践
vuejs-ai/skills

vue-testing-best-practices
Vue 测试最佳实践
vuejs-ai/skills

web-design-guidelines
构建美观界面的 Web 设计指南
vercel-labs/agent-skills

常见问题

这个集合有何不同？

该集合带有个人偏好，但关键区别在于它使用 git 子模块直接引用源文档。这提供了更可靠的上下文，并允许技能随着上游变化而保持更新。如果你主要使用 Vue/Vite/Nuxt，这可以作为一个全面的集合。

Skills vs llms.txt vs AGENTS.md

对我来说，技能的价值在于 可共享 和 按需使用 。

可共享使提示更易于管理和跨项目重用。按需意味着技能可以根据需要被拉取，扩展性远超任何 Agent 的上下文窗口一次能容纳的内容。

你可能听说过“ AGENTS.md 优于技能”。我认为这是对的—— AGENTS.md 一次性加载所有内容，因此 Agent 始终遵守它；而技能可能存在假阴性，即 Agent 在你期望时没有拉取它们。不过，我认为这更多是工具和集成方面的差距，会随着时间改进。技能本质上只是 Agent 消费的标准格式——归根结底就是纯 Markdown 文件。可以将其视为 Agent 的知识库。如果你希望某些技能始终生效，可以直接在 AGENTS.md 中引用它们。

注意事项

这是一个概念验证项目，技能在实际中的表现尚未完全测试。

该集合反映了 Anthony Fu 的个人偏好和最佳实践，可能与其他开发者不同。

从外部仓库同步的技能保留其原始许可证，详情请查看各技能目录。

试试这样做

  • 请根据 Vue 3 和 TypeScript 的最佳实践，为我重构这段组件代码，并确保其符合 VueUse 的函数式编程规范。
  • 使用 UnoCSS 的语义化令牌和设计模式，为我当前的 UI 界面提供一套配色与布局优化建议。
  • 请根据 Nuxt 的文件路由和模块化规范，指导我如何优化当前项目的服务端渲染性能。

作者：antfu 开发者 / 自媒体人 ｜ GitHub Stars 5.7K ｜ 标签：编程开发 自动化 已认证 开源许可: MIT

来源：colaos.ai ｜ Skill ID：antfu-skills