# Petrovc AI Agent Kit Vue

> Vue Skill

- Skill: `tomevault-io/petrovc-ai-agent-kit-vue` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/petrovc-ai-agent-kit-vue`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/petrovc-ai-agent-kit-vue/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/petrovc-ai-agent-kit-vue

---


# Vue Skill

## Goal
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`](SKILL.deep.md)

---
> Source: [PetrovC/ai-agent-kit](https://github.com/PetrovC/ai-agent-kit) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-10 -->