skills.rest
RasmusGodske
RasmusGodskeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vue-writer

Create and refactor Vue components with TypeScript, Composition API, and defineModel.

Updated Nov 18, 2025
Search Tags:#typescript#frontend#components#vue#refactor#composition-api#defineModel
One-click install
npx skills add https://github.com/RasmusGodske/claude-code-agent-communication --skill vue-writer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-writer
Source: https://github.com/RasmusGodske/claude-code-agent-communication/tree/main/agent-communication-mcp-server/.claude/skills/vue-writer
Command: npx skills add https://github.com/RasmusGodske/claude-code-agent-communication --skill vue-writer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams create and edit Vue components quickly and consistently, enforcing modern patterns like defineModel() and the Composition API to avoid legacy modelValue usage.

Core Features & Use Cases

  • Define and manage Vue models with defineModel for clean two-way binding.
  • Enforce TypeScript, script/setup, and scoped styles, ensuring components follow the prescribed structure.
  • Refactor existing Vue components to modern conventions and reduce boilerplate.

Quick Start

Create a new Vue component named MyWidget.vue that uses defineModel<string>() for a simple input and demonstrates the script → template → style order.

Frequently Asked Questions about vue-writer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor Vue components to use the Composition API and defineModel?▼

Vue components use defineModel for two-way binding by replacing legacy modelValue props and emit statements with a single reactive ref. This requires TypeScript and the script-setup structure to enforce clean data flow.

What is the best way to structure Vue components with TypeScript and scoped styles?▼

The best way to structure Vue components is following the script → template → style order within a single .vue file. This setup uses TypeScript, the Composition API, and scoped styles to ensure consistent architecture.

Can I use defineModel to replace legacy modelValue usage in Vue 3?▼

Yes, defineModel replaces legacy modelValue usage in Vue by creating a clean two-way binding reference. It eliminates manual props and emit boilerplate within script-setup components using the Composition API.

Do I need TypeScript to create Vue components with defineModel?▼

Yes, TypeScript is required to create Vue components with defineModel using this approach. Enforcing TypeScript alongside the Composition API and script-setup structure ensures type safety and consistent component architecture.

Why should I refactor existing Vue components to modern conventions?▼

You should refactor existing Vue components to modern conventions to reduce boilerplate and enforce consistent structure. Adopting defineModel and the Composition API eliminates legacy patterns, making components easier to maintain.

Related Skills

Explore More Software Engineering Skills→
heamlkheamlk

vue

Standardize Vue 3 SFC development with script setup and typed props.

Community
Intermediate
ehtbantonehtbanton

vue-component-generator

Generate Vue 3 Single File Components with Composition API and TypeScript.

Community
Basic
devs6186devs6186

coding-standards

Standardize coding practices across TypeScript, JavaScript, React, and Node.js projects.

Community
Advanced
szweibelszweibel
2

svelte-5-runes

Implement Svelte 5 runes reactivity patterns in code projects.

Community
Advanced