vueuse

Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.

Install with Tessl CLI

npx tessl i github:onmax/nuxt-skills --skill vueuse

What are skills?

100

Review — 100%

Does it follow best practices?

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

88%

10%

Setting Up Reactive Utilities in a Nuxt Application

Nuxt VueUse setup and configuration

Criteria

Without context

With context

@vueuse/nuxt dependency

100%

@vueuse/core dependency

100%

VueUse 14.x version

100%

Nuxt module registered

100%

No manual VueUse imports

100%

useMouse used

100%

useLocalStorage/useStorage used

100%

useNetwork used

100%

Auto-import explanation

100%

pnpm install command

Without context: $0.2199 · 41s · 12 turns · 13 in / 2,510 out tokens

With context: $0.3834 · 54s · 21 turns · 19 in / 2,964 out tokens

100%

30%

Building an SSR-Compatible Dashboard Widget

SSR-safe browser API composable usage

Criteria

Without context

With context

isClient guard present

100%

onMounted guard present

100%

Two distinct patterns used

100%

isClient imported from @vueuse/core

100%

SSR-safe composable used directly

100%

No bare window/document access

100%

SSR_NOTES lists safe composables

100%

SSR_NOTES lists guarded composables

100%

Imports from @vueuse/core

100%

Reactive data displayed

100%

Without context: $0.3309 · 1m 23s · 16 turns · 16 in / 4,397 out tokens

With context: $0.3642 · 1m 4s · 20 turns · 232 in / 3,536 out tokens

100%

25%

Responsive Layout with Reusable Cursor Tracking

Component ref element targeting and shared composables

Criteria

Without context

With context

createSharedComposable used

100%

Correct import for createSharedComposable

100%

unrefElement used OR .$el accessed

100%

cardRef not passed directly

100%

useElementSize used

100%

useSharedMouse used in overlay

100%

Overlay renders all four values

100%

Explains why direct ref fails

100%

Explains shared listener benefit

70%

100%

Without context: $0.2507 · 58s · 13 turns · 13 in / 3,252 out tokens

With context: $0.4019 · 1m 6s · 20 turns · 67 in / 3,471 out tokens

Evaluated: 3 days ago
Agent: Claude Code

Table of Contents

Setting Up Reactive Utilities in a Nuxt Application Building an SSR-Compatible Dashboard Widget Responsive Layout with Reusable Cursor Tracking

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.