nuxt4-patterns
by affaan-mnuxt4-patterns is a Nuxt 4 skill for hydration safety, route rules, lazy loading, and SSR-safe data fetching. Use the nuxt4-patterns skill to make better Frontend Development decisions, reduce mismatches, and apply the right pattern for each page or component.
This skill scores 78/100, which means it is a solid listing candidate for directory users who work on Nuxt 4. The repository gives enough operational detail to trigger the skill correctly and apply it with less guesswork than a generic prompt, especially for SSR safety, route rules, lazy loading, and data fetching. It is useful to install, though users should note that the workflow is more pattern guidance than a full end-to-end toolchain.
- Clear activation cues for common Nuxt 4 problems like hydration mismatches, route rules, and SSR-safe fetching.
- Concrete guidance on core patterns such as useFetch, useAsyncData, ClientOnly, and import.meta.client.
- Substantial skill body with headings and code fences, giving agents enough structure to apply the patterns directly.
- No install command or companion resources, so adoption depends on reading the SKILL.md content directly.
- No scripts or references, which limits checkable workflow depth and makes it more guidance-oriented than automation-oriented.
Overview of nuxt4-patterns skill
What nuxt4-patterns is for
nuxt4-patterns is a Nuxt 4-focused skill for choosing the right SSR, hydration, routing, and data-fetching patterns before you ship a page. It helps when you need practical guidance for Frontend Development decisions that affect correctness and performance, not just syntax help.
Who should use it
Use the nuxt4-patterns skill if you are building or fixing Nuxt 4 apps and need help with hydration mismatches, route rules, lazy loading, or SSR-safe data fetching. It is most useful for engineers who want an installable workflow they can reuse across pages and components instead of rewriting a fresh prompt each time.
What makes it different
The value of nuxt4-patterns is its decision support: when to keep rendering deterministic, when to move logic client-side, when to use useFetch versus useAsyncData, and when ssr: false is a real fix versus a workaround. That makes the nuxt4-patterns skill more useful than a generic Nuxt prompt because it centers the tradeoffs that usually block adoption.
How to Use nuxt4-patterns skill
nuxt4-patterns install and first check
Install the nuxt4-patterns skill with:
npx skills add affaan-m/everything-claude-code --skill nuxt4-patterns
After install, read SKILL.md first. This skill repo is small and self-contained, so the main value comes from understanding the guidance and applying it to your codebase, not from chasing a large support tree.
What to include in your request
For good nuxt4-patterns usage, give the model the page or feature goal, the render mode, and the exact problem class. A strong prompt looks like: “Fix a Nuxt 4 dashboard page with SSR hydration mismatch caused by client-only date formatting; keep the page SSR-rendered and preserve existing SEO.” That is better than “Help with hydration” because it tells the skill what not to change.
Best workflow for applying the guidance
Use nuxt4-patterns as a decision filter: identify whether the issue is hydration safety, route rules, lazy loading, or data fetching, then ask for the smallest safe change. If the page is server-rendered, ask for SSR-safe markup first; if it truly needs browser-only behavior, ask for the narrowest ClientOnly or .client.vue boundary.
Files and sections to read first
Start with SKILL.md, especially the activation criteria and the sections on hydration safety and data fetching. Those are the highest-signal parts of the nuxt4-patterns guide because they explain what causes the bug and what pattern usually fixes it. If you are adapting the skill to your own project, also inspect the repo structure for any feature-specific notes before copying examples.
nuxt4-patterns skill FAQ
Is nuxt4-patterns only for Nuxt 4 SSR apps?
No. The nuxt4-patterns skill is best for Nuxt 4 apps that mix SSR and client behavior, but it also helps on hybrid pages, prerendered routes, and components that fetch data or depend on route state. If your app is purely client-side, the skill is less valuable.
When should I not use it?
Do not reach for nuxt4-patterns when the issue is unrelated to rendering or data flow, such as pure styling, unrelated Vue state management, or backend API design. It is strongest when the problem is about markup consistency, payload behavior, or route-level rendering choices.
Is it better than a normal prompt?
Usually yes, because the nuxt4-patterns skill bakes in the constraints that matter for Nuxt 4 Frontend Development: deterministic first render, SSR-safe fetches, and careful client-only boundaries. A normal prompt may produce a working answer, but it is more likely to miss hydration or payload issues.
Is it beginner-friendly?
Yes, if you can describe the page and the symptom. The nuxt4-patterns guide is practical enough for beginners, but beginners get better results when they include a concrete component, route, or error message instead of asking for broad architecture advice.
How to Improve nuxt4-patterns skill
Give the model the real constraint
The strongest nuxt4-patterns usage starts with the limitation you must preserve: SSR, SEO, route behavior, or bundle size. Say whether you can accept client-only rendering, whether the page must remain crawlable, and whether data should be fetched on the server. That lets the skill choose the right pattern instead of overcorrecting.
Describe the mismatch or tradeoff precisely
If you have a bug, include the exact symptom: hydration warning text, route that misbehaves, data that double-fetches, or a component that renders differently server and client. If you have a feature request, specify the desired render behavior and what must stay unchanged. This is the fastest way to improve nuxt4-patterns results.
Iterate from safe to narrow changes
Ask for the smallest fix first, then refine. For example: “Keep SSR, remove mismatch, do not change layout,” then later “Now refactor to lazy-load the chart only on interaction.” That approach helps the nuxt4-patterns skill stay focused on the actual decision rather than rewriting the whole page.