CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

nuxt4-patterns

Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.

Quality

77%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/nuxt4-patterns/SKILL.md

The canonical home for this skill is nuxt4-patterns in affaan-m/ECC

SKILL.md
Quality
Evals
Security

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A tight, well-structured patterns skill: mostly non-obvious Nuxt 4 specifics, three concrete code examples, and a closing review checklist that anchors verification. Main gaps are a slightly non-standard useAsyncData key in the example, minor restated general knowledge, and no error-recovery loop for the debugging scenarios it targets.

Suggestions

Fix the useAsyncData example to use a string key — `await useAsyncData(`article:${route.params.slug}`, () => $fetch(...))` — since Nuxt 4's key argument is a string, not a function.

Add a short fix-verify loop for hydration debugging (e.g., bisect the mismatch by wrapping the suspect section in ClientOnly, then re-check) so the Review Checklist doubles as error recovery.

Trim the routeRules glossary lines (prerender/swr/isr definitions) or fold them into the code comment to cut tokens Claude doesn't need.

DimensionReasoningScore

Conciseness

The body is dense with Nuxt-specific, non-obvious guidance ("URL fragments are client-only", "Passing new props to a lazily hydrated component will trigger hydration immediately") and mostly assumes Claude's competence. Minor over-explanation — the route-rule glossary (prerender/swr/isr definitions) and the NuxtLink prefetch note restate things Claude already knows — keeps it just below a 5.

4 / 5

Actionability

Provides copy-paste-ready routeRules config and a Lazy-component template, plus concrete API guidance (lazy: true, server: false, pick, hydrate-on-visible, defineLazyHydrationComponent()). The data-fetching snippet is executable in spirit but its function-form key ("() => `article:${route.params.slug}`") is not the standard Nuxt 4 string-key signature, a small gap versus fully copy-paste-ready coverage.

4 / 5

Workflow Clarity

Follows a coherent scenario → pattern → verify flow: "When to Activate" diagnoses the situation, topic sections give the fix, and the closing "Review Checklist" supplies explicit verification points (e.g., "First SSR render and hydrated client render produce the same markup"). It lacks feedback-loop/error-recovery guidance — e.g., what to do when a mismatch persists after applying a pattern — so it does not reach 5.

4 / 5

Progressive Disclosure

Well-organized single-file structure with clear section headers and navigable, appropriately scoped content; nothing clearly needs splitting at ~95 lines. It sits above 3 (structure is good and consistent) but below 5 (the guideline reserves 5 for skills under 50 lines, and content like the full routeRules strategy glossary could live in a reference if the skill grows).

4 / 5

Total

16

/

20

Passed

Description

70%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A specific, well-targeted description that names the Nuxt 4 domain, concrete capability areas, and the key composables, making it highly distinct from neighboring skills. Its main weakness is the absent "Use when..." trigger clause in the description itself, which caps completeness and slightly limits trigger-term coverage.

Suggestions

Add an explicit trigger clause to the description, e.g., "Use when building or debugging Nuxt 4 apps with SSR, hydration mismatches, route rules, or page-level data fetching with useFetch/useAsyncData."

Include natural user phrasings such as "hydration mismatch", "prerender/SWR/ISR", or "payload size" to broaden trigger-term coverage.

Lead capability areas with concrete action verbs (e.g., "Prevents hydration mismatches, configures route rules, optimizes lazy loading") instead of bare topic nouns.

DimensionReasoningScore

Specificity

Names the domain plus five concrete capability areas — "hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData" — including specific API names. It stays below 5 because the items are topic nouns rather than concrete actions and "performance" is generic.

4 / 5

Completeness

The "what" is clear and specific (patterns for hydration safety, route rules, lazy loading, SSR-safe data fetching), but the description contains no "Use when..." clause or equivalent trigger guidance — the trigger clause exists only in the body, not the frontmatter. Per the rubric guideline, a missing explicit trigger clause caps completeness at 3.

3 / 5

Trigger Term Quality

Contains natural terms a Nuxt developer would actually say: "hydration", "route rules", "lazy loading", "SSR", "useFetch", "useAsyncData", "Nuxt 4". Missing common variations like "hydration mismatch", "prerender/SWR/ISR", or "payload size", so it falls short of comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

"Nuxt 4 app patterns ... SSR-safe data fetching with useFetch and useAsyncData" carves out a clear niche with framework-specific triggers (useFetch/useAsyncData, route rules, hydration) that no general Vue or web-performance skill would claim, so conflict risk is minimal.

5 / 5

Total

16

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

valeriibeck-star/claude-skills

Path

skills/nuxt4-patterns/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.