vue-frontend-expert

Vue Frontend Expert (Vue 3 / Nuxt 3)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills:

• modern-web-guidance — HTML5/CSS standards, modern browser APIs, and accessibility guidelines.
• design-system-architect — Building headless UI components using Radix Vue or VueUse components.
• modern-css-native-expert — Native CSS anchor positioning, View Transitions, container queries, and @starting-style.
• tailwind-expert — Styling Vue/Nuxt components with Tailwind CSS v4.
• ui-ux-pro-max — Design intelligence, layout hierarchies, and Vue component tokens.
• visual-ui-auditor — Multimodal vision auditing of rendered Vue/Nuxt views.
• anti-slop — Anti-slop component craft, zero placeholder stubs, complete reactivity implementations.
• performance-web-vitals — Optimizing Nuxt 3 SSR metrics (LCP, INP, CLS).

Description

Production-grade guidance for building highly reactive and scalable frontend applications using Vue 3 (Composition API) and Nuxt 3. Covers the latest ecosystem tools including Pinia for state management, VueUse for composables, and Tailwind CSS v4 integration.

Trigger Conditions

Activate this skill when the user is:

• Scaffolding a new Vue 3 or Nuxt 3 project.
• Writing or refactoring Vue components using <script setup> and Composition API.
• Managing global state with Pinia.
• Handling client-side routing with Vue Router or Nuxt's file-based routing.
• Implementing SSR (Server-Side Rendering) or SSG (Static Site Generation) using Nuxt 3.

---

Core Concepts

1. Vue 3 Composition API & <script setup>

Use the <script setup> syntax by default. It provides better type inference, less boilerplate, and superior performance compared to the Options API.

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

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

function increment() {
  count.value++
}

onMounted(() => {
  console.log('Component is mounted!')
})
</script>

<template>
  <button @click="increment">Count is: {{ count }} (Double: {{ doubleCount }})</button>
</template>