agentleFS
Sign inStart free
KIMJINWOO4KIMJINWOO4/vue-skills/skills/vue/SKILL.md

vue

Skill28 starsChanged 31 days agoMITView on GitHub

Vue 3 application code. Composition API with script setup and TypeScript, reactivity, components, props, emits, defineModel, slots, composables, Transition, Teleport, Suspense, KeepAlive, Pinia stores, Vue Router 5, VueUse, component testing, and Vue 3.6 Vapor Mode. Use for any work on .vue files or Vue composables, including Options API and JSX codebases.

33 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use antfu-design, nitro and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • wltn7810-dotcomSkill

    antfu-design

    antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

    Also in 3 projects that use this

  • SentrySkill

    nitro

    Build and deploy universal JavaScript servers with Nitro v3. Use when working with nitro.config.ts, defineNitroConfig, defineHandler, defineConfig, server.ts entry, filesystem routing, route rules, useStorage, defineCachedHandler, useDatabase, definePlugin, runtime hooks, Vercel/Cloudflare deployment, or migrating from Nitro v2/nitropack.

    Also in 4 projects that use this

  • rogue-dev-studioSkill

    nodejs

    Node.js development environment. Use when the project needs this capability or the user / team manifest asks for it. Use for specialized `nodejs` work when listed in TEAM.yaml or explicitly requested.

    Also in 4 projects that use this

  • andyridsSkill

    express

    Run the ICM express-change pipeline - a small change no spec has to move for, with the plan record left intact

    Also in 3 projects that use this

  • dylantarreSkill

    angular

    Builds token-driven Angular components with signals and standalone components. Use when creating Angular component libraries, integrating design tokens, or building design system components with new control flow syntax.

    Also in 4 projects that use this

  • Sorcha-PlatformSkill

    grpc

    Build or review gRPC services and clients in .NET. USE FOR: ASP.NET Core gRPC, protobuf contracts, unary or streaming RPC, gRPC client factory, interceptors, deadlines, cancellation, channel reuse, backend service integration. DO NOT USE FOR: broad browser-facing APIs without gRPC-Web tradeoff review, SignalR realtime hubs, plain REST APIs. INVOKES: dotnet build/test and focused service or client smoke checks when code changes.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

4 rules. 0 are common, 1 is distinctive, and 3 are very specific to this project.

  • 0

    Common

    Most of the 28 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Check the stack first: Read package.json for the majors of vue, pinia, vue-router and @vueuse/core, and match the style the project already …

    line 12
  2. Distinctive:

    Load the four core references: before the first edit and apply them for the whole task: reactivity, sfc, component-data-flow,

    line 13
  3. Very specific:

    Keep source state small. Use shallowRef for large data that is replaced wholesale and for third-party instances.

    line 21
  4. Very specific:

    Use useTemplateRef('name') for template refs.

    line 24

“Common” is measured: kept by at least 6 in 10 of the 28 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Vue

Versions checked on 2026-10-15: Vue 3.5.44 stable and 3.6.0-rc.11 (Vapor Mode), Pinia 4.1, Vue Router 5.4, VueUse 15.0, Vitest 5.0.

Workflow

  1. Check the stack first. Read package.json for the majors of vue, pinia, vue-router and @vueuse/core, and match the style the project already uses. New code defaults to the Composition API with <script setup lang="ts">. Options API projects follow options-api; JSX projects follow jsx.
  2. Load the four core references before the first edit and apply them for the whole task: reactivity, sfc, component-data-flow, composables.
  3. Map components before building a feature with more than one part. Write one sentence of responsibility per component, plus its props and emits. Route views compose children; they do not hold feature logic.
  4. Add optional features only when the requirement calls for them: slots, KeepAlive, Teleport, Suspense, transitions, directives, render functions, plugins. workflow has the full decision list and the final self-check.
  5. Optimize after it works. Performance work starts from a measurement; see the vue-performance skill.

Rules that prevent most Vue bugs

  • Derive values with computed. Use watch only for side effects, and clean up with onWatcherCleanup.
  • Keep source state small. Use shallowRef for large data that is replaced wholesale and for third-party instances.
  • Props are read-only. Two-way bindings go through defineModel; events are typed with defineEmits.
  • Destructuring reactive() or a store breaks reactivity. Use toRefs() or storeToRefs().
  • Use useTemplateRef('name') for template refs. VueUse 15 removed templateRef.
  • Composables that accept inputs take MaybeRefOrGetter and read them with toValue() inside effects. See adaptable-composables.
  • API data belongs in a query layer (vue-data skill), not in Pinia stores with hand-rolled loading flags.

Reference map

TopicStart here
Core concepts, curated by the Vue teamworkflow, then core/
API surface: macros, reactivity, lifecycle, built-insapi-guide
Vue 3.6 RC and Vapor Modevue-36-vapor
Pinia 4pinia-guide, pitfalls in pinia-gotchas
Vue Router 5router-v5, pitfalls in router-gotchas
Testing with Vitest, Vue Test Utils and Playwrighttesting-guide
VueUse 15, about 270 functionsvueuse-guide
Options API and JSX codebasesoptions-api, jsx

Related skills: vue-debug for errors and console warnings, vue-review for reviewing a diff, vue-upgrade for version bumps, plus vue-data, vue-forms, vue-performance, vue-a11y, vue-ui and vue-clean-components.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free