nuxt4-patterns

nuxt4-patterns 技能概览

nuxt4-patterns 是做什么的

nuxt4-patterns 是一项面向 Nuxt 4 的技能，用来帮助你在页面上线前选对 SSR、hydration、路由和数据获取模式。它适合需要处理 Frontend Development 决策的场景，重点不只是语法帮助，而是会影响正确性和性能的实用判断。

适合谁使用

如果你在构建或修复 Nuxt 4 应用，并且需要处理 hydration mismatch、route rules、lazy loading，或 SSR-safe 数据获取问题，就适合用 nuxt4-patterns。它最适合那些希望拥有一套可安装、可复用的工作流、能在不同页面和组件间重复使用，而不是每次都重新写一条 prompt 的工程师。

它的不同之处

nuxt4-patterns 的价值在于它提供决策支持：什么时候要保持渲染确定性，什么时候把逻辑移到客户端，什么时候该用 useFetch，什么时候该用 useAsyncData，以及 ssr: false 什么时候是真正的修复、什么时候只是权宜之计。正因为它把这些通常会阻碍落地的权衡放在中心位置，nuxt4-patterns 技能比通用 Nuxt prompt 更实用。

如何使用 nuxt4-patterns 技能

nuxt4-patterns 的安装与首次检查

使用以下命令安装 nuxt4-patterns 技能：

npx skills add affaan-m/everything-claude-code --skill nuxt4-patterns

安装完成后，先阅读 SKILL.md。这个技能仓库体积小，而且结构自包含，所以它的主要价值在于理解指导原则并把它们应用到你的代码库，而不是去追着一大堆支撑文档看。

你的请求里该包含什么

想把 nuxt4-patterns 用好，就要把页面或功能目标、渲染模式，以及具体问题类型都交代清楚。一个好的 prompt 可以写成：“修复一个 Nuxt 4 dashboard 页面，因为只在客户端做日期格式化导致 SSR hydration mismatch；保持页面 SSR 渲染，并保留现有 SEO。” 这比“帮我处理 hydration 问题”更好，因为它明确告诉技能哪些内容不能改。

应用这些建议的最佳工作流

把 nuxt4-patterns 当作一个决策过滤器：先判断问题属于 hydration 安全、route rules、lazy loading 还是数据获取，然后再请求最小、最安全的改动。如果页面是服务端渲染的，先要求 SSR-safe 的 markup；如果它确实需要浏览器端行为，再只请求最窄的 ClientOnly 或 .client.vue 边界。

先读哪些文件和章节

先从 SKILL.md 看起，尤其是 activation criteria，以及关于 hydration safety 和 data fetching 的部分。这些是 nuxt4-patterns 指南里信号最强的内容，因为它们会解释 bug 是怎么来的，以及通常该用什么模式修复。如果你打算把这个技能适配到自己的项目里，也要先检查仓库结构，看看有没有面向特定功能的说明，再去复制示例。

nuxt4-patterns 技能 FAQ

nuxt4-patterns 只适用于 Nuxt 4 SSR 应用吗？

不是。nuxt4-patterns 最适合 SSR 和客户端行为混用的 Nuxt 4 应用，但它同样适用于 hybrid 页面、prerendered 路由，以及那些会拉取数据或依赖 route state 的组件。如果你的应用完全是 client-side 的，这项技能的价值就会小很多。

什么情况下不该用它？

如果问题与渲染或数据流无关，就不要优先使用 nuxt4-patterns，比如纯样式问题、无关的 Vue state 管理问题，或者后端 API 设计问题。它最强的场景是：问题和 markup 一致性、payload 行为，或 route 级渲染选择有关。

它比普通 prompt 更好吗？

通常是的，因为 nuxt4-patterns 技能把 Nuxt 4 Frontend Development 里真正重要的约束都预先写进去了：首屏渲染要确定、fetch 要 SSR-safe、client-only 边界要谨慎。普通 prompt 也许能给出可运行答案，但更容易漏掉 hydration 或 payload 方面的问题。

它适合初学者吗？

适合，只要你能描述页面和症状。nuxt4-patterns 指南足够实用，初学者也能用，但如果你能提供具体的组件、路由或错误信息，而不是泛泛地问架构建议，效果会更好。

如何改进 nuxt4-patterns 技能

把真实约束先告诉模型

nuxt4-patterns 最有效的用法，是先说清楚你必须保留的限制：SSR、SEO、route 行为，还是 bundle size。说明你是否能接受 client-only rendering，页面是否必须可被爬取，以及数据是否应该在服务端获取。这样技能才能选对模式，而不是过度修正。

准确描述不匹配或取舍点

如果你是在排查 bug，就把具体症状写出来：hydration 警告文本、出问题的 route、重复拉取数据的请求，或者服务端和客户端渲染不同的组件。如果你是在提需求，就明确你想要的渲染行为，以及哪些内容必须保持不变。这是提升 nuxt4-patterns 输出质量最快的方法。

先从安全、再到更小范围的改动迭代

先让模型给出最小修复，再逐步收窄。比如先说：“保持 SSR，消除 mismatch，不要改布局”；然后再说：“现在把 chart 改成只在交互时 lazy-load。” 这种方式能帮助 nuxt4-patterns 技能一直聚焦在真正的决策上，而不是把整页重写一遍。