VueUse Skills
A skill that points the agent to ready VueUse composables for Vue 3 and Nuxt, with a usage and type reference for each function
- 402 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill consists of text instructions and reference files, runs nothing and makes no network calls
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/vueuse-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of text instructions and reference files, runs nothing and makes no network calls
This is third-party code. Review the repository files before installing.
What it does
VueUse Skills adds the vueuse-functions skill to an agent. In Vue and Nuxt projects it makes the agent first check whether a VueUse function covers the requirement and use it instead of hand-written code. The skill maps a task to a fitting function, such as useLocalStorage for browser storage, useClipboard for copying or useInfiniteScroll for endless scrolling. The reference is tiered to spend fewer tokens. The main SKILL.md holds a table of functions by group with a short description and an invocation rule, and the agent reads the details of each function from a separate file in the references folder only when needed: usage and type declarations. So only the part of the reference a task needs reaches the context. The invocation rule comes in three kinds. AUTO means apply automatically where it fits. EXTERNAL means apply only if the needed external dependency is already in the project. EXPLICIT_ONLY means apply only on a direct request. You can override these rules in a prompt or in the AGENTS.md file.
Who it is for. For frontend developers on Vue 3 and Nuxt 3 working with Claude Code, Cursor or Codex who want to fix fewer invented functions and hand-rolled hooks.
Good fit when
- The agent writes a Vue 3 component and invents its own localStorage or clipboard hook although VueUse already has one
- A Nuxt project needs a reactive wrapper over a browser API: window size, scroll, tab visibility, drag and drop
- Tokens are limited and a reference of about 270 files will not fit in the context whole
- You want predictability: the agent applies some functions itself and asks before using external dependencies
- You need to find a function in a large reference fast: the table in SKILL.md is grouped by area, for example state and page elements
Not a fit when
- The project uses neither Vue nor Nuxt: the skill targets Vue 3 or newer and Nuxt 3 or newer only
- You need composable functions for React or Svelte: the skill describes VueUse only
- You need a tutorial on Vue itself: the skill holds only a VueUse function reference
- You need VueUse installed into the project: the skill adds no dependencies, you add the package yourself
Example request
Build a Vue 3 todo list with localStorage storage, a remaining count in the browser title, a copy button for each item and infinite scrollingLimitations
The author calls the project experimental and asks for feedback. The skill targets projects on Vue 3 or newer, or Nuxt 3 or newer, and does not apply to other projects.
The skill does not add the VueUse package, which is installed separately. Before using a function the agent must open its file in references; SKILL.md marks this requirement as IMPORTANT.
The SKILL.md metadata lists version 1.0, the MIT license and the author SerKo (serkodev).
How to disable. Delete the vueuse-functions folder from the agent's skills directory or run `/plugin uninstall vueuse-functions@vueuse-skills` if you installed through the Claude Code marketplace. The skill does not change the VueUse package in the project, which stays as it was.
FAQ
How do I install VueUse Skills in Claude Code?
Through the marketplace: `/plugin marketplace add vueuse/skills`, then `/plugin install vueuse-functions@vueuse-skills`. The universal option for any agent with skill support: `npx skills add vueuse/skills`.
How does the skill save tokens?
It first gives the agent an overview of functions with short descriptions and loads the detailed usage and type reference one function at a time. The author calls this progressive disclosure: only what the task needs stays in the context.
What do AUTO, EXTERNAL and EXPLICIT_ONLY mean?
They are the invocation rule of a function in the skill table. AUTO the agent uses on its own, EXTERNAL only if the needed external dependency is already in the project, EXPLICIT_ONLY only on a direct request. Any rule can be overridden in a prompt or the AGENTS.md file.
Does the skill need the internet?
No. The function and type reference lives in the repository, so the skill needs no network and asks the agent for no extra permissions.
Do I need to install the VueUse package separately?
Yes, the skill does not add it. Install VueUse into a Vue 3 or Nuxt 3 project yourself before asking the agent to use its functions.
Discussion
No questions or reviews yet.
Related
SkillsA set of skills for Vue 3 development: Composition API practices, router, Pinia, testing, JSX, Options API and debugging
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
A skill set for the Vue, Vite and Nuxt stack: the author's conventions plus digests of official tool documentation
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
Vercel skills for agents
Agent Skills
Vercel skills: React and Next.js performance, UI checks by guidelines, React Native, component composition, and deployment
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
README in short
The description lists the benefits: progressive disclosure, low token use, offline operation, customizable rules and fewer invented APIs. As a check it shows a todo-list request and the resulting code with useLocalStorage, useTitle, useClipboard, useColorMode and useInfiniteScroll.
README badge
Original SKILL.md
---
name: vueuse-functions
description: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
license: MIT
metadata:
author: SerKo <https://github.com/serkodev>
version: "1.0"
compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project
---
# VueUse Functions
This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
## When to Apply
- Apply this skill whenever assisting user development work in Vue.js / Nuxt.
- Always check first whether a VueUse function can implement the requirement.
- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate VueUse function and follow the function's invocation rule.
- Please refer to the `Invocation` field in the below functions table. For example:
- `AUTO`: Use automatically when applicable.
- `EXTERNAL`: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
- `EXPLICIT_ONLY`: Use only when explicitly requested by the user.
> *NOTE* User instructions in the prompt or `AGENTS.md` may override a function's default `Invocation` rule.
## Functions
All functions listed below are part of the [VueUse](https://vueuse.org/) library, each section categorizes functions based on their functionality.
IMPORTANT: Each function entry includes a short `Description` and a detailed `Reference`. When using any function, always consult the corresponding document in `./references` for Usage details and Type Declarations.
### State
| Function | Description | Invocation |
|----------|-------------|------------|
| [`createGlobalState`](references/createGlobalState.md) | Keep states in the global scope to be reusable across Vue instances | AUTO |
| [`createInjectionState`](references/createInjectionState.md) | Create global state that can be injected into components | AUTO |
| [`createSharedComposable`](references/createSharedComposable.md) | Make a composable function usable with multiple Vue instances | AUTO |
| [`injectLocal`](references/injectLocal.md) | Extended `inject` with ability to call `provideLocal` to provide the value in the same component | AUTO |
| [`provideLocal`](references/provideLocal.md) | Extended `provide` with ability to call `injectLocal` to obtain the value in the same component | AUTO |
| [`useAsyncState`](references/useAsyncState.md) | Reactive async state | AUTO |
| [`useDebouncedRefHistory`](references/useDebouncedRefHistory.md) | Shorthand for `useRefHistory` with debounced filter | AUTO |
| [`useLastChanged`](references/useLastChanged.md) | Records the timestamp of the last change | AUTO |
| [`useLocalStorage`](references/useLocalStorage.md) | Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) | AUTO |