How do I install the Vue Frontend skill?

Run npx skillmds@latest add tomevault-io/vue-frontend 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.

What does the Vue Frontend skill do?

Composition API vs Options API Use when this capability is needed. It is listed under Web & Frontend on SkillMD.

Is Vue Frontend safe to use?

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.

Which AI agents work with Vue Frontend?

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.

Is Vue Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vue Frontend?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vue Frontend by tomevault-io — Agent Skill

Name: Vue Frontend
Author: tomevault-io

Vue.js Frontend Development Skill

Level 1: Quick Reference (~700-900 tokens)

Core Concepts

Composition API vs Options API

// Composition API (recommended for new projects)
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

// Options API (traditional)
export default {
  data() { return { count: 0 }; },
  computed: { doubled() { return this.count * 2; } }
};

Reactivity Fundamentals

// ref - for primitives and single values
const count = ref(0);
count.value++; // access with .value

// reactive - for objects
const state = reactive({ count: 0, name: 'Vue' });
state.count++; // direct access

// computed - derived state
const doubled = computed(() => count.value * 2);

// watch - side effects
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

Component Communication

// Props (parent → child)
defineProps<{ message: string }>();

// Emits (child → parent)
const emit = defineEmits<{ submit: [data: FormData] }>();
emit('submit', formData);

// Provide/Inject (ancestor → descendant)
// Parent
provide('theme', ref('dark'));
// Child
const theme = inject<Ref<string>>('theme');

Essential Checklist

Setup & Configuration

Vue 3 with Vite or Vue CLI
TypeScript integration
ESLint + Prettier configured
Vue Router installed
Pinia for state management
Vitest + Vue Test Utils for testing

Component Development

Use Composition API with <script setup>
Define props with TypeScript types
Emit typed events
Implement proper lifecycle hooks
Use composables for reusable logic

Routing & Navigation

Define routes with lazy loading
Implement route guards (auth, permissions)
Handle 404 and error pages
Use typed router with generics

State Management

Define Pinia stores with TypeScript
Use composition stores for complex logic
Implement persistence for user preferences
Handle async actions properly

Performance

Use v-once for static content
Implement virtual scrolling for large lists
Lazy load routes and components
Use v-memo for expensive renders
Configure proper build optimization

Accessibility (WCAG 2.1 AA)

Semantic HTML elements
ARIA labels and roles
Keyboard navigation support
Focus management
Screen reader testing

Security

Sanitize user input (DOMPurify)
Configure CSP headers
Avoid v-html with untrusted content
Implement proper authentication
Secure API communication

Level 2:

📚 Full Examples: See REFERENCE.md for complete code samples, detailed configurations, and production-ready implementations.

Implementation Guide (~4000-5000 tokens)