这是我在日常开发中整理的一份 Agent Skills 技能书签清单，只保留我高频使用的几个外部技能，方便快速查阅和复用。
skills热门度排名网站： https://skills.sh/
FastAPI 模板 Skill
用途
生成带有分层结构的 FastAPI 项目脚手架（
api / core / models / schemas / services / repositories等完整目录）内置 async / await 模式、依赖注入（
Depends）、中间件、配置管理和数据库会话管理等实践提供用户、认证等典型业务的示例代码（Service + Repository + 路由），可以直接改造复用
附带测试样例（基于
httpx.AsyncClient和 pytest），帮助快速搭建完整的测试结构提供参考文档（如架构说明、异步最佳实践、测试策略等），便于理解整体设计理念
推荐用法与适用场景
新建 FastAPI 项目或微服务时，用它快速拉起一个“可直接跑”的基础工程，再按业务裁剪与扩展
希望团队内所有 FastAPI 服务都采用类似的目录结构、依赖注入方式和错误处理规范时，作为统一模板使用
需要同时覆盖 API 路由、Service 层、Repository 层、认证、安全、测试等全链路示例时，直接参考其中的完整示例项目
文档写作 Skill（Metabase 文档规范）
用途
提供一套围绕“读者视角”和“可执行性”设计的文档写作规范，用于约束语气、结构和信息密度
覆盖从起草、修改到润色的完整流程，包括如何先给结论再解释原因、如何写清步骤、如何裁剪无关信息等
明确常见文档类型（操作指南、概念说明、FAQ、故障排查等）的组织方式和标题写法
给出链接、代码块、表格等 Markdown 组件的使用规范，保证文档在不同页面和产品中的一致性
推荐用法与适用场景
编写 README、产品说明、API 文档、用户手册等对外文档时，将其作为统一的 style guide，先按规范搭好框架再填内容
团队希望统一文档风格、降低阅读与维护成本时，可将其中原则固化为“文档评审清单”使用
需要面对非纯技术背景读者（产品、运营、客户等）解释技术方案或产品特性时，可借助该 Skill 控制措辞和层次
Mermaid 图表与模板 Skill
用途
提供多种 Mermaid 图表的模板代码，包括流程图、时序图、架构图、组件关系图等常见可视化形式
帮助根据文字描述自动生成初版 Mermaid 代码，并支持对节点命名、分组、样式进行适度美化
适配在文档、博客或 CLI 工具中嵌入 Mermaid 的场景，可作为“图表代码生成器”的后端提示模板
推荐用法与适用场景
在需求文档、设计方案或博客中，需要快速补充系统流程/交互/架构图时，用它生成初稿再手工微调
需要重复绘制结构类似的图表（例如多个微服务拓扑、多个业务流程）时，可基于模板批量生成，减少重复劳动
想把 Mermaid 集成进自动化脚本、文档生成工具或开发者门户时，可把该 Skill 作为生成图表代码的核心能力复用
前端界面设计 / 布局 Skill（frontend-design）
用途
指导生成高质量的 Web 前端界面（页面 / 组件），强调信息层级、排版、留白和交互细节，而不是“AI 味”粗糙页面
提供多种视觉风格思路（极简、杂志风、仪表盘、暗色主题等），帮助在代码层面落地一致的设计语言
在写 HTML / Vue / React / Tailwind 时，给出更贴近真实产品的布局与样式结构，而不是 demo 级示例
推荐用法与适用场景
需要为已有产品补一块新页面 / 模块，希望一次性写出“可上线”的布局和样式，而不是事后重构
做设计稿→代码落地时，要求 AI 严格按照该 Skill 的设计原则输出前端实现
重构老页面（特别是管理后台、数据看板）希望整体视觉升级，但又不想先画完整设计稿时
Nuxt Skills 聚合 Skill（onmax / nuxt-skills）
用途
提供一组围绕 Nuxt 生态的 Skill：
vue、nuxt、nuxt-ui、nuxt-content、nuxt-modules、nuxthub等在处理
nuxt.config.ts、app.vue、server/api、modules/等文件时，补充官方最佳实践与最新 API 用法覆盖 SEO、模块开发、NuxtHub 数据存储、Nuxt UI 组件库等常用场景，减少反复查文档的成本
推荐用法与适用场景
新建或重构 Nuxt 4 项目时，作为“全家桶” Skill，一次性安装：
/plugin install vue@nuxt-skills nuxt@nuxt-skills nuxt-ui@nuxt-skills遇到 Nuxt 特有问题（路由、SSR、Nitro、模块开发）先触发对应 Skill，再让助手给出代码级解决方案
搭建内部 Nuxt 模板仓库 / 脚手架时，把这些 Skill 的约定当成默认工程实践
Vue 3 开发最佳实践 Skill（vuejs-ai / skills）
用途
收集 Vue 团队与社区沉淀的 Composition API / Router / Pinia / 测试 等最佳实践和常见坑
提供针对 reactivity、类型推断、路由守卫、Store 设计、测试隔离等问题的“技能化”解决方案
可以作为 Vue 3 项目代码评审 / 重构 的 checklist 来源
推荐用法与适用场景
在写复杂组件 / 组合式函数 / 路由守卫时，提示 AI “use vue-best-practices skill” 以减少响应式和类型相关坑
引入 Pinia / Router / 测试框架（Vitest + Vue Test Utils）时，用对应 Skill 帮忙搭建骨架代码
需要系统性排查一个 Vue 3 项目的设计问题（数据流、依赖方向、Store 结构等）时，作为辅助手册使用
VueUse 组合式工具 Skill（vueuse / skills）
用途
针对 VueUse 常用组合式函数（
useLocalStorage、useFetch、useInfiniteScroll、useTitle等）提供精确用法说明降低“自己手撸 Hook” 的重复劳动，引导优先使用 VueUse 中成熟的实现
在 Nuxt / Vue 项目中自动联想到“是否可以用 VueUse 做这件事”，避免 API 被遗忘
推荐用法与适用场景
写前端逻辑前，先问“有没有 VueUse 的写法”，然后用该 Skill 给出推荐组合式函数和使用范式
优化旧代码时，将传统 watch / computed / 原生事件监听迁移到 VueUse 组合式函数上
需要快速搭建 demo 或原型，用 VueUse 减少样板代码，让注意力集中在业务逻辑上
通用 Agent Skills 聚合仓库（anthropics / skills）
用途
官方维护的一整套 Skills 示例，包括文档处理（
docx/pdf/pptx/xlsx）、设计、开发、内部沟通等多种场景可以作为自定义 Skill 的参考模板，学习
SKILL.md的结构组织、分层引用、工具调用方式等了解 Anthropic 在生产环境中如何拆分大能力到多个小 Skill，提高自己为团队设计 Skill 的质量
推荐用法与适用场景
需要为公司 / 团队设计一套自己的 Skills 体系时，直接对照官方仓库的结构和写法进行裁剪与移植
想增强文档 / 表格 / 演示文稿的自动化处理能力时，可单独启用
docx/pdf/pptx/xlsx等技能探索更多创意 Skill（画布设计、算法艺术等）时，从该仓库中挑选可复用的思路和提示语设计方式
前端工程化技能集合（antfu / skills）
用途
Anthony Fu 整理的一套 Agent Skills 集合，覆盖
Vue/Nuxt/Vite/Vitest/Pinia/pnpm/UnoCSS等现代前端栈同时包含“偏工程习惯”的手工维护 Skill（更主观、更像资深开发的偏好清单）以及从官方文档自动生成的 Skill（更贴近规范）
适合当作前端工程化/最佳实践的“统一入口”，减少碎片化查资料
推荐用法与适用场景
团队主要做 Vue/Nuxt/Vite 技术栈，希望把编码规范、工具链、测试习惯固化到 AI 助手的默认行为时
写组件/配置/测试前，先触发对应 Skill（如
vitest/vite/pnpm/nuxt）再让 AI 给出实现，减少版本差异带来的误导做工程升级（如 Vite/ Vitest/ Nuxt 版本升级）时，用来快速对照推荐配置与迁移方向
UI/UX 设计系统生成 Skill（UI UX Pro Max）
用途
面向“设计系统生成”的 Skill：根据产品类型/行业/风格偏好，给出颜色、字体、布局模式、交互要点和反模式清单
输出更偏“可落地的设计方案”，适合在没有设计稿或设计资源不足时，先生成一套统一的设计语言，再推进页面实现
覆盖多种技术栈（React/Vue/Nuxt/HTML+Tailwind 等），并提供可复用的 UX 检查项
推荐用法与适用场景
做营销页/落地页/产品官网，需要快速确定整体 UI 风格与结构（Hero、Social proof、CTA 等）并落地成代码
做中后台/仪表盘，希望统一配色、字体、组件样式，避免页面风格碎片化
作为“先定设计系统、再写页面”的前置步骤：先生成设计系统，再让 AI 按该系统实现页面
Web 设计审查 & 性能最佳实践 Skill（vercel-labs / agent-skills）
用途
Vercel 官方维护的 Skills 集合，偏“代码审查/最佳实践”，覆盖性能、可访问性、交互与工程质量
常见能力包括：UI/UX 规范检查（a11y、focus states、forms、图片、dark mode 等）与 React/Next 相关性能优化建议
适合作为上线前的 checklist：让 AI 对照规则快速指出高风险问题
推荐用法与适用场景
代码评审阶段：让 AI 按规则审查组件/页面，输出可操作的修改建议
性能优化阶段：聚焦“消除瀑布流、减小 bundle、减少重渲染”等高收益项
可访问性/交互规范自查：在上线前用它补齐容易遗漏的细节（键盘可达、可见焦点、语义标签等）
Vercel React / Next.js 最佳实践 Skill（vercel-react-best-practices）
链接
vercel-labs/agent-skills — vercel-react-best-practices
安装：npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices用途
Vercel 维护的 React / Next.js 性能与工程质量指南，共 57 条规则、8 大类别，按影响优先级排序，便于自动化重构与代码生成
消除瀑布流（async-）：将 await 放入实际使用的分支、用 Promise.all 并行、用 Suspense 流式渲染等
Bundle 优化（bundle-）：直接导入避免 barrel、next/dynamic 按需加载、分析/日志延后加载、按功能条件加载等
服务端性能（server-）：服务端动作鉴权、React.cache 去重、LRU 缓存、减少 RSC 序列化数据等
客户端数据获取（client-）：SWR 去重、全局事件监听去重、被动滚动监听、localStorage 版本与精简等
重渲染优化（rerender-）：memo、依赖用原始值、派生状态在渲染中计算、startTransition、ref 存瞬时值等
渲染性能（rendering-）：content-visibility、静态 JSX 提升、条件渲染用三元、useTransition 做 loading 等
JS 性能（js-）：批量 DOM/CSS、Map/Set 查找、循环内缓存属性、提前 return、toSorted 不可变等
进阶模式（advanced-）：事件处理器存 ref、单次初始化、useLatest 稳定回调等
推荐用法与适用场景
编写新 React 组件或 Next.js 页面、做数据获取（客户端或服务端）时，按规则类别查阅并落地
代码评审或性能排查时，优先对照「消除瀑布流」「Bundle 优化」等高影响项，再逐条看规则文件
重构现有 React/Next 代码、优化首屏与 bundle 体积时，将规则作为自动化重构与生成的依据
每条规则有独立说明文件（如
rules/async-parallel.md），内含错误/正确示例与参考资料
Vercel React Native / Expo 最佳实践 Skill（vercel-react-native-skills）
链接
vercel-labs/agent-skills — vercel-react-native-skills
安装：npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills用途
Vercel 维护的 React Native / Expo 最佳实践集合，覆盖性能、动画、导航、UI 模式及平台相关优化
列表性能（list-performance-）：用 FlashList 虚拟化大列表、列表项 memo、稳定回调、避免内联样式/对象、列表内图片优化、昂贵逻辑移出 item 等
动画（animation-）：只动画 transform/opacity、useDerivedValue 计算动画、Gesture.Tap 替代 Pressable 等
导航（navigation-）：优先使用原生 stack / 原生 tabs，减少 JS 层导航开销
UI 模式（ui-）：expo-image、Galeria 图库、Pressable 替代 TouchableOpacity、SafeArea、contentInset、原生菜单/模态、onLayout 测量等
状态与渲染：最小化状态订阅、dispatcher 模式、条件渲染避免 falsy &&、React Compiler 与 Reanimated 共享值等
Monorepo：原生依赖放在 app 包、跨包统一依赖版本；配置：字体 config plugin、设计系统导入组织等
推荐用法与适用场景
开发 React Native 或 Expo 应用、优化列表与滚动、做 Reanimated 动画或图片/媒体处理时，按类别触发对应规则
配置原生模块、字体、或搭建带 RN 的 monorepo 时，用该 Skill 统一工程约定与依赖边界
每条规则有独立说明文件（如
rules/list-performance-virtualize.md），内含错误/正确示例与参考
