Author Vue 3 single-file components using the Composition API with script setup.
npx skills add https://github.com/joaoprocopio/tooling --skill vue-joaoprocopio
Please help me install this Agent Skill. Skill: vue Source: https://github.com/joaoprocopio/tooling/tree/main/skills/vue Command: npx skills add https://github.com/joaoprocopio/tooling --skill vue-joaoprocopio
Vue 3 SFC development with the Composition API, script setup, and built-in components can be verbose and error-prone; this Skill consolidates patterns and best practices to speed up development.
Create a new Vue 3 SFC using <script setup lang="ts">, define props with defineProps, defineEmits, and use a built-in component like Transition.
High-intent search queries and answers about installing and using this skill.
To define props and emits in Vue 3 SFCs, use the compiler macros `defineProps` and `defineEmits` directly within a `<script setup>` block. This approach enables type-safe component contracts without separate import statements.
The best way to manage reactive state with the Vue 3 Composition API is by using `<script setup>` to encapsulate reactive variables and computed properties, creating reusable patterns for efficient single-file component development.
Use built-in components like KeepAlive and Teleport in Vue 3 to manage common UI cases such as preserving component state or rendering DOM nodes outside the current hierarchy. Apply them alongside Transition for UI polish.
Yes, you can use TypeScript with Vue 3 Composition API patterns by adding `lang="ts"` to your `<script setup>` tag. This enables type checking for defineProps, defineEmits, and reactive state across your project.
Defining a Vue 3 SFC without script setup leads to verbose code because it requires manual setup function returns and explicit expose statements. The `<script setup>` syntax consolidates patterns to reduce this boilerplate.
Yes, the Vue 3 Composition API supports `defineModel` for two-way binding. This compiler macro simplifies reactive state management and prop definitions within `<script setup>` for reusable components.
CloudyWingEnforce Vue 3 Composition API and script setup guidelines with TypeScript.
vercel-labsConvert JSON UI specifications into Vue 3 component trees.
AratKruglikDevelop Vue 3 applications with Composition API, Pinia, and Vite.
monch1962Provides reusable React and Next.js frontend patterns for UI architecture.
