nuxt4-patterns

nuxt4-patterns 技能總覽

nuxt4-patterns 的用途

nuxt4-patterns 是一個以 Nuxt 4 為核心的技能，專門用來在頁面上線前，選對 SSR、hydration、路由與資料擷取模式。當你需要的是會影響正確性與效能的前端開發決策，而不只是語法協助時，這個技能特別有用。

誰適合使用

如果你正在開發或修復 Nuxt 4 應用，並且需要處理 hydration mismatch、route rules、lazy loading，或 SSR-safe data fetching，就適合用 nuxt4-patterns。它最適合想要一套可安裝、可重複使用的工作流程的工程師，而不是每次都重新寫一段新的 prompt。

nuxt4-patterns 的差異在哪裡

nuxt4-patterns 的價值在於它提供決策支援：什麼時候要維持可預測的渲染、什麼時候該把邏輯移到 client 端、什麼時候該用 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。這個技能 repo 很小，而且是自包含的，所以重點價值在於理解其中的指引並套用到你的 codebase，而不是去追一大串支援檔案。

提問時要提供哪些資訊

要把 nuxt4-patterns 用好，請提供頁面或功能目標、render mode，以及具體的問題類型。好的 prompt 例如：「修正一個 Nuxt 4 dashboard page 的 SSR hydration mismatch，原因是 client-only 的日期格式化；請保持頁面 SSR 渲染並保留現有 SEO。」這會比「幫我處理 hydration」更好，因為它明確告訴技能哪些地方不能改。

套用建議的最佳工作流程

把 nuxt4-patterns 當成決策過濾器來用：先判斷問題屬於 hydration 安全、route rules、lazy loading，還是 data fetching，再要求最小且安全的修改。如果頁面是 server-rendered，先要求 SSR-safe 的 markup；如果真的需要 browser-only 行為，再要求最窄範圍的 ClientOnly 或 .client.vue 邊界。

先讀哪些檔案與章節

先從 SKILL.md 開始，特別是 activation criteria，以及關於 hydration 安全與 data fetching 的章節。這些是 nuxt4-patterns 指南裡訊號最強的部分，因為它們會說明 bug 是怎麼產生的，以及通常該用哪種模式修正。如果你要把這個技能改用到自己的專案，也應該先看 repo 結構，確認有沒有任何 feature-specific 的備註，再去複製範例。

nuxt4-patterns 技能 FAQ

nuxt4-patterns 只適用於 Nuxt 4 的 SSR app 嗎？

不是。nuxt4-patterns 技能最適合混合 SSR 與 client 行為的 Nuxt 4 app，但它也能幫助 hybrid pages、prerendered routes，以及需要抓資料或依賴 route state 的元件。如果你的 app 完全是 client-side，這個技能的價值就會比較低。

什麼情況下不該用它？

當問題與 rendering 或 data flow 無關時，就不該優先使用 nuxt4-patterns，例如單純的樣式問題、無關的 Vue state management，或後端 API 設計。它最強的地方是在處理 markup 一致性、payload 行為，或 route 層級的渲染選擇。

它比一般 prompt 更好嗎？

通常是，因為 nuxt4-patterns 技能內建了 Nuxt 4 Frontend Development 最重要的限制：第一次渲染要可預測、fetch 要符合 SSR、安全地劃分 client-only 邊界。一般 prompt 也許能產出可運作的答案，但更容易漏掉 hydration 或 payload 相關問題。

對初學者友善嗎？

可以，只要你能清楚描述頁面與症狀。nuxt4-patterns 指南本身很實用，初學者也能用；不過如果你提供的是具體的 component、route 或錯誤訊息，而不是寬泛的架構建議，通常會得到更好的結果。

如何改進 nuxt4-patterns 技能

先把真正的限制說清楚

nuxt4-patterns 最強的使用方式，是先從你必須保留的限制開始：SSR、SEO、route 行為，或 bundle size。請說明你能不能接受 client-only rendering、頁面是否必須可被爬取，以及資料是否應該在 server 端擷取。這樣技能才能選對模式，而不是過度修正。

精準描述不一致或取捨

如果你遇到 bug，請附上精確症狀：hydration warning 的文字、行為異常的 route、重複 fetch 的資料，或 server 與 client 顯示不同的 component。如果你是要新增功能，請明確寫出想要的 render 行為，以及哪些東西必須維持不變。這是提升 nuxt4-patterns 結果最快的方法。

從安全、最小的改動開始迭代

先要求最小修正，再逐步收斂。例如：「保持 SSR，移除 mismatch，不要改 layout」，之後再補一句「現在只在互動時 lazy-load 圖表」。這種方式能幫助 nuxt4-patterns 技能把焦點放在真正的決策上，而不是重寫整個頁面。