Produce clean, maintainable Vue 3 code using the Composition API.
Components should be small and focused. Business logic belongs in composables or stores,
not in <template> expressions or component <script setup> blocks.
Quick reference
Concept
Best practice
API Style
Use Composition API with <script setup> and TypeScript
Reactivity
Use ref() for primitives, reactive() for objects, computed() for derived
Props/Emits
Use defineProps, defineEmits, and defineModel (Vue 3.4+)
State
Use Pinia for global state; avoid mutating state directly from components
Key commands
npm run dev, npm run build, npm run test:unit, npx vue-tsc --noEmit
Full guidance
Extended how-to, patterns, anti-patterns, and checklists: SKILL.deep.md
1---2name: petrovc-ai-agent-kit-vue3description: Vue Skill4---56# Vue Skill78## Goal9Produce clean, maintainable Vue 3 code using the Composition API.10Components should be small and focused. Business logic belongs in composables or stores,11not in `<template>` expressions or component `<script setup>` blocks.1213## Quick reference1415| Concept | Best practice |16|---|---|17| API Style | Use Composition API with `<script setup>` and TypeScript |18| Reactivity | Use `ref()` for primitives, `reactive()` for objects, `computed()` for derived |19| Props/Emits | Use `defineProps`, `defineEmits`, and `defineModel` (Vue 3.4+) |20| State | Use Pinia for global state; avoid mutating state directly from components |21| Key commands | `npm run dev`, `npm run build`, `npm run test:unit`, `npx vue-tsc --noEmit` |2223## Full guidance24Extended how-to, patterns, anti-patterns, and checklists: [`SKILL.deep.md`](SKILL.deep.md)2526---27> Source: [PetrovC/ai-agent-kit](https://github.com/PetrovC/ai-agent-kit) — distributed by [TomeVault](https://tomevault.io).28<!-- tomevault:4.0:skill_md:2026-06-10 -->
Run npx skillmds@latest add tomevault-io/petrovc-ai-agent-kit-vue in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Vue Skill It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io